/* =========================
   VARIABLES
========================= */
:root{
 --topbarH: 64px;
  --topbarBorder: 1px; /* ✅ added: matches topbar border thickness */
  --topbarOffset: calc(var(--topbarH) + var(--safeTop) + var(--topbarBorder)); /* ✅ added */
  --yellow: #f2d36a;
  --muted:#b7c7d8;
  --bg0:#07121a;
  --bg1:#0a1a24;
  --text:#eaf3ff;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius2: 28px;
  --serif: "Baskerville Old Face","Baskerville","Garamond","Times New Roman",serif;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --safeTop: env(safe-area-inset-top, 0px);
  --safeBottom: env(safe-area-inset-bottom, 0px);
}

/* =========================
   PAGE LAYOUT
========================= */
.page{
  min-height: 100vh;
  padding-top: var(--topbarOffset); /* ✅ critical: fixes top pixels hidden on ALL normal pages */
}
/* Content */
.content{
  width:min(1000px, 94vw);
  margin: 0 auto 70px;
  background: rgba(14,34,48,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
}

/* =========================
   REGAL HEADERS
========================= */
.regal-header{ text-align:center; margin: 16px 0 12px; }

.glyph-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
}
.glyph-divider .line{
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(242,211,106,.7), transparent);
  opacity: .9;
}
.glyph-divider .glyph{
  color: rgba(242,211,106,.85);
  font-size: 14px;
  letter-spacing: .15em;
  line-height: 1;
}
.regal-title{
  font-family: var(--serif);
  color: var(--yellow);
  font-size: 20px;
  letter-spacing: .04em;
}

/* =========================
   BACK TO TOWN BUTTON
========================= */
.back-btn{
  position: fixed !important;
  top: calc(var(--topbarOffset) + 14px); /* ✅ changed */
  right: 20px;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 18px;
  text-decoration:none;

  background: rgba(14,34,48,.85);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--yellow);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index: 999999;
  transition: background .2s ease, transform .2s ease;

  overflow: visible;
}

.back-btn:hover{
  background: rgba(20,44,60,.95);
  transform: scale(1.05);
}

