:root{
  --lf-parchment-1: rgba(255, 233, 190, 0.10);
  --lf-parchment-2: rgba(214, 162, 59, 0.10);

  --lf-gold:#d6a23b;
  --lf-gold2:#f3d07a;
  --lf-slate:#0b111a;
  --lf-slate2:#101a26;
  --lf-ink:#0a0f16;
  --lf-card: rgba(16, 26, 38, 0.78);
  --lf-border: rgba(255,255,255,0.10);
  --lf-text: rgba(255,255,255,0.92);
  --lf-muted: rgba(255,255,255,0.65);
  --lf-shadow: 0 18px 60px rgba(0,0,0,0.55);
  --lf-radius: 18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background: #070b10;
  color: var(--lf-text);
  font-family: "Crimson Text", ui-serif, Georgia, serif;
}

/* Auth */
.lf-auth{
  overflow:hidden;
}
.lf-auth-bg{
  position:fixed; inset:0;
  background-size:cover;
  background-position:center;
  transform: scale(1.03);
  filter: saturate(1.05) contrast(1.05);
}
.lf-auth-overlay{
  position:fixed; inset:0;
  background: radial-gradient(ellipse at top, rgba(8,14,20,0.55), rgba(0,0,0,0.78));
  backdrop-filter: blur(2px);
}
.lf-logo{
  max-height: 190px;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.65));
}
.lf-card{
  background: var(--lf-card);
  border: 1px solid var(--lf-border);
  border-radius: var(--lf-radius);
}
.lf-input{
  background: rgba(5,8,12,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  color: var(--lf-text);
}
.lf-input:focus{
  background: rgba(5,8,12,0.65);
  border-color: rgba(214,162,59,0.55);
  box-shadow: 0 0 0 .25rem rgba(214,162,59,0.15);
  color: var(--lf-text);
}
.lf-btn{
  border: 1px solid rgba(214,162,59,0.55);
  background: linear-gradient(180deg, rgba(214,162,59,0.95), rgba(156,108,24,0.95));
  color: #1a1206;
  font-weight: 700;
  letter-spacing: .2px;
  box-shadow: 0 10px 30px rgba(214,162,59,0.15);
}
.lf-btn:hover{
  filter: brightness(1.05);
}
.lf-btn-outline{
  border-color: rgba(214,162,59,0.55) !important;
  color: rgba(255,255,255,0.9) !important;
}
.lf-btn-outline:hover{
  background: rgba(214,162,59,0.15) !important;
}
.lf-modal{
  background: rgba(10, 15, 22, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--lf-radius);
  box-shadow: var(--lf-shadow);
  color: var(--lf-text);
}
.btn-secondary{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.10);
}
.btn-secondary:hover{ background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.16); }

/* PWA banners (install / update) */
#lf-pwa-banners{ position:fixed; left:0; right:0; bottom:0; pointer-events:none; z-index:70; }
.lf-pwa-banner{
  pointer-events:auto;
  position:fixed;
  left: 12px;
  right: 12px;
  bottom: 92px; /* above bottom bar */
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(214,162,59,0.28);
  background: linear-gradient(180deg, rgba(25,17,9,0.92), rgba(0,0,0,0.78));
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55);
}
.lf-pwa-banner__title{ font-weight: 800; letter-spacing: .3px; }
.lf-pwa-banner__text{ font-size: 13px; color: rgba(255,255,255,0.78); margin-top: 3px; }
.lf-pwa-banner__actions{ display:flex; gap: 8px; margin-top: 10px; justify-content:flex-end; }

.lf-btn--small{ padding: 6px 10px; font-size: 13px; }
.lf-btn--primary{ /* keep default lf-btn look */ }

@media (max-width: 380px){
  .lf-pwa-banner{ left: 8px; right: 8px; bottom: 86px; padding: 10px 12px; }
  .lf-pwa-banner__actions{ justify-content:space-between; }
}

