/* emoji wall: max 5 notes, emoji only */
.slots { display: flex; gap: 8px; margin-bottom: 14px; }
.slot { flex: 1; aspect-ratio: 1; max-width: 60px; border-radius: 16px; border: 2px dashed var(--line); font-size: 26px; display: grid; place-items: center; background: transparent; transition: all 0.3s var(--ease); }
.slot.full { border-style: solid; border-color: var(--accent); background: rgba(135, 206, 235, 0.14); animation: pop 0.35s var(--ease); }
.slot.full:hover { transform: scale(0.92); border-color: var(--bad); }
@keyframes pop { from { transform: scale(0.6); } to { transform: none; } }
.npick { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.npick button { aspect-ratio: 1; border-radius: 14px; font-size: 22px; border: 1px solid var(--line); background: var(--card); transition: all 0.25s var(--ease); }
.npick button:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-3px) scale(1.1); background: rgba(135, 206, 235, 0.18); }
.npick button:disabled { opacity: 0.35; cursor: default; }
.nacts { display: flex; gap: 8px; margin-top: 14px; }
.nacts .btn:disabled { opacity: 0.4; cursor: default; transform: none; box-shadow: none; }
.wall { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; overflow: visible; padding: 26px 6px 8px; min-height: 0; }
.note { flex: none; padding: 22px 14px 14px; text-align: center; display: grid; gap: 14px; align-content: space-between; min-height: 140px; }
.note.mine { outline: 3px solid var(--accent); }
.note .emos { font-size: 34px; line-height: 1.25; letter-spacing: 0.05em; word-break: keep-all; }
.note small { font-family: "Inter"; font-size: 12px; color: rgba(13, 23, 48, 0.55); font-weight: 600; }
.note .nx { margin-left: 6px; width: 20px; height: 20px; border-radius: 50%; background: rgba(13, 23, 48, 0.12); font-size: 10px; color: #0d1730; }
.note .nx:hover { background: var(--bad); color: #fff; }
.wempty { grid-column: 1 / -1; text-align: center; }

.pempty { border: 1.5px dashed var(--line); border-radius: 20px; padding: 34px 18px; text-align: center; display: grid; gap: 6px; }
.pempty b { font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: -0.03em; text-transform: lowercase; }
.pempty span { color: var(--faint); font-size: 14px; }

/* wall: 5 notes across, 2 rows (10 newest), each with who posted it */
.wall { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 22px 16px; padding: 26px 4px 8px; }
.note { padding: 22px 12px 12px; gap: 10px; min-height: 0; align-content: start; justify-items: center; }
.note .emos { font-size: 28px; line-height: 1.2; letter-spacing: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; }
.note .who { display: flex; align-items: center; gap: 7px; max-width: 100%; justify-content: center; }
.note .wi { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 14px; background: rgba(13, 23, 48, 0.09); flex: none; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
.note .wi.ini { font: 800 12px Inter; color: #0d1730; background: rgba(29, 134, 184, 0.22); }
.note .wn { font-family: var(--head); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; text-transform: lowercase; color: #0d1730; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.note .wn em { font-style: normal; font: 800 9px Inter; letter-spacing: 0.1em; text-transform: uppercase; background: #ff9ec7; color: #2a0818; padding: 2px 6px; border-radius: 99px; margin-left: 3px; vertical-align: 1px; }
@media (max-width: 1100px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }