/* Social norms. Everything scoped under .snm-*. */
.snm-sc { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.snm-lbl { position: absolute; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--dim); }

/* the elevator, from above */
.snm-lift {
  position: relative; width: min(100%, 300px); aspect-ratio: 300 / 250; margin: 16px 0 30px;
  border-radius: 10px; background: repeating-linear-gradient(90deg, #1A2136 0 28px, #1D2540 28px 29px);
  border: 5px solid #3A4466; border-bottom-width: 0;
}
.snm-doors { position: absolute; left: 22%; right: 22%; bottom: -6px; height: 8px; display: flex; }
.snm-doors i { flex: 1; background: #A69F93; transition: transform .7s cubic-bezier(.6,0,.3,1); }
.snm-lift.open .snm-doors i:first-child { transform: translateX(-90%); }
.snm-lift.open .snm-doors i:last-child { transform: translateX(90%); }
.snm-lift > .snm-lbl { left: 0; right: 0; bottom: 6px; text-align: center; }
.snm-p { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; transition: left .7s cubic-bezier(.3,.7,.2,1), top .7s cubic-bezier(.3,.7,.2,1); }
.snm-p svg { display: block; width: 100%; height: 100%; transition: transform .35s; }
.snm-p .b { fill: #6C8CF5; }
.snm-p .h { fill: #E8C6A4; }
.snm-p .hair { fill: #3B2A20; }
.snm-p span { position: absolute; left: 50%; top: -16px; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: var(--dim); white-space: nowrap; }
.snm-p.you .b { fill: var(--gold); }
.snm-p.you .hair { fill: #7A4A22; }
.snm-p.you span { color: var(--gold); }
.snm-p.you svg { transform: rotate(180deg); }
.snm-p.you.faced svg { transform: none; }
.snm-p.edge span::after { content: ' ?'; }
.snm-spot {
  position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  border: 2px dashed var(--line-strong); background: rgba(169,155,255,.08);
}

/* the mailroom */
.snm-tally { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--dim); }
.snm-tally b { font-family: var(--mono); font-size: 22px; color: var(--text); letter-spacing: 0; text-transform: none; }
.snm-tally.done b { color: var(--gold); }
.snm-room {
  position: relative; width: min(100%, 320px); aspect-ratio: 320 / 220; border-radius: 12px; overflow: hidden;
  background: #1A2136; border: 2px solid #3A4466;
}
.snm-boxes { position: absolute; left: 6%; right: 6%; top: 6%; height: 18%; display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; }
.snm-boxes i { border-radius: 2px; background: #2B3350; border: 1px solid #46507A; }
.snm-ml { left: 6%; top: 26%; }
.snm-floor { position: absolute; left: 0; right: 0; top: 34%; bottom: 0; }
.snm-exit { position: absolute; right: 4%; bottom: 0; width: 16%; height: 5px; background: var(--gold); border-radius: 3px 3px 0 0; }
.snm-dl { right: 4%; bottom: 8px; width: 16%; text-align: center; }
.snm-walker { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; border: 2px solid #E8C6A4; opacity: 0; }
.snm-flier { position: absolute; width: 16px; height: 12px; margin: -6px 0 0 -8px; background: #F4EFE6; border-radius: 1px; box-shadow: 0 1px 0 rgba(0,0,0,.4); animation: snm-drop .3s ease-out both; }
.snm-junk { position: absolute; width: 20px; height: 20px; margin: -10px 0 0 -10px; animation: snm-drop .35s ease-out both; }
.snm-junk svg { display: block; width: 100%; height: 100%; }
.snm-rind { position: absolute; left: 50%; top: 50%; width: 64px; margin: -19px 0 0 -32px; transform: rotate(-12deg); }
.snm-rind svg { display: block; width: 100%; height: auto; }
.snm-note { font-size: 12px; color: var(--faint); text-align: center; }

/* the forest and the gym */
.snm-photo { width: 100%; max-width: 340px; max-height: 200px; object-fit: cover; border-radius: 14px; display: block; }
.snm-signs .choice { padding: 0; }
.snm-sign {
  display: block; width: 100%; padding: 12px 14px; border-radius: 12px; background: #5B4325; color: #F7E9CF;
  font-family: var(--serif); font-size: 16px; line-height: 1.3; text-align: left; border: 2px solid #8A6A3E;
}
.snm-board {
  width: min(100%, 300px); padding: 18px 18px 20px; border-radius: 10px; background: #F4EFE6; color: #1B1F2E;
  box-shadow: 0 6px 0 #070a14; display: flex; flex-direction: column; gap: 8px; transform: rotate(-1.5deg);
}
.snm-board b { font-size: 13px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: #D85555; }
.snm-board span { font-family: var(--serif); font-size: 21px; line-height: 1.25; font-weight: 700; }

.snm-sc > .snm-sign, .snm-floors { width: 100%; max-width: 340px; }
.snm-mini { position: relative; width: 100%; height: clamp(96px, 15vh, 140px); border-radius: 10px; background: #1A2136; border: 2px solid #3A4466; overflow: hidden; }
.snm-mini .snm-rind { width: 52px; margin: -16px 0 0 -26px; }

@keyframes snm-drop { from { opacity: 0; scale: 1.6; } to { opacity: 1; scale: 1; } }

@media (max-height: 700px) {
  .snm-room { width: min(100%, 290px); }
  .snm-photo { max-height: 150px; }
  .snm-sign { font-size: 15px; padding: 10px 12px; }
  .snm-board span { font-size: 19px; }
  .snm-mini { height: 84px; }
}