/* Game */
.lf-game{
  overflow:hidden;
  background: radial-gradient(ellipse at top, #0b111a, #05070b 60%, #000);
}
.lf-stage{
  position:fixed;
  inset:0;
  padding-top: 56px;
  padding-bottom: 78px;
}
.lf-topbar{
  position:fixed;
  top:0; left:0; right:0;
  height:56px;
  padding: 8px 10px;
  display:grid;
  align-items:center;
  /* Left + Center + Right in one line without overlaps */
  grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 10px;
  justify-content:stretch;
  z-index:50;
  background:
    radial-gradient(1200px 80px at 50% 0%, rgba(214,162,59,0.25), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(6,9,12,0.88), rgba(0,0,0,0));
  border-bottom: 1px solid rgba(214,162,59,0.25);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  pointer-events:auto;
}

/* Compact header pills so the res-bar fits next to Coins/Profile */
.lf-topbar .lf-pill{
  padding: 7px 10px;
  font-size: 13px;
}
.lf-top-left, .lf-top-right{display:flex; gap:10px; align-items:center}
.lf-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(25,17,9,0.72), rgba(0,0,0,0.35));
  border: 1px solid rgba(214,162,59,0.20);
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 35px rgba(0,0,0,0.25);
  color: rgba(255,255,255,0.92);
  font-size: 14px;
  white-space: nowrap;
}
.lf-pill-btn{
  cursor:pointer;
  user-select:none;
}
.lf-avatar{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(214,162,59,0.6);
}
.lf-avatar-lg{
  width: 64px;
  height: 64px;
  border-radius: 999px;
  object-fit: cover;
  border: 1px solid rgba(214,162,59,0.6);
}
.lf-map-wrap{
  position:absolute;
  inset:0;
  overflow:hidden;
  touch-action:none;
}
.lf-map{
  position:absolute;
  top:50%; left:50%;
  transform: translate(-50%, -50%);
  max-width:none;
  user-select:none;
  pointer-events:none;
  filter: saturate(1.05) contrast(1.02);
}
.lf-map-canvas{
  position:absolute;
  inset:0;
}
.lf-place-hint{
  position:absolute;
  left:50%;
  bottom: 96px;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 10px 14px;
  border-radius: 999px;
  backdrop-filter: blur(10px);
  box-shadow: 0 15px 55px rgba(0,0,0,0.35);
}

.lf-bottombar{
  position:fixed;
  left:0; right:0; bottom:0;
  height: 78px;
  display:grid;
  align-items:center;
  grid-template-columns: 1fr auto 1fr;
  justify-content:stretch;
  padding: 10px;
  gap: 10px;
  z-index:45;
  background:
    radial-gradient(1200px 80px at 50% 100%, rgba(214,162,59,0.25), rgba(0,0,0,0)),
    linear-gradient(0deg, rgba(6,9,12,0.92), rgba(0,0,0,0));
  border-top: 1px solid rgba(214,162,59,0.22);
  box-shadow: 0 -10px 30px rgba(0,0,0,0.45);
}
.lf-buildmenu{
  display:flex;
  gap: 8px;
  padding: 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(25,17,9,0.72), rgba(0,0,0,0.35));
  border: 1px solid rgba(214,162,59,0.20);
  backdrop-filter: blur(10px);
}
.lf-iconbtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(214,162,59,0.20);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
}
.lf-iconbtn:hover{
  background: rgba(214,162,59,0.15);
  border-color: rgba(214,162,59,0.35);
}
.lf-favorites{
  flex: 1;
  max-width: 520px;
  min-width: 220px;
  padding: 8px 10px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(25,17,9,0.72), rgba(0,0,0,0.35));
  border: 1px solid rgba(214,162,59,0.20);
  backdrop-filter: blur(10px);
}
.lf-fav-title{
  font-size: 12px;
  color: rgba(255,255,255,0.65);
  margin-bottom: 6px;
}
.lf-fav-slots{
  display:flex;
  gap: 8px;
  overflow:auto;
  padding-bottom: 4px;
}
.lf-fav-item{
  min-width: 44px;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(214,162,59,0.20);
  background: rgba(255,255,255,0.06);
  cursor:pointer;
}
.lf-fav-item:hover{ background: rgba(214,162,59,0.15); border-color: rgba(214,162,59,0.35);}
.lf-quick{ min-width: 110px; display:flex; justify-content:flex-end; }

