/* =========================================================
   MOBILE FALLBACK — the arena, flattened but not dimmed
   Championship pennants on rafters, artifact light-up,
   gentle cloth sway. Same brand system as the 3D hall:
   greens #0B5E2A/#094d22/#073d1b/#0e7a36,
   creams #f7f0da/#E8DFC5/#DDD3B0/#c3b586, ink #1a1a1a.
   ========================================================= */

#mobile-wall{
  background:linear-gradient(180deg,#0a0806 0%,#040403 26%,#020302 62%,#030302 100%);
  min-height:100vh;
  padding:0 0 60px;
  overflow-y:auto;
}

/* ---------- atmosphere (mobile-only vignette + grain) ---------- */
.mw-vignette{
  position:fixed;inset:0;pointer-events:none;z-index:40;
  background:radial-gradient(ellipse 78% 66% at 50% 44%,
    rgba(0,0,0,0) 44%, rgba(0,0,0,.38) 76%, rgba(0,0,0,.78) 100%);
}
.mw-grain{
  position:fixed;inset:0;pointer-events:none;z-index:41;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.9'/></svg>");
}

/* ---------- header ---------- */
.mw-header{
  padding:50px 28px 34px;
  text-align:center;
}
.mw-back{
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:11px;
  letter-spacing:.3em;
  color:rgba(232,223,197,.6);
  text-decoration:none;
  padding:6px 2px;
  margin-bottom:22px;
  border-bottom:1px solid rgba(232,223,197,.2);
}
.mw-back:active{color:#E8DFC5;}
.mw-brand{
  font-family:'Bebas Neue',sans-serif;
  font-size:15px;
  letter-spacing:.42em;
  color:#E8DFC5;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-bottom:32px;
  text-decoration:none;
}
.mw-dot{
  width:6px;height:6px;border-radius:50%;
  background:#7fd99a;box-shadow:0 0 10px #7fd99a;
}
.mw-over{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:11px;
  letter-spacing:.46em;color:#7fd99a;
  margin-bottom:14px;
}
.mw-title{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;font-size:52px;line-height:.92;
  color:#E8DFC5;letter-spacing:.015em;
  text-shadow:0 0 60px rgba(127,217,154,.14);
  margin:0;
}
.mw-sub{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:500;font-size:17px;
  letter-spacing:.14em;color:#DDD3B0;
  margin-top:14px;
}
.mw-counter{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:12px;
  letter-spacing:.42em;text-indent:.42em;
  color:#E8DFC5;opacity:.88;
  margin-top:16px;
}
.mw-rule{
  width:74px;height:1px;
  background:rgba(232,223,197,.35);
  margin:22px auto;
}
.mw-cta{
  display:inline-block;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:13px;
  letter-spacing:.3em;
  color:#1a1a1a;background:#E8DFC5;
  border:1px solid #E8DFC5;
  padding:14px 28px 13px 31px;
  text-decoration:none;
  transition:background .5s ease,color .5s ease;
}
.mw-cta:hover,.mw-cta:active{
  background:transparent;color:#E8DFC5;
}

/* ---------- rafter grid ---------- */
.mw-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:14px;
  row-gap:36px;
  padding:14px 16px 34px;
  max-width:640px;
  margin:0 auto;
}

/* slot = static cell; holds the truss segment, banner and CTA */
.mw-slot{
  position:relative;
  padding-top:7px;
}
/* truss — thin dark metal bar; segments bleed into the gutters so
   each row reads as one continuous rafter */
