/* Kudoken Meadows — the zone behind the mall.
   Zone shell only. Attractions inside bring their own styling. */

.meadows{--grass:#3E5B3A;--grass-lo:#22341F;--fence:#6B5436;--sign:#C9A227;
  --lamp:#FFD79A;--ink:#EAF0E6;--ease:cubic-bezier(.22,1,.36,1)}

/* ---------- the way in: back of the mall ---------- */
.backdoor{position:relative;min-height:54vh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:64px 20px 48px;
  background:linear-gradient(180deg,#07090C 0%,#0C1116 55%,#141A16 100%);overflow:hidden}
.backdoor::before{content:"";position:absolute;left:50%;top:0;width:340px;height:200px;
  margin-left:-170px;
  background:radial-gradient(ellipse at 50% 0,rgba(255,215,154,.22),transparent 70%)}
.backdoor::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;
  background:linear-gradient(180deg,transparent,var(--grass-lo))}
.lamp{position:relative;width:2px;height:64px;background:rgba(255,215,154,.3)}
.lamp::after{content:"";position:absolute;left:50%;top:-6px;width:15px;height:15px;
  margin-left:-7.5px;border-radius:50%;background:var(--lamp);
  box-shadow:0 0 18px var(--lamp),0 0 62px rgba(255,215,154,.5);
  animation:flick 7s steps(1,end) infinite}
@keyframes flick{0%,91%,95%{opacity:1}92%,97%{opacity:.45}}
.backdoor__eyebrow{position:relative;margin-top:26px;font-size:.6rem;letter-spacing:.34em;
  text-transform:uppercase;color:rgba(234,240,230,.42)}
.backdoor__line{position:relative;margin:14px auto 0;max-width:420px;
  font-size:.95rem;color:rgba(234,240,230,.7)}

/* ---------- gate ---------- */
.gate{position:relative;padding:66px 20px 56px;text-align:center;
  background:linear-gradient(180deg,var(--grass-lo),var(--grass) 72%,#2C4428)}
.gate__arch{display:inline-block;padding:22px 34px;position:relative;
  border:2px solid var(--sign);border-bottom:0;
  border-radius:180px 180px 0 0/70px 70px 0 0;
  box-shadow:0 0 42px rgba(201,162,39,.2),inset 0 0 34px rgba(201,162,39,.09)}
.gate__small{font-size:.56rem;letter-spacing:.34em;text-transform:uppercase;
  color:rgba(234,240,230,.5)}
.gate__name{margin:10px 0 0;font-size:clamp(1.8rem,8.5vw,3.2rem);font-weight:300;
  line-height:.98;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  text-shadow:0 0 5px #fff,0 0 30px rgba(201,162,39,.75)}
.gate__note{margin:24px auto 0;max-width:440px;font-size:.85rem;
  color:rgba(234,240,230,.58)}

/* ---------- fenceline ---------- */
.fence{height:32px;position:relative;background:var(--grass);overflow:hidden}
.fence::before{content:"";position:absolute;left:0;right:0;top:10px;height:4px;
  background:var(--fence);box-shadow:0 11px 0 var(--fence)}
.fence::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,var(--fence) 0 6px,transparent 6px 58px)}

/* ---------- the grounds ---------- */
.grounds{position:relative;padding:40px 0 70px;
  background:linear-gradient(180deg,#2C4428,#1A2A18)}
.grounds::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(114deg,rgba(255,255,255,.03) 0 2px,transparent 2px 26px)}
.plot{position:relative;max-width:1000px;margin:0 auto;padding:0 16px}

.sect{display:flex;align-items:center;gap:14px;margin:34px 0 8px}
.sect h2{margin:0;font-size:.78rem;font-weight:400;letter-spacing:.3em;
  text-transform:uppercase;color:var(--sign);white-space:nowrap}
.sect span{flex:1;height:1px;background:linear-gradient(90deg,rgba(201,162,39,.45),transparent)}
.sect__note{margin:0 0 22px;font-size:.83rem;color:rgba(234,240,230,.45)}

/* ---------- lots ---------- */
.lots{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.lot{position:relative;display:block;text-decoration:none;color:inherit;
  padding:22px 18px 20px;border-radius:3px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(0,0,0,.22));
  border:1px solid rgba(201,162,39,.24);
  transition:transform 240ms var(--ease),border-color 240ms var(--ease),
             box-shadow 240ms var(--ease)}
a.lot:hover,a.lot:focus-visible{transform:translateY(-4px);border-color:var(--sign);
  box-shadow:0 16px 34px rgba(0,0,0,.5),0 0 26px rgba(201,162,39,.16)}
.lot__ico{display:block;width:40px;height:40px;margin-bottom:14px;opacity:.9}
.lot__name{display:block;font-size:1rem;font-weight:500}
.lot__desc{display:block;margin-top:7px;font-size:.8rem;line-height:1.45;
  color:rgba(234,240,230,.55)}
.lot__state{position:absolute;top:12px;right:12px;font-size:.5rem;letter-spacing:.18em;
  text-transform:uppercase;padding:2px 8px;border-radius:2px}
.lot--open .lot__state{background:var(--sign);color:#1A2A18}
.lot--soon{opacity:.58}
.lot--soon .lot__state{background:transparent;color:rgba(234,240,230,.4);
  border:1px solid rgba(234,240,230,.22)}

/* ---------- ticket strip ---------- */
.purse{display:flex;align-items:center;justify-content:center;gap:12px;
  margin:0 auto;padding:11px 20px;width:fit-content;
  border:1px solid rgba(201,162,39,.4);box-shadow:0 0 24px rgba(201,162,39,.12)}
.purse b{font-size:1.15rem;font-weight:500;color:var(--sign);
  font-variant-numeric:tabular-nums}
.purse small{display:block;font-size:.52rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(234,240,230,.4)}

.legacy{max-width:560px;margin:48px auto 0;padding:0 20px;text-align:center;
  font-size:.76rem;line-height:1.75;color:rgba(234,240,230,.32)}
.legacy em{font-style:normal;color:rgba(201,162,39,.65)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
a:focus-visible{outline:2px solid var(--sign);outline-offset:4px}