.lf-chat{
  position:fixed;
  left: 10px;
  bottom: 88px;
  width: 360px;
  max-width: calc(100vw - 20px);
  height: 420px;
  border-radius: 18px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(214,162,59,0.20);
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 70px rgba(0,0,0,0.45);
  z-index:46;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.lf-chat.collapsed{
  height: 56px;
}
.lf-chat-header{
  padding: 10px 12px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.lf-tabs .nav-link{
  color: rgba(255,255,255,0.75);
  background: transparent !important;
  border: none !important;
  padding: 8px 10px;
}
.lf-tabs .nav-link.active{
  color: rgba(255,255,255,0.95);
  border-bottom: 2px solid rgba(214,162,59,0.85) !important;
}
.lf-chat-body{
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.lf-chat-messages{
  padding: 10px;
  overflow:auto;
  height:100%;
}
.lf-msg{
  margin-bottom: 8px;
  line-height: 1.25;
}
.lf-msg .meta{
  font-size: 12px;
  color: rgba(255,255,255,0.60);
}
.lf-msg .txt{
  font-size: 14px;
  color: rgba(255,255,255,0.92);
  word-wrap: break-word;
}
.lf-chat-input{
  padding: 10px;
  display:flex;
  gap: 8px;
  border-top: 1px solid rgba(255,255,255,0.08);
  align-items:center;
}
.lf-emoji-wrap{ position:relative; }
.lf-emoji-picker{
  position:absolute;
  bottom: 46px;
  left:0;
  width: 260px;
  max-width: 70vw;
  background: rgba(10, 15, 22, 0.96);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: 8px;
  display:flex;
  flex-wrap:wrap;
  gap: 6px;
  box-shadow: var(--lf-shadow);
  z-index: 60;
}
.lf-emoji{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(214,162,59,0.20);
}
.lf-emoji:hover{ background: rgba(214,162,59,0.15); border-color: rgba(214,162,59,0.35); }

.lf-panel{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
}

.lf-badgeicon{
  width: 48px; height: 48px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(214,162,59,0.14);
  border: 1px solid rgba(214,162,59,0.28);
  color: rgba(255,255,255,0.92);
  font-size: 22px;
}

/* Preloader */
.lf-preloader{
  position:fixed;
  inset:0;
  z-index:200;
  background-size: cover;
  background-position: center;
  display:flex;
  align-items:center;
  justify-content:center;
}
.lf-preloader-overlay{
  position:absolute;
  inset:0;
  background: radial-gradient(ellipse at top, rgba(7,10,14,0.35), rgba(0,0,0,0.78));
  backdrop-filter: blur(3px);
}
.lf-preloader-card{
  position:relative;
  z-index:1;
  width: min(560px, calc(100vw - 24px));
  padding: 18px 18px 16px;
  border-radius: 22px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.10);
  backdrop-filter: blur(10px);
  box-shadow: 0 22px 90px rgba(0,0,0,0.55);
}
.lf-preloader-logo{
  width: 100%;
  max-height: 120px;
  object-fit: contain;
  display:block;
  margin-bottom: 10px;
  filter: drop-shadow(0 12px 40px rgba(0,0,0,0.6));
}
.lf-progress{
  height: 14px;
  background: rgba(255,255,255,0.10);
  border-radius: 999px;
  overflow:hidden;
}
.lf-progress .progress-bar{
  background: linear-gradient(90deg, rgba(214,162,59,0.95), rgba(242,208,122,0.95));
}

/* Build countdown label */
.lf-countdown{
  position:absolute;
  transform: translate(-50%, -120%);
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  font-size: 12px;
  white-space:nowrap;
}

/* Mobile tweaks */
@media (max-width: 576px){
  .lf-chat{ width: calc(100vw - 20px); }
  .lf-pill{ font-size: 12px; padding: 7px 10px; }
}


.lf-leveltag{ color: rgba(255,255,255,0.75); font-size: 13px; margin-left: 6px; }


/* Medieval-ish login tweaks */
.lf-auth h1, .lf-auth h2, .lf-auth h3, .lf-auth .modal-title{
  font-family: "Cinzel", serif;
  letter-spacing: .4px;
}
.lf-auth, .lf-auth .form-label, .lf-auth p, .lf-auth .small, .lf-auth .form-text{
  font-family: "Crimson Text", serif;
}
.lf-auth .lf-card{
  background: linear-gradient(180deg, rgba(10,15,22,0.80), rgba(10,15,22,0.65)), linear-gradient(180deg, var(--lf-parchment-1), var(--lf-parchment-2));
  border: 1px solid rgba(214,162,59,0.20);
  box-shadow: 0 22px 90px rgba(0,0,0,0.55);
  max-width: 520px;
  margin: 0 auto;
}
.lf-auth .lf-card .card-body{
  padding: 26px 26px;
}
.lf-auth .lf-logo{
  max-height: 150px;
}
.lf-auth .lf-input{
  font-size: 1.02rem;
}


/* Quest dock (left middle) */
.lf-questdock{
  position: fixed;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  pointer-events: auto;
}
.lf-questbtn{
  width: 64px;
  height: 64px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.10);
  background: linear-gradient(180deg, rgba(25,17,9,0.72), rgba(0,0,0,0.35));
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  padding: 8px;
}
.lf-questbtn:hover{
  border-color: rgba(214,162,59,0.35);
  background: rgba(214,162,59,0.12);
}
.lf-questicon{
  width: 44px;
  height: 44px;
  object-fit: contain;
  filter: drop-shadow(0 10px 25px rgba(0,0,0,0.5));
}
.lf-questtoast{
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(12, 40, 18, 0.85);
  border: 1px solid rgba(46, 204, 113, 0.35);
  color: rgba(216, 255, 228, 0.95);
  font-size: 13px;
  backdrop-filter: blur(10px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  white-space: nowrap;
}


/* Updates button (medieval-ish) */
.lf-updatesbtn{
  border: 1px solid rgba(214,162,59,0.35) !important;
  background: linear-gradient(180deg, rgba(214,162,59,0.20), rgba(0,0,0,0.18)) !important;
  color: rgba(255,244,220,0.95) !important;
  border-radius: 16px !important;
  padding: 8px 12px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  font-family: "Cinzel", serif;
  letter-spacing: .3px;
}
.lf-updatesbtn:hover{
  background: linear-gradient(180deg, rgba(214,162,59,0.28), rgba(0,0,0,0.18)) !important;
  border-color: rgba(214,162,59,0.55) !important;
}

/* Changelog */
.lf-changelog{
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lf-changelog-item{
  border: 1px solid rgba(214,162,59,0.20);
  background: rgba(0,0,0,0.28);
  border-radius: 16px;
  padding: 12px 14px;
}
.lf-changelog-ver{
  font-family: "Cinzel", serif;
  font-weight: 700;
  letter-spacing: .4px;
}
.lf-changelog-date{
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}
.lf-changelog-item ul{
  padding-left: 18px;
}
.lf-changelog-item li{
  margin: 6px 0;
}


/* Top-center resource bar */
.lf-topbar{ position: fixed; }
.lf-top-center{
  /* Keep it inside the grid cell (no absolute positioning => no overlap) */
  position: relative;
  display:flex;
  justify-content:center;
  align-items:center;
  pointer-events:auto;
  max-width: 100%;
  overflow: hidden;
}
.lf-resbar{
  display:flex;
  gap:6px;
  flex-wrap: nowrap;
  justify-content:center;
  padding: 6px 8px;
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(214,162,59,0.18), rgba(0,0,0,0.35));
  border: 1px solid rgba(214,162,59,0.25);
  box-shadow: 0 18px 60px rgba(0,0,0,0.35);
  backdrop-filter: blur(10px);
  /* If the viewport gets too small: keep one row and allow gentle horizontal scroll */
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
.lf-resbar::-webkit-scrollbar{ display:none; }
.lf-resitem{
  display:flex;
  align-items:center;
  gap:6px;
  padding: 4px 8px;
  border-radius: 12px;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(214,162,59,0.20);
  color: rgba(255,244,220,0.95);
  font-family: "Cinzel", serif;
  font-size: 12px;
  letter-spacing: .2px;
  white-space: nowrap;
}
.lf-resitem i{ opacity: .95; }
.lf-resname{ opacity: .88; display:none; }
.lf-resval{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  opacity: .95;
}
@media (max-width: 900px){
  .lf-top-center{ max-width: 100%; }
  .lf-resbar{ gap:5px; padding: 6px 6px; }
  .lf-resitem{ padding: 4px 7px; font-size: 11.5px; }
}

/* Coins button */
.lf-coinbtn{
  border: 1px solid rgba(214,162,59,0.35) !important;
  background: linear-gradient(180deg, rgba(214,162,59,0.18), rgba(0,0,0,0.18)) !important;
  color: rgba(255,244,220,0.95) !important;
  border-radius: 16px !important;
  padding: 7px 10px !important;
  box-shadow: 0 14px 40px rgba(0,0,0,0.35);
  font-family: "Cinzel", serif;
  letter-spacing: .3px;
}
.lf-coinbtn:hover{
  background: linear-gradient(180deg, rgba(214,162,59,0.26), rgba(0,0,0,0.18)) !important;
  border-color: rgba(214,162,59,0.55) !important;
}
.lf-shopitem{
  border: 1px solid rgba(214,162,59,0.20);
  background: rgba(0,0,0,0.25);
  border-radius: 16px;
  padding: 12px;
}


/* Typography */
.lf-title, .modal-title, h1,h2,h3,h4,h5{
  font-family: "Cinzel", ui-serif, Georgia, serif;
  letter-spacing: 0.5px;
}

.lf-top-left{justify-self:start}
.lf-top-center{justify-self:center}
.lf-top-right{justify-self:end}

.lf-resitem{
  position:relative;
}
.lf-resitem::after{
  content:"";
  position:absolute;
  right:-8px;
  top:10px;
  bottom:10px;
  width:1px;
  background: rgba(214,162,59,0.18);
}
.lf-resitem:last-child::after{display:none}


@keyframes lfBump{0%{transform:translateY(0)}30%{transform:translateY(-2px)}100%{transform:translateY(0)}}
@keyframes lfFlash{0%{filter:brightness(1)}40%{filter:brightness(1.25)}100%{filter:brightness(1)}}
.lf-bump{animation: lfBump .25s ease, lfFlash .35s ease;}


/* Panels: parchment + frame */
.lf-card, .lf-chat, .lf-buildmenu, .lf-pill{
  backdrop-filter: blur(10px);
}
.lf-card{
  border: 1px solid rgba(214,162,59,0.18);
  box-shadow: 0 18px 60px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Global atmosphere */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(214,162,59,0.06), rgba(0,0,0,0)),
    radial-gradient(900px 520px at 20% 80%, rgba(255,233,190,0.04), rgba(0,0,0,0)),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0.75));
  mix-blend-mode: screen;
  opacity: .9;
}
body::after{
  content:"";
  position:fixed; inset:-2px;
  pointer-events:none;
  background: radial-gradient(1200px 800px at 50% 45%, rgba(0,0,0,0), rgba(0,0,0,0.85));
  opacity: .85;
}

/* Map: framed like a table map */
.lf-map-wrap::before{
  content:"";
  position:absolute;
  inset:10px;
  border-radius: 22px;
  border: 1px solid rgba(214,162,59,0.26);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.35), 0 28px 80px rgba(0,0,0,0.55);
  pointer-events:none;
}
.lf-map-wrap::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(900px 520px at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,0.55));
}