/* street.css — owned by the characters lane. */
/* ---- members ---- */
.walker { --tag-fs: max(9px, calc(var(--p) * 2.3)); position: absolute; background: none; border: 0; padding: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; }
.walker:focus-visible { outline: none; }
.m-body { display: block; transform-origin: 50% 100%; }
.walker:hover .m-body, .walker:focus-visible .m-body, .walker:active .m-body { filter: drop-shadow(0 0 calc(var(--p) * 1.2) rgba(123, 227, 107, .38)); }

/* name tag: dark pill, mint frame, pixel username, pointer triangle (legendary = gold) */
.name-tag {
  position: absolute; bottom: 100%; left: 50%; translate: -50% 0; margin-bottom: calc(var(--p) + 4px); padding: 4px 7px 3px;
  font: 600 var(--tag-fs)/1 var(--f-pixel); letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; color: var(--paper);
  background: #080c0a; border: 2px solid #3f8f5c; border-radius: 3px; box-shadow: 0 0 0 1px #030504, inset 0 0 0 1px #13221a;
}
.name-tag::after { content: ''; position: absolute; left: 50%; top: calc(100% + 3px); translate: -50% 0; border: 6px solid transparent; border-bottom: 0; border-top: 7px solid var(--green); }
.name-tag.r-legendary { border-color: #d6a83c; box-shadow: 0 0 0 1px #030504, inset 0 0 0 1px #2a2110; }
.name-tag.r-legendary::after { border-top-color: #f2c94c; }
.walker:hover .name-tag, .walker:focus-visible .name-tag, .walker:active .name-tag { border-color: var(--mint); box-shadow: 0 0 0 1px #030504, 0 0 12px rgba(175, 230, 184, .45); }
.walker:hover .name-tag.r-legendary, .walker:focus-visible .name-tag.r-legendary, .walker:active .name-tag.r-legendary { border-color: #ffd86b; box-shadow: 0 0 0 1px #030504, 0 0 12px rgba(242, 201, 76, .45); }
/* ---- shared by every lane: props with tooltips, "!" hints, tapes ---- */
.hint::after { content: '!'; position: absolute; top: -26px; left: 50%; translate: -50% 0; width: 20px; height: 22px; display: grid; place-items: center; font: 700 16px/1 var(--f-pixel); background: var(--green); color: var(--ink); animation: bob 1s ease-in-out infinite; }
.tape { font: 600 clamp(16px, 1.8vw, 22px)/1.2 var(--f-pixel); color: var(--ink); background: var(--mint); padding: 8px 14px; transform: rotate(-3deg); clip-path: polygon(0 8%, 4% 0, 96% 6%, 100% 0, 98% 92%, 100% 100%, 3% 95%, 0 100%); text-align: center; }
.egg { position: absolute; background: none; border: 0; padding: 0; cursor: help; }
.egg[data-tip]:hover::before, .egg[data-tip]:focus-visible::before {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; translate: -50% 0; width: max-content; max-width: 240px;
  font: 500 13px/1.3 var(--f-pixel); color: var(--ink); background: var(--paper); padding: 6px 9px; box-shadow: 3px 3px 0 var(--forest-700); z-index: 10; white-space: normal; text-align: center;
}
.egg.cat { cursor: pointer; }
.egg.cat:hover .cat-art, .egg.cat:focus-visible .cat-art { filter: brightness(1.25) drop-shadow(0 0 6px rgba(175, 230, 184, .45)); }
.cat-clue { position: absolute; bottom: calc(100% + 17px); left: 50%; transform: translateX(-50%); display: grid; place-items: center; min-height: 44px; padding: 0 10px; width: max-content; border-bottom: 1px dashed #92c9a880; background: #07100be8; color: #b8d2c1; font: 500 13px/1.2 var(--f-mono); white-space: nowrap; }
.cat-clue::after { content: ''; position: absolute; left: 50%; top: 100%; height: 12px; border-left: 1px dashed #92c9a860; }
.cat-clue[hidden], .cat-clue-touch { display: none; }
.egg.cat:hover .cat-clue, .egg.cat:focus-visible .cat-clue { color: #e3ffed; border-color: #b6ebcb; }
@media (pointer: coarse) { .cat-clue-mouse { display: none; } .cat-clue-touch { display: inline; } }
.egg.float { animation: float 4s ease-in-out infinite; }
.egg.fly { animation: fly 6s ease-in-out infinite; }
.egg.worm .px { animation: peek 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translate(6px, -10px) rotate(3deg); } }
@keyframes fly { 50% { transform: translate(-30px, -12px); } }
@keyframes peek { 0%, 60%, 100% { transform: translateY(70%); } 70%, 90% { transform: translateY(0); } }
.egg.worm { overflow: hidden; }


/* Optional browsing within one compact community scene. */
.activity-member[hidden], .member-demo[hidden] { display: none; }
.activity-frame { display: none; }
[data-phase="0"] > .af0, [data-phase="1"] > .af1,
[data-phase="2"] > .af2, [data-phase="3"] > .af3, [data-phase="4"] > .af4,
.member-demo:not([data-phase]) > .af0 { display: block; }
.activity-prop { pointer-events: none; }
.activity-member .name-tag { max-width: calc(var(--p) * 37); overflow: hidden; text-overflow: ellipsis; font-size: max(10px, calc(var(--p) * 2.5)); }
.activity-member:focus-visible { outline: 2px solid var(--mint); outline-offset: 5px; }
.member-scene-heading { color: var(--paper); display: flex; justify-content: space-between; align-items: flex-start; gap: 28px; }
.member-scene-copy { text-shadow: 0 2px 2px #080e0b, 0 0 8px #080e0b; }
.member-scene-copy { min-width: 0; }
.member-scene-kicker { margin: 0 0 8px; font: 600 13px/1.3 var(--f-mono); letter-spacing: .16em; color: var(--mint); }
.member-scene-heading h2 { margin: 0; font: 700 clamp(40px, 4.8vw, 78px)/1.02 var(--f-pixel); color: #dbf3df; }
.member-scene-sub { margin: 10px 0 0; color: #b7c6ba; font: 500 clamp(15px, 1.5vw, 23px)/1.4 var(--f-pixel); }
/* Balanced pager: one centered row over the existing street background. */
.member-scene-controls { top: calc(80% + 8px); display: flex; justify-content: center; align-items: center; padding: clamp(6px, 2vh, 24px) 0; background: transparent; }
.member-browser { display: flex; align-items: center; justify-content: center; gap: 8px; }
.member-browser button { flex: 0 0 48px; width: 48px; height: 48px; padding: 0; display: grid; place-items: center; color: var(--mint); background: transparent; border: 0; cursor: pointer; font: 500 32px/1 var(--f-mono); }
.member-browser button:disabled { opacity: .22; cursor: default; }
.member-group-status { min-width: 76px; text-align: center; white-space: nowrap; color: #c3d4c6; font: 500 16px/1.4 var(--f-mono); font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px #080f0b; }
.member-group-status b { color: var(--paper); font-weight: 500; }
.member-browser button:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.member-browser button:hover:not(:disabled) { color: var(--paper); }
/* Thin the existing soil dots with a feathered alpha mask; no panel is painted. */
#strip::before { mask-image: radial-gradient(ellipse 150px 48px at var(--member-pager-x) calc(var(--soil-lift, 0px) + 8px + clamp(6px, 2vh, 24px) + 24px), #0002 0%, #0004 55%, #000 100%); }
@media (max-width: 1000px) {
  .member-scene-heading { flex-wrap: wrap; gap: 12px; }
}
@media (max-width: 767px) {
  .member-scene-heading h2 { font-size: 32px; }
  .member-scene-sub { max-width: 310px; font-size: 15px; }
  .member-group-status { font-size: 15px; }
}
@media (max-height: 600px) {
  .member-scene-heading { align-items: center; flex-wrap: nowrap; gap: 8px; }
  .member-scene-heading h2 { font-size: 24px; }
  .member-scene-kicker, .member-scene-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}
@media (max-height: 430px) {
  .member-scene-copy { position: absolute; width: 1px !important; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .member-scene-heading { width: auto !important; height: auto; background: none; translate: -50% 0; }
  .member-scene-controls { top: calc(80% + 4px); padding: 4px 0; }
  #strip::before { mask-image: radial-gradient(ellipse 150px 44px at var(--member-pager-x) calc(var(--soil-lift, 0px) + 32px), #0002 0%, #0004 55%, #000 100%); }
}

.studio-lamp::before { content: ''; position: absolute; pointer-events: none; left: calc(var(--p) * -8); top: calc(var(--p) * 13); width: calc(var(--p) * 48); height: calc(var(--p) * 64); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); background: linear-gradient(#e9bd6729, #bb88371c 55%, #bb883700); }

/* The temporary foreground party draws these same members with jointed poses.
   Native profile buttons follow the party lineup, then return on exit. */
.member-party .m-body, .member-party .name-tag { visibility: hidden; }
.member-party-prop { opacity: .22; }