/* Keep each resident's palette inside the shared Spirit Rush window language. */
.web-shell {
  width:100%;
  max-width:1920px;
  margin:0 auto;
  border:0;
  outline:0;
  box-shadow:none;
  background:transparent;
}
.web-shell > main {max-width:1440px;margin:auto;padding:16px 24px}
.world-location {
  max-width:1392px;
  margin:16px auto 0;
  padding:12px 16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px 24px;
  background:var(--paper);
  border:1px solid var(--accent);
  box-shadow:inset 0 0 0 3px #fff8;
  font:12px/1.8 var(--pixel);
}
.world-location nav {display:flex;flex-wrap:wrap;gap:6px 12px;min-width:0}
.house-navigation .all-miko {padding:8px 0;white-space:nowrap}
.current-resident {font-weight:bold;margin-right:auto}
.neighbor-links {display:flex;gap:24px;min-width:0}
.neighbor-links a {display:flex;flex-direction:column;padding:4px 0;min-width:0}
.neighbor-links a:last-child {text-align:right}
.neighbor-links small {font-size:9px;letter-spacing:1px;text-decoration:none}
.neighbor-links span {overflow-wrap:anywhere}
.panel {
  border:1px solid var(--accent);
  border-radius:9px 9px 2px 2px;
  box-shadow:inset 0 0 0 3px #fff9,2px 3px 0 var(--wash);
}
.panel-bar {
  margin:0;
  padding:12px 15px;
  min-height:47px;
  background:linear-gradient(#ffffff45,var(--accent) 55%);
  background-color:var(--accent);
  border:0;
  border-top:3px solid #fff;
  border-bottom:2px solid var(--wash);
  border-radius:8px 8px 0 0;
  box-shadow:inset 2px 0 #ffffff70,inset -2px 0 #ffffff70;
  color:#fff;
  font:20px/1.4 var(--pixel);
  text-transform:uppercase;
  letter-spacing:2px;
}
.retro-button,.small-button {
  background:linear-gradient(#fff9,var(--wash));
  border:3px double #fff;
  box-shadow:0 0 0 1px var(--accent),1px 2px 0 var(--accent);
  border-radius:3px;
  font-weight:bold;
}
.retro-button:hover,.small-button:hover {background:var(--wash)}
.resident,.album-photo,.spirit-link {
  border:1px solid var(--accent);
  border-radius:6px;
  box-shadow:inset 3px 3px 0 #fff9;
}
.resident:hover {outline:2px solid var(--accent);outline-offset:1px}
.resident-art {background:var(--wash);border:1px solid var(--accent);border-radius:4px}
.resident-copy strong {font:17px/1.5 var(--pixel);letter-spacing:1px}
.town-welcome,.house-hero {border:3px double #fff;box-shadow:0 0 0 1px var(--accent)}
.town-welcome {position:relative}
.town-welcome::after {
  content:'';
  position:absolute;
  width:45px;
  height:45px;
  right:16px;
  top:12px;
  background:url('/assets/star-pink.png') center/contain no-repeat;
  pointer-events:none;
}
.window-title {
  font-size:12px;
  background:linear-gradient(#ffffff40,var(--accent));
  background-color:var(--accent);
  border-radius:8px 8px 0 0;
}
.room-nav {border:3px double #fff;box-shadow:0 0 0 1px var(--accent);margin-top:1px}
.room-nav a {letter-spacing:1px}
.webring {border:3px double #fff;box-shadow:0 0 0 1px var(--accent)}
.to-top {background:linear-gradient(#ffffff40,var(--accent));background-color:var(--accent)}
@media(max-width:1440px) {
  .world-location {margin-left:24px;margin-right:24px}
}
@media(max-width:760px) {
  .web-shell > main {padding:14px}
  .world-location {margin:12px 14px 0;flex-direction:column;align-items:flex-start;padding:10px 12px;gap:8px}
  .house-navigation {display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px}
  .current-resident {margin:0;text-align:right;overflow-wrap:anywhere}
  .neighbor-links {grid-column:1/-1;justify-content:space-between;width:100%;border-top:1px dashed var(--accent);padding-top:6px}
  .panel-bar {font-size:17px;letter-spacing:1.5px;padding:10px 13px;min-height:43px}
}
@media(max-width:440px) {
  .web-shell > main {padding:10px}
  .world-location {margin-left:10px;margin-right:10px}
  .world-location {font-size:10px}
  .panel-bar {font-size:16px}
}

/* Art-team full-scale portraits and a little drawing desk for unfinished ones. */
.house-scene.fullscale-scene,.house-scene.workshop-scene{height:auto;min-height:360px;max-width:420px;width:100%;justify-self:center;display:grid;place-items:center;padding:12px;overflow:visible}
.fullscale-link{position:relative;display:block;width:100%;text-align:center;text-decoration:none;z-index:1}
.fullscale-art{display:block;height:400px;width:100%;object-fit:contain;image-rendering:auto;filter:drop-shadow(3px 5px 0 #fff9)}
.fullscale-hint{display:inline-block;font:10px/1.6 var(--pixel);letter-spacing:.6px;background:var(--paper);padding:6px 10px;border:1px dashed var(--accent);border-radius:12px}
.portrait-workshop{width:100%;max-width:340px;padding:18px;text-align:center;border:2px dashed var(--accent);border-radius:14px;background:repeating-linear-gradient(0deg,transparent 0 27px,#b69cd622 27px 28px),var(--paper);position:relative;z-index:1}
.workshop-label{display:block;font:10px/1.7 var(--pixel);letter-spacing:1px;color:var(--accent)}
.workshop-sketch{position:relative;width:145px;height:140px;margin:12px auto;background:var(--wash);border-radius:50%;display:grid;place-items:center}
.workshop-sketch img{width:125px;height:125px;object-fit:contain;transform:rotate(-5deg)}
.sketch-pencil{position:absolute;right:-4px;bottom:0;font:60px/1 Georgia,serif;color:var(--accent);animation:art-pencil 2.4s ease-in-out infinite}
.sketch-star{position:absolute;left:0;top:0;font-size:34px;color:var(--accent)}
.portrait-workshop h2{font:20px/1.4 var(--reading);color:var(--accent);margin:10px 0}.portrait-workshop p{font-size:15px;line-height:1.6;margin:0 0 12px}.portrait-workshop button{margin-top:14px;max-width:100%}.portrait-workshop .workshop-reply{font-size:13px;margin:10px 0 0}.workshop-reply:empty{display:none}.cheered .sketch-star{transform:rotate(15deg) scale(1.2)}
@keyframes art-pencil{50%{transform:translate(-3px,-4px) rotate(-12deg)}}
@media(prefers-reduced-motion:reduce){.sketch-pencil{animation:none}}
@media(max-width:760px){.fullscale-art{height:330px}.house-scene.fullscale-scene,.house-scene.workshop-scene{min-height:0;padding:8px}}
.fullscale-scene .portrait-motion{margin:12px 0 0;font-size:9px}