/*
 * Metsaelu 5.2.3
 * Ühine metsaküla kujundus: püsiv päis, sisemine kerimine ja kuld-roheline UI.
 * Fail laaditakse viimasena, et vanad vaadete stiilid ei lõhuks ühist kesta.
 */
:root{
  --me523-bg:#020704;
  --me523-bg2:#06130b;
  --me523-panel:rgba(4,25,14,.94);
  --me523-panel2:rgba(9,39,21,.94);
  --me523-panel3:rgba(15,46,24,.92);
  --me523-gold:#d9b957;
  --me523-gold2:#f4dea0;
  --me523-lime:#91df37;
  --me523-lime2:#c9fa58;
  --me523-text:#f8f1d8;
  --me523-muted:#c5cfb8;
  --me523-line:rgba(211,174,70,.38);
  --me523-green-line:rgba(130,218,62,.34);
  --me523-shadow:0 18px 48px rgba(0,0,0,.46);
  --me523-head-h:106px;
}

html{
  width:100%;
  height:100%;
  min-width:0!important;
  overflow:hidden!important;
  background:var(--me523-bg)!important;
  color-scheme:dark;
}
body{
  width:100%;
  height:100%;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 50% -15%,rgba(116,176,54,.14),transparent 42%),
    linear-gradient(180deg,#041009,#010503 82%)!important;
  color:var(--me523-text)!important;
}
body:before{
  opacity:.22!important;
  background:
    linear-gradient(180deg,rgba(1,7,4,.5),rgba(1,7,4,.88)),
    url("bg.webp") center/cover no-repeat!important;
}

/* Rakendus ise kerib; brauseri välimine leht ei liigu. */
body>.wrap{
  position:relative!important;
  width:min(100%,1180px)!important;
  max-width:1180px!important;
  height:100dvh!important;
  min-height:0!important;
  margin:0 auto!important;
  padding:0 14px 34px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch;
  scrollbar-gutter:stable;
  scrollbar-color:#4d8c2d #07140c;
}
body>.wrap::-webkit-scrollbar{width:8px}
body>.wrap::-webkit-scrollbar-track{background:#07140c}
body>.wrap::-webkit-scrollbar-thumb{border-radius:20px;background:#4d8c2d}
body.pro-drawer-open>.wrap{overflow:hidden!important}

/* Peamine püsiv päis. */
body>.wrap>.top{
  position:sticky!important;
  inset:auto!important;
  top:0!important;
  z-index:1000!important;
  width:100%!important;
  height:auto!important;
  min-height:var(--me523-head-h)!important;
  margin:0 0 14px!important;
  padding:max(12px,env(safe-area-inset-top)) 14px 12px!important;
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) 58px!important;
  grid-template-areas:"menu brand notice"!important;
  align-items:center!important;
  gap:12px!important;
  overflow:visible!important;
  border:0!important;
  border-bottom:1px solid var(--me523-line)!important;
  border-radius:0 0 24px 24px!important;
  background:
    linear-gradient(90deg,rgba(2,12,7,.96),rgba(4,22,12,.88),rgba(2,12,7,.96)),
    url("img/hero-house.webp") center 57%/cover no-repeat!important;
  box-shadow:0 16px 38px rgba(0,0,0,.46),inset 0 -1px rgba(247,216,125,.08)!important;
  backdrop-filter:blur(16px)!important;
  animation:none!important;
  contain:layout paint;
}
body>.wrap>.top:after{
  content:"";
  position:absolute;
  inset:auto 12% 0;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--me523-lime),transparent);
  opacity:.65;
}
body>.wrap>.top .brand{
  grid-area:brand!important;
  min-width:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:12px!important;
  padding:0!important;
  border:0!important;
  text-align:left!important;
  text-decoration:none!important;
}
body>.wrap>.top .brand img{
  width:58px!important;
  height:58px!important;
  flex:0 0 58px!important;
  border:1px solid rgba(245,207,100,.58)!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#9be147,#376f1c)!important;
  box-shadow:0 0 0 4px rgba(5,18,9,.84),0 0 24px rgba(139,227,65,.3)!important;
}
body>.wrap>.top .brand-text{
  min-width:0!important;
  display:block!important;
  line-height:1!important;
}
body>.wrap>.top .brand-text strong{
  display:block!important;
  color:var(--me523-gold2)!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(28px,5vw,42px)!important;
  font-weight:900!important;
  letter-spacing:.035em!important;
  text-transform:uppercase!important;
  text-shadow:0 3px 0 #221505,0 0 18px rgba(235,195,87,.15)!important;
}
body>.wrap>.top .brand-text>span{
  display:block!important;
  margin:5px 0 0!important;
  color:var(--me523-lime)!important;
  font-size:10px!important;
  font-weight:1000!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
}
body>.wrap>.top .mobile-menu-toggle,
body>.wrap>.top .me0523-notice{
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  min-height:56px!important;
  margin:0!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(225,185,70,.68)!important;
  border-radius:17px!important;
  background:linear-gradient(180deg,rgba(26,34,18,.98),rgba(7,12,7,.98))!important;
  color:#f5d979!important;
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.42),0 10px 24px rgba(0,0,0,.3)!important;
  text-decoration:none!important;
  font-size:27px!important;
  line-height:1!important;
}
body>.wrap>.top .mobile-menu-toggle{grid-area:menu!important}
body>.wrap>.top .me0523-notice{grid-area:notice!important;position:relative}
body>.wrap>.top .me0523-notice b{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:23px;
  height:23px;
  padding:0 5px;
  display:grid;
  place-items:center;
  border:2px solid #081008;
  border-radius:999px;
  background:#b83222;
  color:#fff;
  font:900 11px/1 system-ui,sans-serif;
}
body>.wrap>.top .sound-toggle{display:none!important}
body>.wrap>.top>.nav{display:none!important}

