/* Interactive WebGL Beauty City */
.m-stage{overflow:hidden;background:#f7f1e9;}
#city3dWrap{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(circle at 50% 34%,#fffdf9 0,#f4eadf 48%,#e7d8c8 100%);}
#cityCanvas{display:block;width:100%;height:100%;touch-action:none;outline:none;}
#cityCanvas:focus-visible{box-shadow:inset 0 0 0 2px rgba(184,147,90,.85);}
#cityLoading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:'Jost',sans-serif;font-size:9px;letter-spacing:.45em;text-transform:uppercase;
  color:var(--gold);background:#f8f2eb;z-index:7;transition:opacity .45s;pointer-events:none;}
#cityLoading.done{opacity:0;}
.city-hud{position:absolute;left:16px;top:16px;z-index:5;pointer-events:none;max-width:280px;}
.city-kicker{font-family:'Jost',sans-serif;font-size:8px;letter-spacing:.45em;text-transform:uppercase;color:var(--gold);margin-bottom:5px;}
.city-headline{font-family:'Playfair Display',serif;font-size:clamp(18px,2.2vw,30px);line-height:1;color:var(--ink);}
.city-guide{position:absolute;right:16px;top:16px;z-index:5;display:flex;align-items:center;gap:8px;
  padding:9px 12px;background:rgba(255,255,255,.72);border:1px solid rgba(184,147,90,.2);
  backdrop-filter:blur(10px);font-family:'Jost',sans-serif;font-size:8px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink2);pointer-events:none;}
.city-guide-dot{width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 5px rgba(184,147,90,.12);}
.city-card{position:absolute;left:50%;bottom:20px;z-index:6;width:min(470px,calc(100% - 28px));
  transform:translate(-50%,18px);opacity:0;pointer-events:none;display:grid;grid-template-columns:1fr auto;
  gap:16px;align-items:center;padding:14px 14px 14px 18px;background:rgba(255,255,255,.88);
  border:1px solid rgba(184,147,90,.32);box-shadow:0 18px 48px rgba(61,45,26,.16);
  backdrop-filter:blur(14px);transition:opacity .24s,transform .24s;}
.city-card.on{opacity:1;transform:translate(-50%,0);pointer-events:auto;}
.city-card-kicker{font-family:'Jost',sans-serif;font-size:7px;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:3px;}
.city-card-title{font-family:'Playfair Display',serif;font-size:20px;line-height:1;color:var(--ink);margin-bottom:4px;}
.city-card-tag{font-family:'Cormorant Garamond',serif;font-style:italic;font-size:13px;color:var(--ink2);line-height:1.2;}
.city-card-open{border:1px solid var(--gold);background:var(--gold);color:#fff;padding:12px 16px;
  font-family:'Jost',sans-serif;font-size:8px;letter-spacing:.28em;text-transform:uppercase;cursor:pointer;
  white-space:nowrap;-webkit-tap-highlight-color:transparent;}
.city-card-open:active{background:var(--ink);border-color:var(--ink);}
.city-a11y{position:absolute;left:12px;bottom:12px;z-index:4;display:flex;gap:6px;max-width:calc(100% - 24px);
  overflow-x:auto;scrollbar-width:none;padding:4px;opacity:.05;transition:opacity .2s;}
.city-a11y:hover,.city-a11y:focus-within{opacity:1;}
.city-a11y::-webkit-scrollbar{display:none;}
.city-a11y button{flex:0 0 auto;border:1px solid rgba(184,147,90,.3);background:rgba(255,255,255,.78);color:var(--ink2);
  padding:7px 10px;font-family:'Jost',sans-serif;font-size:8px;letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(8px);}
.city-a11y button:focus-visible{outline:2px solid var(--gold);outline-offset:2px;}
#cityFallbackMsg{display:none;position:absolute;left:50%;top:12px;transform:translateX(-50%);z-index:8;
  background:rgba(255,255,255,.92);border:1px solid var(--border);padding:9px 13px;
  font-family:'Jost',sans-serif;font-size:8px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);}
.m-stage.static-mode{overflow-y:auto;overflow-x:hidden;background:#fff;}
.m-stage.static-mode #city3dWrap{display:none;}
.m-stage.static-mode #mPos{display:block;}
.m-stage.static-mode #cityFallbackMsg{display:block;}
.m-stage.webgl-mode #city3dWrap{display:block;}
.m-stage.webgl-mode #mPos{display:none;}

@media(max-width:700px){
  .city-hud{left:12px;top:12px;max-width:190px;}
  .city-guide{right:10px;top:10px;padding:8px 9px;font-size:7px;letter-spacing:.1em;}
  .city-guide span:last-child{display:none;}
  .city-card{bottom:12px;width:calc(100% - 20px);padding:12px 10px 12px 14px;gap:9px;}
  .city-card-title{font-size:18px;}
  .city-card-tag{font-size:12px;}
  .city-card-open{padding:11px 12px;font-size:7px;letter-spacing:.2em;}
  .city-a11y{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .city-card,#cityLoading{transition:none;}
}