/* ============================================================
   SOLANGELES CITY — playable 2.5D prototype
   ============================================================ */
html,
body.city-page{
  width:100%;
  height:100%;
  overflow:hidden;
  background:#78d8cb;
}
body.city-page::after{
  opacity:.33;
  mix-blend-mode:multiply;
}
.city-page nav.main{
  background:linear-gradient(180deg, rgba(19,31,31,.9) 0%, rgba(19,31,31,.56) 58%, transparent 100%);
}
.city-stage{
  position:relative;
  width:100%;
  height:100svh;
  min-height:560px;
  overflow:hidden;
  background:#78d8cb;
  touch-action:none;
  user-select:none;
}
#cityCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  cursor:default;
}
.world-label-layer{
  position:absolute;
  inset:0;
  z-index:6;
  pointer-events:none;
  overflow:hidden;
}
.world-label,
.world-bubble{
  position:absolute;
  left:0;
  top:0;
  max-width:min(260px,62vw);
  transform:translate(-1000px,-1000px);
  translate:-50% -100%;
  border:2px solid #263231;
  border-radius:7px;
  background:#f7f3e4;
  color:#263231;
  box-shadow:4px 5px 0 rgba(38,50,49,.23);
  font-family:var(--font-vhs);
  letter-spacing:.05em;
  text-align:center;
  white-space:nowrap;
}
.world-label{
  padding:3px 10px 2px;
  font-size:21px;
}
.world-label.player{
  background:#19fb9b;
}
.world-bubble{
  padding:9px 14px 8px;
  font-size:23px;
  line-height:.95;
  white-space:normal;
}
.world-bubble::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:-16px;
  width:20px;
  height:20px;
  background:#f7f3e4;
  border-right:2px solid #263231;
  border-bottom:2px solid #263231;
  transform:translateX(-50%) rotate(45deg);
}
.city-webgl-error{
  position:absolute;
  left:50%;
  top:50%;
  z-index:12;
  transform:translate(-50%,-50%);
  border:2px solid #263231;
  border-radius:8px;
  background:#f7f3e4;
  color:#263231;
  padding:18px 22px;
  font-family:var(--font-disp);
  box-shadow:8px 10px 0 rgba(38,50,49,.25);
}
.city-vignette{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(9,28,29,.24) 0%, transparent 22%, transparent 68%, rgba(9,28,29,.16) 100%),
    radial-gradient(70% 82% at 50% 48%, transparent 45%, rgba(7,15,18,.18) 100%);
}
.city-hud{
  position:absolute;
  left:clamp(14px,2.2vw,30px);
  top:86px;
  z-index:8;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 13px 10px 11px;
  border:2px solid #2d3a3a;
  border-radius:8px;
  background:#f4f0df;
  color:#263231;
  box-shadow:5px 6px 0 rgba(35,48,48,.28);
}
.city-hud img{
  width:102px;
  height:auto;
  display:block;
  filter:drop-shadow(0 1px 0 #263231);
}
.city-hud b{
  display:block;
  font-family:var(--font-vhs);
  font-size:23px;
  line-height:.88;
  letter-spacing:.04em;
  color:#263231;
}
.city-hud span{
  display:block;
  margin-top:3px;
  font-family:var(--font-vhs);
  font-size:17px;
  color:#db3854;
  letter-spacing:.06em;
}
.city-quest{
  position:absolute;
  left:clamp(14px,2.2vw,30px);
  bottom:22px;
  z-index:8;
  width:212px;
  padding:12px 14px 13px;
  border:2px solid #263231;
  border-radius:8px;
  background:#f7f3e4;
  color:#263231;
  box-shadow:5px 6px 0 rgba(38,50,49,.24);
}
.city-quest span,
.city-quest em{
  display:block;
  font-family:var(--font-vhs);
  font-style:normal;
  font-size:17px;
  letter-spacing:.08em;
  color:#5f716c;
}
.city-quest b{
  display:block;
  margin:2px 0 3px;
  font-family:var(--font-disp);
  font-size:19px;
  letter-spacing:.02em;
}
.city-quest em{
  color:#db3854;
}
.city-tools{
  position:absolute;
  right:clamp(12px,2vw,28px);
  top:90px;
  z-index:9;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.tool-btn{
  position:relative;
  width:54px;
  height:54px;
  border:2px solid #263231;
  border-radius:7px;
  background:#f7f3e4;
  color:#42585f;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:4px 5px 0 rgba(38,50,49,.28);
  transition:transform .14s ease, background .14s ease, color .14s ease, box-shadow .14s ease;
}
.tool-btn svg{
  width:28px;
  height:28px;
  fill:currentColor;
}
.tool-btn:hover,
.tool-btn.active{
  transform:translate(-2px,-2px);
  background:#ffd564;
  color:#253231;
  box-shadow:6px 7px 0 rgba(38,50,49,.28);
}
.tool-btn:active{
  transform:translate(1px,1px);
  box-shadow:2px 3px 0 rgba(38,50,49,.28);
}
.tool-btn::after{
  content:"";
  position:absolute;
  right:-7px;
  top:-7px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#db3854;
  border:2px solid #263231;
  opacity:0;
}
.tool-btn.active::after{
  opacity:1;
}
.avatar-panel{
  position:absolute;
  left:clamp(14px,2.2vw,30px);
  top:174px;
  z-index:11;
  width:min(350px, calc(100vw - 96px));
  max-height:calc(100svh - 205px);
  overflow:auto;
  padding:15px;
  border:2px solid #263231;
  border-radius:8px;
  background:#f6f1df;
  color:#263231;
  box-shadow:8px 10px 0 rgba(38,50,49,.25);
  transform:translateX(calc(-100% - 42px));
  opacity:0;
  pointer-events:none;
  transition:transform .24s ease, opacity .24s ease;
}
.avatar-panel.open{
  transform:translateX(0);
  opacity:1;
  pointer-events:auto;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.panel-head b{
  font-family:var(--font-disp);
  font-size:22px;
  letter-spacing:.02em;
}
.panel-head button{
  width:34px;
  height:34px;
  border:2px solid #263231;
  border-radius:7px;
  background:#fff;
  color:#263231;
  font-size:23px;
  line-height:1;
  cursor:pointer;
}
.name-field,
.editor-group{
  display:block;
}
.name-field span,
.editor-group span{
  display:block;
  font-family:var(--font-vhs);
  font-size:20px;
  letter-spacing:.06em;
  color:#506361;
  margin-bottom:6px;
}
.name-field input{
  width:100%;
  height:44px;
  border:2px solid #263231;
  border-radius:7px;
  background:#fffdf2;
  color:#263231;
  font-family:var(--font-disp);
  font-size:15px;
  letter-spacing:.02em;
  padding:0 12px;
  outline:none;
}
.name-field input:focus{
  box-shadow:0 0 0 3px rgba(25,251,155,.32);
}
.editor-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
.swatches{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
}
.swatch{
  width:31px;
  height:31px;
  border:2px solid #263231;
  border-radius:50%;
  background:var(--swatch);
  cursor:pointer;
  box-shadow:2px 3px 0 rgba(38,50,49,.2);
}
.swatch.active{
  outline:3px solid #19fb9b;
  outline-offset:2px;
}
.avatar-preview{
  height:136px;
  margin:16px 0 13px;
  border:2px solid #263231;
  border-radius:7px;
  background:
    linear-gradient(180deg, #76d5ca 0%, #9ae0cf 50%, #d7dfbe 50%, #d7dfbe 100%);
  box-shadow:inset 0 -28px 0 rgba(76,100,88,.16);
}
.avatar-preview canvas{
  width:100%;
  height:100%;
  display:block;
}
.preview-avatar{
  position:relative;
  width:86px;
  height:116px;
  margin:8px auto 0;
  transform:rotateX(58deg) rotateZ(-6deg);
  transform-style:preserve-3d;
}
.preview-avatar i,
.preview-avatar b,
.preview-avatar em,
.preview-avatar span{
  position:absolute;
  display:block;
  border:3px solid #263231;
  box-shadow:4px 5px 0 rgba(38,50,49,.18);
}
.preview-avatar i{
  left:22px;
  top:0;
  width:42px;
  height:42px;
  border-radius:50%;
  background:var(--skin);
  box-shadow:0 -13px 0 var(--hair), 4px 5px 0 rgba(38,50,49,.18);
}
.preview-avatar b{
  left:17px;
  top:40px;
  width:52px;
  height:58px;
  border-radius:14px 14px 9px 9px;
  background:var(--top);
}
.preview-avatar em{
  left:4px;
  top:54px;
  width:26px;
  height:42px;
  border-radius:8px;
  background:var(--bag);
}
.preview-avatar span{
  left:20px;
  bottom:0;
  width:46px;
  height:21px;
  border-radius:13px;
  background:linear-gradient(90deg,#f1f2e8 0 48%,#19d0b4 48% 100%);
}
.enter-city{
  width:100%;
  height:48px;
  border:2px solid #263231;
  border-radius:7px;
  background:#19fb9b;
  color:#062019;
  font-family:var(--font-disp);
  font-size:14px;
  letter-spacing:.04em;
  cursor:pointer;
  box-shadow:4px 5px 0 rgba(38,50,49,.25);
}
.enter-city:hover{
  background:#ffd564;
}
.mobile-stick{
  position:absolute;
  left:22px;
  bottom:24px;
  z-index:10;
  width:118px;
  height:118px;
  border:2px solid rgba(38,50,49,.75);
  border-radius:50%;
  background:rgba(247,243,228,.52);
  box-shadow:4px 5px 0 rgba(38,50,49,.18);
  display:none;
  align-items:center;
  justify-content:center;
  touch-action:none;
}
.mobile-stick span{
  width:49px;
  height:49px;
  border:2px solid #263231;
  border-radius:50%;
  background:#f7f3e4;
  box-shadow:3px 4px 0 rgba(38,50,49,.22);
  transform:translate(var(--jx,0), var(--jy,0));
}
.city-music{
  right:clamp(12px,2vw,28px);
  bottom:22px;
  border-color:#263231;
  color:#263231;
  background:#f7f3e4;
  box-shadow:4px 5px 0 rgba(38,50,49,.25);
}
.city-music.playing{
  background:#ffd564;
  color:#263231;
}

@media (max-width:760px){
  .city-stage{
    min-height:100svh;
  }
  .city-hud{
    top:76px;
    left:10px;
    padding:8px 10px;
  }
  .city-hud img{
    width:82px;
  }
  .city-hud b{
    font-size:19px;
  }
  .city-hud span{
    font-size:15px;
  }
  .city-tools{
    top:76px;
    right:9px;
    gap:7px;
  }
  .city-quest{
    left:146px;
    bottom:18px;
    width:166px;
    padding:9px 11px;
  }
  .city-quest span,
  .city-quest em{
    font-size:14px;
  }
  .city-quest b{
    font-size:15px;
  }
  .tool-btn{
    width:46px;
    height:46px;
  }
  .tool-btn svg{
    width:24px;
    height:24px;
  }
  .avatar-panel{
    left:10px;
    right:10px;
    top:auto;
    bottom:14px;
    width:auto;
    max-height:72svh;
    transform:translateY(calc(100% + 28px));
  }
  .avatar-panel.open{
    transform:translateY(0);
  }
  .editor-grid{
    grid-template-columns:1fr;
  }
  .mobile-stick{
    display:flex;
  }
  .city-music{
    left:auto;
    right:9px;
    bottom:16px;
    width:48px;
    height:48px;
  }
}

@media (max-height:620px) and (min-width:761px){
  .city-hud{
    top:72px;
  }
  .city-tools{
    top:72px;
  }
  .avatar-panel{
    top:150px;
    max-height:calc(100svh - 170px);
  }
}