/* Töölaua põhiala. */
body>.wrap>.page-main{
  position:relative!important;
  width:100%!important;
  max-width:none!important;
  min-height:calc(100dvh - var(--me523-head-h) - 34px)!important;
  margin:0!important;
  padding:0!important;
  overflow:visible!important;
}
body>.wrap>.page-main:before{
  content:"";
  position:fixed;
  inset:var(--me523-head-h) 0 0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,rgba(2,10,6,.72),rgba(1,6,3,.91)),
    url("bg.webp") center/cover no-repeat;
}

/* Korduvate leheosade ühtne välimus. */
body .card,
body .mode-card,
body .resource-card,
body .building-card,
body .me0295-mod-page,
body .me0410-card,
body .me0415-needs,
body .me0504-home,
body .me0469-council,
body .me0234-board,
body .me0249-online,
body .info-strip,
body .daily-card,
body .mission-panel{
  border:1px solid var(--me523-green-line)!important;
  border-radius:22px!important;
  background:
    radial-gradient(circle at 92% 0,rgba(107,181,52,.08),transparent 32%),
    linear-gradient(150deg,var(--me523-panel2),var(--me523-panel))!important;
  color:var(--me523-text)!important;
  box-shadow:var(--me523-shadow),inset 0 1px rgba(255,255,255,.035)!important;
}
body h1,body h2,body h3,
body .card h1,body .card h2,body .card h3{
  color:var(--me523-gold2);
  text-wrap:balance;
}
body h1,body h2,
body .me0470-home h1,body .me0470-home h2{
  font-family:Georgia,"Times New Roman",serif!important;
}
body p,body label,body small{color:var(--me523-muted)}
body input,
body select,
body textarea{
  width:100%;
  max-width:100%;
  min-height:48px;
  border:1px solid rgba(210,176,77,.3)!important;
  border-radius:14px!important;
  background:rgba(1,9,5,.86)!important;
  color:#fff9e5!important;
  box-shadow:inset 0 1px 8px rgba(0,0,0,.28)!important;
}
body textarea{min-height:118px}
body .btn,
body a.btn,
body button:not(.mobile-menu-toggle):not(.pro-menu-close){
  min-height:46px;
  border:1px solid rgba(217,184,76,.42)!important;
  border-radius:14px!important;
  background:linear-gradient(180deg,#4d7d22,#234914)!important;
  color:#fff3c9!important;
  font-weight:900!important;
  box-shadow:inset 0 1px rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.26)!important;
}
body .btn.active,
body button[type="submit"],
body input[type="submit"]{
  background:linear-gradient(135deg,var(--me523-lime2),#39cf69)!important;
  border-color:#b9ee50!important;
  color:#061008!important;
}
body table{
  width:100%;
  border-collapse:separate;
  border-spacing:0 7px;
}
body th{color:var(--me523-gold);text-align:left}
body td{
  background:rgba(10,38,21,.86);
  border-top:1px solid rgba(133,205,70,.17);
  border-bottom:1px solid rgba(133,205,70,.17);
}
body td:first-child{border-left:1px solid rgba(133,205,70,.17);border-radius:12px 0 0 12px}
body td:last-child{border-right:1px solid rgba(133,205,70,.17);border-radius:0 12px 12px 0}

/* Sinu loodud uus avaleht jääb peamiseks, vana topeltriba eemaldatakse. */
body.home-0471 .me0470-home{
  width:min(100%,1080px)!important;
  max-width:1080px!important;
  padding:0 0 24px!important;
  background:transparent!important;
}
body.home-0471 .me0470-brandbar{display:none!important}
body.home-0471 .me0470-player{
  margin-top:2px!important;
  padding:16px 20px!important;
  border-color:var(--me523-line)!important;
  border-radius:24px!important;
  background:
    linear-gradient(90deg,rgba(5,24,13,.97),rgba(11,40,20,.94)),
    url("img/hero-house.webp") center/cover!important;
}
body.home-0471 .me0470-player-name b{color:var(--me523-gold2)!important;font-size:25px!important}
body.home-0471 .me0470-top-resource>span{filter:drop-shadow(0 3px 4px rgba(0,0,0,.45))}
body.home-0471 .me0470-top-resource small{color:#a9d65a!important}
body.home-0471 .me0470-village-hero{
  min-height:430px!important;
  border-color:var(--me523-line)!important;
  border-radius:26px!important;
  box-shadow:var(--me523-shadow)!important;
}
body.home-0471 .me0470-village-hero>img{
  opacity:.82!important;
  filter:saturate(.9) brightness(.68) contrast(1.08)!important;
}
body.home-0471 .me0470-village-hero>div{
  border-color:rgba(230,194,91,.38)!important;
  background:linear-gradient(145deg,rgba(3,15,8,.88),rgba(3,11,7,.76))!important;
}
body.home-0471 .me0470-roundnav,
body.home-0471 .me0470-section,
body.home-0471 .me0470-statgrid article,
body.home-0471 .me0470-events>a,
body.home-0471 .me0470-activitygrid>a{
  border-color:var(--me523-line)!important;
  background:linear-gradient(150deg,rgba(10,31,17,.98),rgba(3,12,7,.99))!important;
}
body.home-0471 .me0470-roundnav i{
  border-color:rgba(224,186,76,.7)!important;
  background:radial-gradient(circle,#2b4e1c,#0a1109 72%)!important;
}
body.home-0471 .me0470-section h2,
body.home-0471 .me0410-section-title h2{color:var(--me523-gold2)!important}
body.home-0471 .me0470-events>a.red{background:radial-gradient(circle at 50% 35%,#3c160e,#100604 75%)!important}
body.home-0471 .me0470-events>a.green{background:radial-gradient(circle at 50% 35%,#173c19,#061007 75%)!important}
body.home-0471 .me0470-events>a.blue{background:radial-gradient(circle at 50% 35%,#102b41,#050b0f 75%)!important}
body.home-0471 .me0470-events>a.purple{background:radial-gradient(circle at 50% 35%,#2d163b,#0b0610 75%)!important}
body.home-0471 .me0470-dock{
  bottom:10px!important;
  border-color:rgba(216,181,72,.45)!important;
  background:rgba(7,12,7,.97)!important;
  box-shadow:0 -15px 34px rgba(0,0,0,.48)!important;
}

/* Menüülaegas – töötab ka suurel ekraanil. */
body.me0523-menu-open>.wrap>.top>.nav{
  position:fixed!important;
  z-index:2100!important;
  left:50%!important;
  top:calc(var(--me523-head-h) + 12px)!important;
  width:min(760px,calc(100vw - 28px))!important;
  max-height:calc(100dvh - var(--me523-head-h) - 28px)!important;
  padding:14px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:9px!important;
  overflow:auto!important;
  transform:translateX(-50%)!important;
  border:1px solid var(--me523-line)!important;
  border-radius:22px!important;
  background:rgba(2,14,8,.985)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.74)!important;
}
body.me0523-menu-open>.wrap>.top>.nav .btn{
  width:100%!important;
  min-height:48px!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  padding:11px 13px!important;
}

body>.wrap>.info-strip{
  margin:18px 0 0!important;
  padding:14px!important;
}
body>.wrap>.footer{
  margin:14px 0 0!important;
  border:1px solid var(--me523-line)!important;
  border-radius:20px!important;
  background:rgba(4,16,9,.93)!important;
  color:#d8c88f!important;
}
body>.wrap>.footer a{color:var(--me523-gold2)!important}

@media (max-width:760px){
  :root{--me523-head-h:88px}
  body>.wrap{
    width:100%!important;
    padding:0 8px calc(24px + env(safe-area-inset-bottom))!important;
  }
  body>.wrap>.top{
    min-height:88px!important;
    grid-template-columns:48px minmax(0,1fr) 48px!important;
    gap:7px!important;
    padding:max(9px,env(safe-area-inset-top)) 7px 9px!important;
    border-radius:0 0 19px 19px!important;
  }
  body>.wrap>.top .brand{gap:8px!important}
  body>.wrap>.top .brand img{
    width:45px!important;
    height:45px!important;
    flex-basis:45px!important;
  }
  body>.wrap>.top .brand-text strong{
    font-size:clamp(22px,7vw,31px)!important;
    letter-spacing:.015em!important;
  }
  body>.wrap>.top .brand-text>span{
    margin-top:4px!important;
    font-size:7px!important;
    letter-spacing:.12em!important;
  }
  body>.wrap>.top .mobile-menu-toggle,
  body>.wrap>.top .me0523-notice{
    width:46px!important;
    height:46px!important;
    min-width:46px!important;
    min-height:46px!important;
    border-radius:14px!important;
    font-size:22px!important;
  }
  body>.wrap>.page-main{min-height:calc(100dvh - 110px)!important}
  body .card,body .mode-card,body .resource-card,body .building-card{
    margin:10px 0!important;
    padding:16px!important;
    border-radius:18px!important;
  }
  body h1{font-size:clamp(29px,9vw,42px)!important}
  body h2{font-size:clamp(23px,7vw,32px)!important}
  body.home-0471 .me0470-player{
    margin-top:0!important;
    padding:12px!important;
    border-radius:18px!important;
  }
  body.home-0471 .me0470-village-hero{
    min-height:385px!important;
    border-radius:20px!important;
  }
  body.home-0471 .me0470-village-hero>div{
    left:10px!important;
    right:10px!important;
    bottom:28px!important;
    width:auto!important;
    padding:16px!important;
  }
  body.home-0471 .me0470-village-hero h1{font-size:38px!important}
  body.home-0471 .me0470-roundnav{
    grid-template-columns:repeat(6,72px)!important;
    padding:9px!important;
    overflow-x:auto!important;
  }
  body.home-0471 .me0470-statgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.home-0471 .me0470-statgrid article:first-child{grid-column:1/-1}
  body.home-0471 .me0470-activitygrid,
  body.home-0471 .me0470-events{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.me0523-menu-open>.wrap>.top>.nav{
    top:94px!important;
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    max-height:calc(100dvh - 106px)!important;
  }
  body>.wrap>.info-strip{grid-template-columns:1fr!important}
}

@media (max-width:390px){
  body>.wrap>.top .brand img{display:none!important}
  body>.wrap>.top .brand-text{text-align:center!important}
  body>.wrap>.top .brand-text strong{font-size:25px!important}
  body.home-0471 .me0470-statgrid{grid-template-columns:1fr!important}
  body.home-0471 .me0470-statgrid article:first-child{grid-column:auto}
  body.me0523-menu-open>.wrap>.top>.nav{grid-template-columns:1fr!important}
}

@media (min-width:1100px){
  body>.wrap{max-width:1320px!important}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  body *{animation:none!important;transition:none!important}
}