/* Tooltip */
.back-btn::after{
  content: attr(aria-label);

  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(0,0,0,.92);
  border: 1px solid rgba(242,211,106,.55);
  color: var(--yellow);

  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .04em;

  white-space: nowrap;
  max-width: none;

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;

  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

.back-btn:hover::after,
.back-btn:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
				 sections
========================= */
.section{
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  margin-bottom: 12px;
}
.section h2{ font-size:16px; margin-bottom:6px; }
.section p{ color: rgba(234,243,255,.88); line-height:1.7; }
.muted{ color: var(--muted); line-height:1.7; }
/* =========================
   RESET
========================= */
*{ margin:0; padding:0; box-sizing:border-box; }
img{ display:block; border:none; outline:none; }
button{ all:unset; cursor:pointer; }

/* =========================
   VARIABLES
========================= */
:root{
  --topbarH: 64px;
  --topbarBorder: 1px; /* ✅ added: matches topbar border thickness */
  --topbarOffset: calc(var(--topbarH) + var(--safeTop) + var(--topbarBorder)); /* ✅ added */

  --yellow: #f2d36a;
  --muted:#b7c7d8;
  --bg0:#07121a;
  --bg1:#0a1a24;
  --text:#eaf3ff;
  --shadow: 0 20px 60px rgba(0,0,0,.45);
  --radius2: 28px;
  --serif: "Baskerville Old Face","Baskerville","Garamond","Times New Roman",serif;
  --font: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;

  --safeTop: env(safe-area-inset-top, 0px);
  --safeBottom: env(safe-area-inset-bottom, 0px);
}

html, body{ height:100%; overflow-x:hidden; }

body{
  font-family:var(--font);
  color:var(--text);
  background:
    radial-gradient(1200px 600px at 10% 0%, rgba(90,162,255,.18), transparent 60%),
    radial-gradient(900px 500px at 70% 30%, rgba(89,214,194,.16), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}

/* =========================
   BACK TO TOWN BUTTON
========================= */
.back-btn{
  position: fixed !important;
  top: calc(var(--topbarOffset) + 14px); /* ✅ changed */
  right: 20px;

  width: 42px;
  height: 42px;
  border-radius: 50%;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size: 18px;
  text-decoration:none;

  background: rgba(14,34,48,.85);
  border: 1px solid rgba(255,255,255,.15);
  color: var(--yellow);

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  z-index: 999999;
  transition: background .2s ease, transform .2s ease;

  overflow: visible;
}

.back-btn:hover{
  background: rgba(20,44,60,.95);
  transform: scale(1.05);
}

/* Tooltip */
.back-btn::after{
  content: attr(aria-label);

  position: absolute;
  top: calc(100% + 10px);
  right: 0;

  padding: 8px 12px;
  border-radius: 999px;

  background: rgba(0,0,0,.92);
  border: 1px solid rgba(242,211,106,.55);
  color: var(--yellow);

  font-family: var(--serif);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .04em;

  white-space: nowrap;
  max-width: none;

  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;

  box-shadow: 0 12px 28px rgba(0,0,0,.45);
}

.back-btn:hover::after,
.back-btn:focus-visible::after{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   TOPBAR (fixed)
========================= */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:99999;
  background:#000;

  /* keep the regal divider line */
  border-bottom: var(--topbarBorder) solid rgba(255,255,255,.12); /* ✅ changed to use variable */

  padding-top: var(--safeTop);
  overflow: visible;
}

.topbar-inner{
  height: var(--topbarH);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 0 12px;
  overflow: visible;
  min-width: 0;
}

.logo-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px;
  border-radius:999px;
  text-decoration:none;
  color:inherit;
}

.logo{
  width:42px; height:42px;
  object-fit:contain;
  background:transparent;
  border-radius:0;
}

.brand-pill{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 9px 12px;
  border-radius: 999px;

  max-width:0;
  opacity:0;
  overflow:hidden;
  white-space:nowrap;
  transform: translateX(-4px);
  pointer-events:none;
  transition: max-width .22s ease, opacity .22s ease, transform .22s ease;
}
.logo-btn:hover .brand-pill{
  max-width: 320px;
  opacity: 1;
  transform: translateX(0);
}
.brand-pill .tag{ font-size:12px; color: var(--muted); }

.topbar-title{
  font-family: var(--serif);
  color: var(--yellow);
  text-transform: uppercase;
  user-select:none;
  opacity:.96;
  white-space:nowrap;

  flex: 1 1 auto;
  min-width: 0;
  text-align:center;

  font-size: clamp(11px, 3.2vw, 18px);
  letter-spacing: clamp(.10em, 1.2vw, .38em);

  overflow: hidden;
  text-overflow: ellipsis;
}

.topbar-right{
  display:flex;
  align-items:center;
  gap:8px;
  flex: 0 0 auto;
}

.icon-btn{
  width:40px; height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
}
.icon-btn:active{ transform: translateY(1px); }
.icon-img{ width:18px; height:18px; object-fit:contain; }

.bazaar-btn{ border-color: rgba(242,211,106,.35); }
.bazaar-btn:hover{ background: rgba(242,211,106,.10); box-shadow: 0 0 10px rgba(242,211,106,.22); }

/* Search */
.search-wrap{
  display:inline-flex;
  flex: 0 1 120px;
}
.search-input{
  width: 100%;
  height: 36px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  color: var(--text);
  padding: 0 8px;
  outline: none;
  font-size: 13px;
}
.search-input::placeholder{ color: rgba(234,243,255,.55); }

/* Cart badge */
.cart-btn{ position:relative; }
.cart-badge{
  position:absolute;
  top:-6px; right:-6px;
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: rgba(242,211,106,.95);
  color:#000;
  font-size: 11px;
  font-weight: 800;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

/* =========================
   DROPDOWN MENUS
========================= */
.menu{ position:relative; display:inline-flex; }

.dropdown{
  position:absolute;
  right:0;
  top: 100%;
  margin-top: 0;
  padding-top: 10px;
  background-clip: padding-box;

  min-width: 240px;
  background: rgba(14,34,48,.98);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 8px;
  display:none;
  z-index: 100000;

  /* long menus scroll */
  max-height: min(70vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.dropdown.open{ display:block; }

.drop-item{
  display:block;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration:none;
  color: rgba(234,243,255,.92);
  font-size: 13px;
}
.drop-item:hover{ background: rgba(255,255,255,.06); }

.drop-sep{
  height:1px;
  margin: 6px 4px;
  background: rgba(255,255,255,.10);
}

/* Desktop hover opens */
@media (hover:hover) and (pointer:fine){
  .menu:hover .dropdown{ display:block; }
}

/* Town dropdown aligned left */
.menu[data-menu="town"] .dropdown{
  left: 0;
  right: auto;
}

/* Hover / focus bridge */
.menu:hover > .dropdown,
.menu:focus-within > .dropdown{
  display: block;
}
.menu::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:100%;
  height:12px;
}

/* =========================
   PAGE LAYOUT
========================= */
.page{
  min-height: 100vh;
  padding-top: var(--topbarOffset); /* ✅ critical: fixes top pixels hidden on ALL normal pages */
}

/* =========================
   TOWN STAGE (map + buildings)
========================= */
.town-stage{
  position: fixed;
  top: var(--topbarOffset); /* ✅ changed: removes strip + prevents hiding */
  left: 0;
  right: 0;
  bottom: 0;

  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #000;
}

/* ❌ removed the desktop-only -1px hack (it was fighting the real fix) */

.town-stage::-webkit-scrollbar{ width:0; height:0; }

.town-map-wrap{
  position: relative;
  width: max-content;
  height: 100%;
}

.town-map{
  display:block;
  height: 100%;
  width: auto;
  max-height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}


/* Landscape / wide: cover stage + no pan */
@media (orientation: landscape), (min-aspect-ratio: 3/2){
  .town-map-wrap{ width: 100%; height: 100%; }
  .town-map{ width: 100%; height: 100%; object-fit: cover; }
  .town-stage{ overflow: hidden; }
}

/* =========================
   REGAL HEADERS
========================= */
.regal-header{ text-align:center; margin: 16px 0 12px; }

.glyph-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  width: 100%;
  margin-bottom: 10px;
}
.glyph-divider .line{
  width: 44px;
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(242,211,106,.7), transparent);
  opacity: .9;
}
.glyph-divider .glyph{
  color: rgba(242,211,106,.85);
  font-size: 14px;
  letter-spacing: .15em;
  line-height: 1;
}
.regal-title{
  font-family: var(--serif);
  color: var(--yellow);
  font-size: 20px;
  letter-spacing: .04em;
}

/* Content */
.content{
  width:min(1000px, 94vw);
  margin: 0 auto 70px;
  background: rgba(14,34,48,.55);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 18px;
}
.section{
  padding: 14px 14px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background: rgba(255,255,255,.04);
  margin-bottom: 12px;
}
.section h2{ font-size:16px; margin-bottom:6px; }
.section p{ color: rgba(234,243,255,.88); line-height:1.7; }
.muted{ color: var(--muted); line-height:1.7; }

/* =========================
   FOOTER
========================= */
.footer{
  padding: 20px 12px calc(20px + var(--safeBottom));
  text-align:center;
  opacity: .92;
}
.footer-inner{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.footer .glyph{ color: rgba(242,211,106,.85); }

/* =========================
   RESPONSIVE
========================= */
@media (min-width: 900px){
  .search-wrap{ flex: 0 0 220px; }
}

@media (max-width: 560px){
  .brand-pill{ display:none; }

  .topbar-right{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 8px;
    padding-left: 6px;
  }
  .topbar-right::-webkit-scrollbar{ display:none; }

  .icon-btn{ width:44px; height:44px; flex: 0 0 auto; }

  .topbar-title{
    max-width: 46vw;
    font-size: 13px;
    letter-spacing: .18em;
  }

  .dropdown{ min-width: 220px; }
  .search-wrap{ flex: 0 1 120px; }
}