.mw-slot::before{
  content:"";
  position:absolute;top:0;left:-8px;right:-8px;height:7px;
  background:linear-gradient(180deg,#20241f 0%,#0b0d0a 55%,#161913 100%);
  border-top:1px solid rgba(232,223,197,.12);
  border-bottom:1px solid rgba(0,0,0,.65);
}

/* ---------- the banner (sways from the truss) ---------- */
.mw-banner{
  position:relative;
  z-index:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transform-origin:50% 0;
  animation:mw-sway 8.5s ease-in-out infinite alternate;
  outline:none;
}
.mw-banner:focus-visible{
  outline:2px solid #7fd99a;
  outline-offset:4px;
}
@keyframes mw-sway{
  from{transform:rotate(-.7deg)}
  to{transform:rotate(.7deg)}
}

/* artifact glow behind the cloth — cheap: opacity-only transition */
.mw-banner::before{
  content:"";
  position:absolute;z-index:-1;
  inset:-16% -20% -10%;
  background:radial-gradient(52% 44% at 50% 28%,
    rgba(255,246,214,.22), rgba(255,246,214,.07) 55%, rgba(255,246,214,0) 78%);
  opacity:0;
  transition:opacity .7s ease;
  pointer-events:none;
}
.mw-slot.lit .mw-banner::before{opacity:1;}
.mw-slot.expanded .mw-banner::before{
  opacity:1;
  background:radial-gradient(56% 48% at 50% 30%,
    rgba(255,246,214,.34), rgba(255,246,214,.11) 55%, rgba(255,246,214,0) 80%);
}

/* two green hanging straps connecting cloth to truss */
.mw-banner::after{
  content:"";
  position:absolute;top:0;left:0;right:0;height:16px;
  background-image:
    linear-gradient(180deg,#0e7a36,#073d1b),
    linear-gradient(180deg,#0e7a36,#073d1b);
  background-size:7px 100%,7px 100%;
  background-position:22% 0,78% 0;
  background-repeat:no-repeat;
  pointer-events:none;
}

/* ---------- the cloth (matches drawBanner in app.js) ---------- */
.mw-cloth{
  position:relative;
  margin-top:14px;
  width:100%;
  aspect-ratio:2/3;
  /* deep green trim shows as a 5px reveal around the inset fabric */
  background:#073d1b;
  clip-path:polygon(0 0, 100% 0, 100% 94%, 50% 80%, 0 94%);
  transform-origin:50% 0;
  transition:transform .22s ease;
}
.mw-banner:active .mw-cloth{transform:scale(.965);}
.mw-slot.expanded .mw-cloth{transform:scale(1.03);}

/* pre-lit dim veil — brightness ~0.72 until the light finds it */
.mw-cloth::after{
  content:"";
  position:absolute;inset:0;
  background:rgba(3,5,3,.38);
  opacity:1;
  transition:opacity .7s ease;
  pointer-events:none;
}
.mw-slot.lit .mw-cloth::after{opacity:0;}

/* fabric: cream vertical gradient + inner hairline (SVG bg layer) */
.mw-fabric{
  position:absolute;inset:5px;
  clip-path:polygon(0 0, 100% 0, 100% 94%, 50% 80%, 0 94%);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 150' preserveAspectRatio='none'><polygon points='6,7.5 94,7.5 94,133.5 50,114 6,133.5' fill='none' stroke='rgba(11,94,42,0.5)' stroke-width='1'/></svg>"),
    linear-gradient(180deg,#f7f0da 0%,#E8DFC5 35%,#c3b586 100%);
  background-size:100% 100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  overflow:hidden;
}
/* baked artifact lighting: warm pool from above + darkening toward the notch,
   painted over the type like the canvas source-atop pass */
.mw-fabric::after{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(140% 92% at 50% 0%,
      rgba(255,250,228,.5), rgba(255,248,220,.14) 50%, rgba(255,248,220,0) 80%),
    linear-gradient(180deg, rgba(10,14,8,0) 50%, rgba(10,14,8,.42) 100%);
  pointer-events:none;
}

/* ---------- banner typography ---------- */
.mw-band{
  width:100%;
  background:#0B5E2A;
  color:#E8DFC5;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:clamp(9px,2.6vw,14px);
  letter-spacing:.48em;text-indent:.48em;
  padding:4px 0 3px;
}
.mw-nomark{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(12px,3.9vw,20px);
  line-height:1;
  color:#0B5E2A;
  margin-top:5.5%;
}
.mw-nomark span{
  font-size:.55em;
  vertical-align:.5em;
  border-bottom:2px solid currentColor;
  padding-bottom:1px;
}
.mw-num{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(46px,19vw,100px);
  line-height:.86;
  color:#0B5E2A;
  margin-top:1%;
}
.mw-name{
  font-family:'Bebas Neue',sans-serif;
  color:#073d1b;
  line-height:1;
  letter-spacing:.02em;
  margin-top:2.5%;
  max-width:88%;
  white-space:nowrap;
}
.mw-minirule{
  width:24%;height:2px;
  background:rgba(11,94,42,.6);
  margin-top:3.5%;
}
.mw-founding{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:clamp(8px,2.5vw,13px);
  letter-spacing:.28em;text-indent:.28em;
  color:#0B5E2A;
  margin-top:3%;
}
.mw-city{
  font-family:'Barlow',sans-serif;
  font-weight:500;
  font-size:clamp(8px,2.4vw,12px);
  letter-spacing:.06em;
  color:#1a1a1a;
  margin-top:1.5%;
  max-width:84%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
/* unclaimed */
.mw-slot.unclaimed .mw-minirule{margin-top:5.5%;}
.mw-open{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:clamp(10px,3.2vw,16px);
  letter-spacing:.3em;text-indent:.3em;
  color:#0B5E2A;
  margin-top:4%;
}
.mw-reserved{
  font-family:'Barlow',sans-serif;
  font-weight:500;
  font-size:clamp(8px,2.3vw,12px);
  letter-spacing:.08em;
  color:#1a1a1a;
  margin-top:2%;
}

/* ---------- claim CTA (revealed on tap of an unclaimed banner) ---------- */
.mw-claim-btn{
  display:none;
  margin:14px auto 0;
  background:#E8DFC5;
  color:#1a1a1a;
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;
  font-size:12px;
  letter-spacing:.28em;text-indent:.28em;
  padding:11px 8px 10px;
  text-decoration:none;
  border:1px solid #E8DFC5;
  text-align:center;
  width:100%;
}
.mw-slot.expanded .mw-claim-btn{display:block;}
.mw-claim-btn:hover,.mw-claim-btn:active{
  background:transparent;
  color:#E8DFC5;
}

/* ---------- THE NETWORK SO FAR — blueprint mini-globe ---------- */
.mw-net{
  padding:52px 24px 10px;
  text-align:center;
  max-width:640px;
  margin:0 auto;
}
.mw-net-over{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:11px;
  letter-spacing:.46em;color:#7fd99a;
  margin-bottom:13px;
}
.mw-net-title{
  font-family:'Bebas Neue',sans-serif;
  font-weight:400;font-size:38px;line-height:.94;
  color:#E8DFC5;letter-spacing:.02em;
  text-shadow:0 0 50px rgba(127,217,154,.14);
  margin:0;
}
.mw-net-stat{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:12px;
  letter-spacing:.34em;
  color:#E8DFC5;opacity:.88;
  margin-top:13px;
  min-height:15px;
}
.mw-net-live{
  display:inline-block;
  width:6px;height:6px;border-radius:50%;
  background:#7fd99a;box-shadow:0 0 8px #7fd99a;
  margin-right:11px;vertical-align:1px;
  animation:mw-pulse 2.4s ease infinite;
}
@keyframes mw-pulse{0%,100%{opacity:1}50%{opacity:.35}}
.mw-globe-wrap{
  width:min(88vw,420px);
  aspect-ratio:1/1;
  margin:26px auto 6px;
}
.mw-globe{
  width:100%;height:100%;display:block;
}
.mw-net-legend{
  display:flex;flex-wrap:wrap;
  justify-content:center;
  gap:8px 18px;
  margin-top:14px;
  padding:0 6px;
}
.mw-net-city{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:600;font-size:11px;
  letter-spacing:.22em;
  color:rgba(232,223,197,.5);
  transition:color .45s ease,text-shadow .45s ease;
  white-space:nowrap;
}
.mw-net-city.on{
  color:#7fd99a;
  text-shadow:0 0 12px rgba(127,217,154,.75);
}
.mw-net-note{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:500;font-size:10px;
  letter-spacing:.34em;
  color:rgba(232,223,197,.42);
  margin-top:16px;
}
.mw-net-cta{margin-top:26px;}

/* ---------- footer ---------- */
.mw-footer{
  padding:40px 28px 20px;
  text-align:center;
}
.mw-footer-rule{
  width:42px;height:1px;
  background:rgba(232,223,197,.3);
  margin:0 auto 18px;
}
.mw-footer-text{
  font-family:'Barlow Condensed',sans-serif;
  font-weight:500;font-size:10px;
  letter-spacing:.34em;
  color:rgba(232,223,197,.42);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .mw-banner{animation:none !important;}
  .mw-banner::before,
  .mw-cloth,
  .mw-cloth::after{transition:none !important;}
  .mw-net-live{animation:none !important;}
  .mw-net-city{transition:none !important;}
}