/* Clash of Farming 10.12.0 — Site Reality
 * Shared presentation layer for public landing/advertising portal and the
 * authenticated overview. No raster background art: terrain and structures
 * are built from CSS/SVG layers.
 */

:root {
  --sr-ink:#f4edda;
  --sr-muted:#9fb2a7;
  --sr-soil:#736043;
  --sr-soil-hi:#9a8056;
  --sr-grass:#263f29;
  --sr-grass-hi:#415c36;
  --sr-water:#376f70;
  --sr-road:#9a8058;
  --sr-line:rgba(225,205,153,.18);
  --sr-gold:#e2c06b;
  --sr-mint:#6ec9a4;
}

/* -------------------------------------------------------------------------
   Public portal — terrain-led presentation, not a painted backdrop.
   ------------------------------------------------------------------------- */
body.landing-page.frontier-portal {
  background:
    radial-gradient(circle at 18% 4%, rgba(110,201,164,.11), transparent 29rem),
    radial-gradient(circle at 82% 8%, rgba(226,192,107,.08), transparent 27rem),
    linear-gradient(180deg,#06110d 0%,#081913 48%,#04100c 100%);
}
body.landing-page.frontier-portal::before {
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    repeating-linear-gradient(115deg, transparent 0 31px, rgba(232,217,174,.028) 31px 32px),
    repeating-linear-gradient(25deg, transparent 0 47px, rgba(104,153,111,.022) 47px 48px);
  mix-blend-mode:screen;
}
.portal-topbar {
  border-bottom-color:rgba(226,192,107,.17);
  background:rgba(5,17,12,.91);
  box-shadow:0 14px 38px rgba(0,0,0,.20);
}
.portal-brand-mark {
  border-radius:10px 3px 10px 3px;
  background:linear-gradient(145deg,rgba(226,192,107,.16),rgba(110,201,164,.045));
  box-shadow:inset 0 0 20px rgba(226,192,107,.06),0 8px 22px rgba(0,0,0,.18);
}
.portal-copy h1 { text-wrap:balance; }
.portal-lead { max-width:760px; }
.portal-proof span {
  border-color:rgba(211,198,155,.18);
  background:rgba(8,28,20,.74);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
.portal-auth-card {
  border-color:rgba(226,192,107,.29);
  background:
    linear-gradient(160deg,rgba(17,42,30,.96),rgba(5,18,13,.98)),
    repeating-linear-gradient(90deg,transparent 0 17px,rgba(255,255,255,.02) 17px 18px);
}

.portal-stage-wrap { position:relative; }
.portal-stage-caption h2 { text-wrap:balance; }

.portal-reality-stage {
  position:relative;
  isolation:isolate;
  height:clamp(390px,48vw,590px);
  overflow:hidden;
  border:1px solid rgba(210,192,145,.24);
  border-radius:22px 7px 22px 7px;
  background:#101d15;
  box-shadow:0 28px 72px rgba(0,0,0,.34),inset 0 1px rgba(255,255,255,.035);
}
.portal-reality-stage::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(ellipse at 78% 16%,rgba(237,211,138,.16),transparent 30%),
    linear-gradient(180deg,rgba(10,25,19,.04),rgba(2,9,7,.34));
}
.portal-reality-stage::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:18;
  pointer-events:none;
  box-shadow:inset 0 0 70px rgba(1,8,5,.46);
}
.promo-horizon {
  position:absolute;
  z-index:0;
  inset:0 0 61%;
  overflow:hidden;
  background:linear-gradient(180deg,#18362d 0%,#2f5040 72%,#455f45 100%);
}
.promo-horizon::before,.promo-horizon::after {
  content:"";
  position:absolute;
  left:-7%; right:30%; bottom:-23%; height:90%;
  background:#1d342a;
  clip-path:polygon(0 100%,0 74%,10% 48%,18% 67%,30% 30%,41% 64%,52% 43%,63% 72%,75% 34%,86% 68%,100% 48%,100% 100%);
  opacity:.88;
}
.promo-horizon::after {
  left:32%; right:-8%; bottom:-35%; height:105%;
  background:#294334;
  transform:scaleX(-1);
  opacity:.72;
}
.promo-terrain {
  position:absolute;
  z-index:0;
  inset:30% -8% -16%;
  transform:perspective(820px) rotateX(52deg) scale(1.12);
  transform-origin:center bottom;
  border-radius:42% 42% 0 0/10% 10% 0 0;
  background:
    radial-gradient(ellipse at 22% 32%,rgba(87,112,54,.88) 0 11%,transparent 12%),
    radial-gradient(ellipse at 69% 40%,rgba(96,114,59,.66) 0 13%,transparent 14%),
    radial-gradient(ellipse at 48% 65%,rgba(112,90,55,.30) 0 12%,transparent 13%),
    repeating-linear-gradient(103deg,rgba(217,199,132,.03) 0 1px,transparent 1px 31px),
    linear-gradient(145deg,#385532 0%,#29442d 47%,#213b29 100%);
  box-shadow:inset 0 22px 50px rgba(134,164,91,.07);
}
.promo-river {
  position:absolute; z-index:2; width:70%; height:27%; left:4%; top:57%;
  border-radius:47% 53% 55% 45%/58% 44% 56% 42%;
  transform:rotate(-9deg);
  background:linear-gradient(175deg,rgba(127,193,187,.75),#427b79 44%,#214f52 100%);
  border:3px solid rgba(143,169,112,.24);
  box-shadow:inset 0 4px 10px rgba(213,240,220,.14),0 9px 18px rgba(0,0,0,.14);
}
.promo-river::after {
  content:""; position:absolute; inset:19% 8%; border-radius:inherit;
  border-top:2px solid rgba(216,239,224,.13); opacity:.9;
}
.promo-road {
  position:absolute; z-index:4; height:14px; border-radius:999px;
  background:linear-gradient(180deg,#b39a6b,#7f6847 60%,#66523b);
  box-shadow:inset 0 2px rgba(246,224,167,.16),0 4px 8px rgba(0,0,0,.18);
}
.promo-road.main { width:55%; left:22%; top:66%; transform:rotate(9deg); }
.promo-road.branch { width:32%; left:55%; top:49%; transform:rotate(-38deg); height:10px; }
.promo-field {
  position:absolute; z-index:3; width:18%; height:15%;
  border:2px solid rgba(192,166,83,.22); border-radius:44% 36% 40% 42%/18% 22% 18% 24%;
  background:repeating-linear-gradient(93deg,#806f30 0 3px,#54632f 3px 8px);
  box-shadow:0 7px 14px rgba(0,0,0,.13);
}
.promo-field.a { left:9%; top:48%; transform:rotate(-9deg); }
.promo-field.b { right:8%; top:66%; transform:rotate(-12deg); background:repeating-linear-gradient(89deg,#617038 0 3px,#3d5b35 3px 8px); }
.promo-forest {
  position:absolute; z-index:5; width:26%; height:24%; pointer-events:none;
  background:
    radial-gradient(ellipse at 12% 78%,#254a32 0 12%,transparent 13%),
    radial-gradient(ellipse at 29% 55%,#31573a 0 14%,transparent 15%),
    radial-gradient(ellipse at 46% 72%,#1d442f 0 13%,transparent 14%),
    radial-gradient(ellipse at 62% 47%,#345c3d 0 15%,transparent 16%),
    radial-gradient(ellipse at 78% 72%,#234b33 0 13%,transparent 14%),
    radial-gradient(ellipse at 93% 53%,#31573b 0 14%,transparent 15%);
  filter:drop-shadow(0 9px 7px rgba(0,0,0,.22));
}
.promo-forest.west { left:1%; top:27%; }
.promo-forest.east { right:0; top:34%; transform:scale(.84) rotate(8deg); }

.portal-building {
  position:absolute; z-index:10; width:clamp(90px,13vw,170px); aspect-ratio:200/175;
  left:var(--px); top:var(--py); transform:translate(-50%,-72%) scale(var(--ps,1));
  transform-origin:center bottom;
  filter:drop-shadow(0 13px 12px rgba(0,0,0,.26));
}
.portal-building svg { width:100%; height:100%; display:block; overflow:visible; }
.portal-building[data-building-key="farmhouse"] { z-index:12; }
.portal-building[data-building-key="wind_turbine"] { z-index:11; }
.portal-world-site {
  position:absolute; z-index:13; right:5%; top:18%; max-width:260px;
  padding:10px 12px; border:1px solid rgba(226,192,107,.25); border-radius:12px 3px 12px 3px;
  background:rgba(6,20,14,.82); backdrop-filter:blur(8px);
  box-shadow:0 12px 28px rgba(0,0,0,.22);
}
.portal-world-site small { display:block; color:var(--sr-mint); font-size:.6rem; font-weight:950; letter-spacing:.13em; text-transform:uppercase; }
.portal-world-site strong { display:block; margin-top:3px; font-family:Georgia,serif; font-size:.95rem; color:#f4e8c9; }
.portal-world-site span { display:block; margin-top:4px; color:#9db2a5; font-size:.68rem; line-height:1.35; }
.promo-pest {
  position:absolute; z-index:9; left:70%; top:73%; width:60px; height:38px; transform:rotate(-7deg);
}
.promo-pest::before {
  content:""; position:absolute; left:13px; top:8px; width:29px; height:18px; border-radius:52% 48% 45% 55%;
  background:linear-gradient(90deg,#3b2b23,#5a3d2d 55%,#2e251f); border:2px solid #211a16;
  box-shadow:-16px 11px 0 -5px #40352c,18px 8px 0 -7px #40352c,0 10px 10px rgba(0,0,0,.28);
}
.promo-pest::after {
  content:""; position:absolute; left:40px; top:10px; width:13px; height:12px; border-radius:50%; background:#4b372b; border:2px solid #241b17;
}
.promo-pest i,.promo-pest b { position:absolute; display:block; background:#33251f; transform-origin:left center; }
.promo-pest i { left:17px; top:28px; width:20px; height:2px; transform:rotate(24deg); box-shadow:5px -18px 0 #33251f; }
.promo-pest b { left:7px; top:20px; width:14px; height:2px; transform:rotate(-22deg); }
.promo-pest-label {
  position:absolute; z-index:14; left:67%; top:80%; color:#d6c0a1; font-size:.62rem; font-weight:850;
  text-shadow:0 2px 5px rgba(0,0,0,.6);
}
.stage-label.reality {
  position:absolute; z-index:15; left:18px; bottom:16px; padding:8px 11px;
  border:1px solid rgba(225,205,153,.22); border-radius:999px;
  background:rgba(5,18,13,.76); color:#c7d5ca; font-size:.67rem; font-weight:850;
}

.portal-feature-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
.portal-feature-card { min-height:250px; }
.portal-feature-card .portal-feature-icon { font-size:1.35rem; }
.portal-feature-card .portal-feature-icon svg { width:26px; height:26px; }
.portal-feature-card h3 { margin-top:24px; }
.portal-feature-card p { color:#9aafa1; }
.portal-highlight-copy,.portal-tactical-board { background:linear-gradient(155deg,rgba(15,43,31,.82),rgba(5,18,13,.91)); }
.portal-final-card {
  background:
    radial-gradient(circle at 78% 26%,rgba(226,192,107,.09),transparent 25rem),
    linear-gradient(140deg,#103124,#071912);
}
.portal-copyright { display:grid; gap:3px; }
.portal-copyright .author-credit { color:#c7b789; font-weight:850; letter-spacing:.02em; }
.portal-copyright .author-credit b { color:#e5cf95; }

/* -------------------------------------------------------------------------
   Authenticated overview — living command dashboard and real mini village.
   ------------------------------------------------------------------------- */
body.page-overview .content {
  position:relative;
  isolation:isolate;
}
body.page-overview .content::before {
  content:"";
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(circle at 17% 2%,rgba(100,151,101,.07),transparent 32rem),
    linear-gradient(180deg,rgba(14,37,26,.18),transparent 32rem);
}
body.page-overview .page-heading {
  border-color:rgba(217,193,132,.18)!important;
  background:
    radial-gradient(circle at 84% 18%,rgba(226,192,107,.08),transparent 24rem),
    linear-gradient(145deg,rgba(12,34,25,.96),rgba(5,18,13,.94))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.22),inset 0 1px rgba(255,255,255,.035)!important;
}
body.page-overview .page-heading::after {
  content:"LIVE TERRAIN · REAL BUILDINGS";
  position:absolute; right:18px; bottom:11px;
  color:rgba(213,197,150,.45); font-size:.51rem; font-weight:950; letter-spacing:.14em;
}
body.page-overview .score-box {
  border:1px solid rgba(226,192,107,.22);
  background:linear-gradient(155deg,#273b2d,#101f17);
  color:#f3e7c8;
}
body.page-overview .stat-card {
  border-color:rgba(199,185,146,.15)!important;
  background:linear-gradient(155deg,rgba(16,37,28,.95),rgba(7,22,16,.96))!important;
  box-shadow:0 10px 26px rgba(0,0,0,.16)!important;
}
body.page-overview .stat-card>span {
  background:linear-gradient(145deg,rgba(119,156,104,.12),rgba(226,192,107,.06))!important;
  border:1px solid rgba(196,184,148,.13);
}
body.page-overview .overview-grid>.panel {
  border-color:rgba(201,185,143,.16)!important;
  background:linear-gradient(155deg,rgba(13,34,25,.95),rgba(6,20,14,.97))!important;
}
body.page-overview .overview-grid>.panel:first-child { overflow:hidden; }

body.page-overview .farm-map.overview-reality-map {
  position:relative;
  display:block;
  min-height:clamp(430px,43vw,570px);
  overflow:hidden;
  padding:0;
  border:1px solid rgba(172,157,113,.22);
  border-radius:18px 5px 18px 5px;
  background:
    radial-gradient(ellipse at 20% 24%,rgba(105,129,61,.34) 0 12%,transparent 13%),
    radial-gradient(ellipse at 74% 63%,rgba(110,92,54,.25) 0 16%,transparent 17%),
    repeating-linear-gradient(106deg,rgba(230,212,152,.022) 0 1px,transparent 1px 29px),
    linear-gradient(145deg,#365031,#263e2a 48%,#1d3526);
  box-shadow:inset 0 0 55px rgba(5,17,11,.34),0 14px 30px rgba(0,0,0,.16);
}
body.page-overview .farm-map.overview-reality-map::before {
  content:"";
  position:absolute; z-index:1; width:75%; height:20%; left:11%; top:48%;
  border-radius:999px; transform:rotate(7deg);
  background:linear-gradient(180deg,#ad9567,#786143 72%,#5e4d38);
  box-shadow:inset 0 2px rgba(235,215,163,.13),0 5px 10px rgba(0,0,0,.14);
}
body.page-overview .farm-map.overview-reality-map::after {
  content:"";
  position:absolute; z-index:0; width:38%; height:30%; right:-3%; bottom:-5%;
  border-radius:55% 45% 0 0/72% 65% 0 0;
  background:radial-gradient(ellipse at 35% 46%,#3b7053 0 12%,transparent 13%),radial-gradient(ellipse at 60% 38%,#2f6145 0 15%,transparent 16%),radial-gradient(ellipse at 79% 61%,#254f39 0 15%,transparent 16%);
  opacity:.88;
}
.overview-map-boundary {
  position:absolute; z-index:2; inset:7%; pointer-events:none;
  border:2px dashed rgba(209,188,124,.25);
  clip-path:polygon(5% 14%,82% 5%,96% 34%,90% 86%,20% 96%,4% 71%);
}
.overview-map-field {
  position:absolute; z-index:1; left:4%; top:20%; width:25%; height:20%;
  border-radius:34% 16% 32% 18%; transform:rotate(-8deg);
  background:repeating-linear-gradient(91deg,#806f32 0 3px,#526333 3px 8px);
  border:2px solid rgba(201,172,82,.19);
}
.overview-map-stream {
  position:absolute; z-index:1; left:2%; bottom:3%; width:47%; height:15%; transform:rotate(-8deg);
  border-radius:70% 32% 60% 41%; background:linear-gradient(180deg,#5a9994,#346c6d 68%,#225055);
  border:3px solid rgba(109,145,92,.22); opacity:.78;
}
.overview-building {
  position:absolute; z-index:5; width:clamp(82px,12vw,150px); aspect-ratio:200/175;
  left:var(--mx); top:var(--my); transform:translate(-50%,-68%) scale(var(--ms,1));
  transform-origin:center bottom; filter:drop-shadow(0 11px 9px rgba(0,0,0,.24));
}
.overview-building.is-locked { opacity:.38; filter:grayscale(.75) drop-shadow(0 8px 7px rgba(0,0,0,.20)); }
.overview-building-art { position:absolute; inset:0; display:block; }
.overview-building-art svg { width:100%; height:100%; display:block; overflow:visible; }
.overview-building-label {
  position:absolute; left:50%; bottom:-7px; transform:translateX(-50%); min-width:max-content;
  display:flex; align-items:center; gap:5px; padding:4px 7px;
  border:1px solid rgba(218,200,151,.18); border-radius:999px;
  background:rgba(5,17,12,.82); color:#e8ddc1; box-shadow:0 5px 12px rgba(0,0,0,.18);
}
.overview-building-label small { color:#c2d0c6; font-size:.55rem; font-weight:850; }
.overview-building-label b { color:#d9bd72; font-size:.52rem; }
.overview-building.is-locked .overview-building-label small { color:#9b9f96; }

.overview-fortification-strip {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:10px;
}
.overview-fortification {
  display:flex; align-items:center; gap:9px; min-width:0; padding:9px 10px;
  border:1px solid rgba(195,181,143,.14); border-radius:10px 3px 10px 3px;
  background:rgba(8,24,17,.72);
}
.overview-fortification>span { width:32px; height:32px; display:grid; place-items:center; border-radius:8px; background:rgba(226,192,107,.08); font-size:1.05rem; }
.overview-fortification div { min-width:0; display:grid; gap:1px; }
.overview-fortification small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#a9bbb0; font-size:.58rem; }
.overview-fortification strong { color:#ead7a8; font-size:.68rem; }

.footer .author-credit,.game-author-credit { color:#c8b988; font-weight:800; }
.footer .author-credit b,.game-author-credit b { color:#e1ca89; }

@media (max-width:1100px) {
  .portal-feature-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:760px) {
  .portal-reality-stage { height:365px; }
  .portal-world-site { right:10px; top:12px; max-width:205px; }
  .portal-building { width:105px; }
  .portal-building[data-building-key="wind_turbine"] { width:92px; }
  .promo-field.b,.promo-forest.east { opacity:.58; }
  .stage-label.reality { left:10px; bottom:10px; max-width:74%; }
  .portal-feature-grid { grid-template-columns:1fr; }
  body.page-overview .farm-map.overview-reality-map { min-height:420px; }
  .overview-building { width:92px; }
  .overview-fortification-strip { grid-template-columns:1fr; }
  body.page-overview .page-heading::after { display:none; }
}
@media (max-width:480px) {
  .portal-reality-stage { height:330px; }
  .portal-building { width:88px; }
  .portal-world-site span { display:none; }
  .promo-pest { transform:scale(.8) rotate(-7deg); transform-origin:center; }
  body.page-overview .farm-map.overview-reality-map { min-height:390px; }
  .overview-building { width:78px; }
  .overview-building-label small { max-width:72px; overflow:hidden; text-overflow:ellipsis; }
}
@media (prefers-reduced-motion:reduce) {
  .portal-reality-stage *, .overview-reality-map * { animation:none!important; transition:none!important; }
}

/* 10.12 overview must not fall back to the legacy village raster backdrop. */
body.game-page.page-overview {
  background-image:none!important;
  background-color:#06130e!important;
  background:
    radial-gradient(circle at 16% 5%,rgba(76,125,82,.12),transparent 34rem),
    radial-gradient(circle at 82% 10%,rgba(189,158,83,.07),transparent 30rem),
    linear-gradient(180deg,#081812 0%,#06130e 58%,#04100c 100%)!important;
  background-attachment:scroll!important;
}
body.game-page.page-overview::before {
  background-image:
    repeating-linear-gradient(116deg,transparent 0 39px,rgba(210,196,150,.018) 39px 40px),
    radial-gradient(ellipse at 20% 15%,rgba(82,126,76,.08),transparent 38%)!important;
  opacity:.65!important;
  filter:none!important;
  transform:none!important;
}