@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Poppins:wght@400;500;600;700&display=swap');

*{box-sizing:border-box}
[hidden]{display:none!important}
button:disabled{opacity:.5;cursor:wait}
button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #f2eee4;outline-offset:3px}
nav button.active{color:#f2eee4}
#appNotice{position:fixed;top:10px;left:50%;transform:translateX(-50%);width:min(92%,470px);padding:13px 18px;border-radius:12px;background:#f2eee4;color:#101116;box-shadow:0 5px 22px #0008;z-index:300;font-size:13px;cursor:pointer}
#appNotice.error{background:#ffe1d9;color:#772a17}
.wall-message{padding:30px;color:#a4a9b4;text-align:center}
.share-card{position:absolute;left:8px;bottom:3px;padding:3px;border:0;background:transparent;color:#555;font-size:10px}
#resetScreen{position:fixed;inset:0;z-index:200;background:#090a0e;padding:60px 22px;overflow:auto}
#resetScreen>*{display:block;width:min(100%,470px);margin:0 auto 18px}
#resetScreen input{padding:14px;border-radius:12px;border:1px solid #30343d;background:#14171e;color:#eee}
#resetScreen button{padding:14px;border:0;border-radius:14px;background:#f2eee4;color:#111}
#accountStatus{color:#a4a9b4;font-size:14px}
nav{padding-bottom:env(safe-area-inset-bottom);height:calc(67px + env(safe-area-inset-bottom))}
.capture{bottom:calc(83px + env(safe-area-inset-bottom))}
html{background:#090a0e}
body{margin:0;min-height:100vh;background:#090a0e;color:#f3eee4;font-family:'Poppins',sans-serif}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
.app{width:100%;max-width:760px;margin:0 auto;padding:20px 16px 110px}
header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.logo{font-family:'Caveat',cursive;font-size:35px;font-weight:700;letter-spacing:.2px}
.profile-button{width:43px;height:43px;border:1px solid #292d35;border-radius:50%;background:#151820;color:#f3eee4;font-size:18px}
.intro{text-align:center;margin:2px 0 22px}.intro h1{margin:0;font-size:32px;line-height:1.1;font-weight:600;letter-spacing:-.8px}.intro p{margin:7px 0 0;color:#8e929c;font-size:14px}
#wall{position:relative;min-height:570px;background:#13161d;border:1px solid #242831;border-radius:27px;overflow:hidden;box-shadow:0 22px 50px rgba(0,0,0,.35)}
.wall-empty{position:absolute;inset:0;display:grid;place-items:center;padding:30px;text-align:center;color:#747985;font-size:14px}
.polaroid{position:absolute;width:188px;min-height:218px;padding:11px 11px 24px;background:#f2eee4;color:#1b1b1b;border-radius:3px;box-shadow:0 18px 30px rgba(0,0,0,.45);text-align:center;overflow:visible}
.polaroid img{width:100%;height:150px;display:block;object-fit:cover;border-radius:1px;margin-bottom:12px}
.polaroid-caption{font-family:'Caveat',cursive;font-size:21px;font-weight:600;line-height:1.05;min-height:22px}
.trash{position:absolute;right:7px;bottom:5px;border:0;background:transparent;color:#777;font-size:16px;opacity:.65;padding:2px 5px}
.capture{position:fixed;right:max(20px,calc((100vw - 760px)/2 + 10px));bottom:83px;border:0;border-radius:999px;padding:14px 20px;background:#f2eee4;color:#101116;font-weight:600;font-size:15px;box-shadow:0 10px 26px rgba(0,0,0,.45);z-index:40}
.capture:active{transform:scale(.97)}
nav{position:fixed;left:0;right:0;bottom:0;height:67px;background:rgba(15,17,23,.97);border-top:1px solid #242831;display:flex;justify-content:center;gap:64px;align-items:center;z-index:50;backdrop-filter:blur(12px)}
nav button{border:0;background:transparent;color:#858994;font-size:12px;display:flex;flex-direction:column;gap:3px;align-items:center;min-width:55px}nav button:first-letter{font-size:17px}
.capture-panel{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.7);align-items:flex-end;justify-content:center;padding:14px}.capture-panel.open{display:flex}
.capture-box{width:min(100%,470px);max-height:90vh;overflow:auto;background:#14171e;border:1px solid #292d36;border-radius:27px;padding:27px 20px 22px;box-shadow:0 25px 70px rgba(0,0,0,.6);position:relative}.capture-box h2{margin:0 0 5px;font-size:25px}.capture-box>p{margin:0 0 22px;color:#858a95}.close-capture,.screen-back{border:0;background:transparent;color:#eee;font-size:20px}.close-capture{position:absolute;right:17px;top:16px}.capture-box label,#friendsScreen h3,#profileScreen label,#signupScreen label,#loginScreen label{display:block;margin:0 0 7px;font-size:13px;font-weight:600;color:#ddd8cf}
#momentPhoto,#momentCaption,#shareFriend,#profileScreen input,#signupScreen input,#loginScreen input{width:100%;border:1px solid #2a2e38;border-radius:14px;padding:13px;background:#0c0e13;color:#f2ede4;outline:none;margin-bottom:15px}#momentCaption{min-height:92px;resize:none}#momentCaption:focus,#shareFriend:focus,input:focus{border-color:#666d79}
#photoPreview{margin:-3px 0 16px}#photoPreview img{width:100%;max-height:270px;object-fit:cover;border-radius:15px;display:block}.word-count{text-align:right;color:#7f8490;font-size:12px;margin:-7px 2px 16px}.pin-button,#saveUsernameButton,#signupButton,#loginButton{width:100%;border:0;border-radius:15px;padding:14px;background:#f2eee4;color:#101116;font-weight:700}
#friendsScreen,#profileScreen,#peekScreen{max-width:760px;margin:0 auto;padding:25px 16px 110px}#friendsScreen h2,#profileScreen h2,#peekScreen h2{font-size:29px;margin:0 0 18px}#friendsScreen h3{margin-top:28px;color:#898e99;font-size:13px;text-transform:uppercase;letter-spacing:.08em}
#addFriendButton,#peekScreen>button,#profileScreen button:not(#saveUsernameButton),#friendRequests button,#sharedMomentRequests button,#friendsList button{border:1px solid #30343d;background:#171a21;color:#f1ede4;border-radius:12px;padding:10px 14px;font-size:13px}
#friendRequests>div,#sharedMomentRequests>div,#friendsList>div{background:#14171e;border:1px solid #252932;border-radius:16px;padding:14px 15px;margin:10px 0;color:#eee}#friendRequests p,#sharedMomentRequests p,#friendsList p{margin:0 0 8px}#friendRequests button,#sharedMomentRequests button,#friendsList button{background:#f2eee4;color:#111;margin-right:7px;border:0;font-weight:600}
#peekContent{position:relative;min-height:520px;background:#13161d;border:1px solid #242831;border-radius:25px;overflow:hidden;margin-top:15px}#peekContent .peek-card{position:absolute;margin:0;width:188px}
#profileScreen input{margin-top:7px}.screen-back{margin-bottom:25px;font-size:14px}
#signupScreen,#loginScreen{position:fixed;inset:0;z-index:200;background:#090a0e;padding:32px 20px 100px;overflow:auto}#signupScreen h2,#loginScreen h2{max-width:470px;margin:0 auto 28px;font-size:27px}#signupScreen label,#signupScreen input,#signupScreen button,#loginScreen label,#loginScreen input,#loginScreen button{display:block;max-width:470px;margin-left:auto;margin-right:auto}#signupScreen input,#loginScreen input{background:#14171e}
@media(max-width:600px){.app{padding:17px 12px 105px}.logo{font-size:32px}.intro h1{font-size:29px}#wall{min-height:535px;border-radius:23px}.polaroid{width:155px;min-height:184px;padding:9px 9px 21px}.polaroid img{height:124px;margin-bottom:9px}.polaroid-caption{font-size:18px}.capture{right:17px;bottom:80px;padding:13px 17px}nav{gap:30px}.capture-box{border-radius:25px 25px 18px 18px}}
@media(min-width:601px){#wall .polaroid:nth-of-type(1){margin-left:0}}

.wall-tabs {display:flex;gap:10px;justify-content:center;margin:12px 0 22px;}
.wall-tabs button {border:1px solid #70665e;border-radius:20px;padding:10px 18px;background:transparent;color:#f4e9d5;cursor:pointer;}
.wall-tabs button[aria-pressed="true"] {background:#f4e9d5;color:#24201e;}
#privateControls {max-width:500px;margin:0 auto 24px;padding:18px;border:1px solid #70665e;border-radius:14px;color:#f4e9d5;}
#privateControls label {display:block;margin-top:16px;}
#privateControls select {width:100%;padding:10px;margin:8px 0;}
#privateControls button {padding:10px 16px;margin:4px 0;border-radius:12px;cursor:pointer;}
.privacy-hint {font-size:.85rem;opacity:.75;}
[hidden] {display:none !important;}
.wall-view-hint {text-align:center;color:#f4e9d5;font-size:.9rem;}
#memoryControls {text-align:center;color:#f4e9d5;margin:12px auto 24px;}
#memoryControls button,#memoryControls input,#moreMemoriesButton {padding:10px;margin:5px;border-radius:12px;}
#wall.memory-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:22px;height:auto;min-height:250px;padding:20px;align-items:start;}
#wall.memory-grid .polaroid {position:relative;left:auto;top:auto;transform:none;width:100%;box-sizing:border-box;margin:0;cursor:default;}
#wall.memory-grid time {display:block;font-family:system-ui,sans-serif;font-size:.7rem;color:#675e54;margin-top:10px;}
#moreMemoriesButton {display:block;margin:16px auto 110px;cursor:pointer;}
/* Photo-first capture, with a caption written on the Polaroid. */
.capture-panel {align-items:center;background:rgba(6,5,4,.86);backdrop-filter:blur(14px);padding:24px 20px;overflow:auto;}
.capture-box {width:min(100%,410px);max-height:calc(100dvh - 48px);padding:12px 8px 8px;background:transparent;border:0;border-radius:0;box-shadow:none;overflow:visible;margin:auto;}
.capture-box h2 {font-size:18px;text-align:center;margin:0 30px 6px;}
.capture-box>p {text-align:center;font-size:12px;margin:0 0 16px;color:#aaa49a;}
.capture-box .close-capture {right:-4px;top:-12px;width:34px;height:34px;border:1px solid #665e53;border-radius:50%;background:#15130f;z-index:2;}
.capture-file,.visually-hidden {position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0!important;}
.capture-polaroid {padding:12px 12px 8px;background:#f3e8d6;color:#443b30;box-shadow:0 20px 55px #0009;transform:rotate(-1.4deg);margin-bottom:22px;}
.capture-polaroid #photoPreview {margin:0;min-height:180px;display:grid;place-items:center;background:#e8ddca;}
.capture-polaroid #photoPreview img {width:100%;height:auto;max-height:45dvh;object-fit:contain;border-radius:0;}
.choose-photo {width:100%;min-height:220px;border:1px dashed #b9a990;background:transparent;color:#766650;font-weight:600;border-radius:0;}
.capture-polaroid #momentCaption {display:block;width:100%;min-height:46px;height:46px;margin:8px 0 0;padding:8px 4px;border:0;border-radius:0;background:transparent;color:#443b30;text-align:center;font-family:'Caveat',cursive;font-size:25px;line-height:30px;resize:none;}
.capture-polaroid #momentCaption::placeholder {color:#a09583;}
.capture-polaroid .word-count {margin:0 4px 3px;color:#958872;font-size:10px;text-align:right;}
.capture-box #captureShare label {font-size:12px;color:#ddd2c0;margin-bottom:6px;}
.capture-box #shareFriend {margin:0 0 14px;border:1px solid #66594a;border-radius:5px;background:#17130e;padding:12px;color:#f3e8d6;}
.capture-actions {display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.capture-actions button {padding:13px;border-radius:5px;font-weight:600;}
#retakeButton {border:1px solid #75634f;background:transparent;color:#f3e8d6;}
.capture-actions .pin-button {background:#f17b22;color:#201308;border:0;}
.capture-box :focus-visible {outline-color:#ed9b57;}
@media(max-height:650px){.capture-panel {align-items:flex-start;}.capture-polaroid #photoPreview img {max-height:36dvh;}.capture-box {max-height:none;}}
.rename-wall {display:block;margin:0 auto 14px;border:0;background:transparent;color:#bcb3a6;font-size:12px;text-decoration:underline;padding:6px;}
.wall-tabs button {max-width:48%;overflow-wrap:anywhere;}

/* Keep wall controls compact, with room for custom names. */
#wallControls>.wall-tabs,#wallBrowseControls>.wall-tabs {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:min(100%,420px);margin:10px auto;}
#wallControls>.wall-tabs button,#wallBrowseControls>.wall-tabs button {max-width:none;width:100%;min-height:44px;padding:10px 12px;border-radius:14px;line-height:1.35;overflow-wrap:anywhere;}
#wallControls>.rename-wall {margin:6px auto 12px;padding:7px 12px;}
#wallControls>.wall-view-hint {max-width:420px;margin:8px auto 20px;padding:0 8px;line-height:1.5;}


#wallBrowseControls {margin-top:18px;}
#wallBrowseControls>.wall-view-hint {max-width:420px;margin:8px auto 20px;padding:0 8px;line-height:1.5;}

/* One heading, with the handwritten saying on its own sticker. */
.intro {display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;margin:4px 0 26px;}
.intro h1 {flex:1;overflow-wrap:anywhere;}
.moments-sticker {flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#f3e8d6;color:#493b2e;padding:13px 15px;border-radius:5px 16px 5px 14px;box-shadow:3px 5px 0 #0004;transform:rotate(6deg);font-family:'Caveat',cursive;line-height:1.05;}
.moments-sticker span:first-child {font-size:25px;font-weight:700;}
.moments-sticker span:last-child {font-size:18px;}
@media(max-width:380px){.intro {gap:10px;}.intro h1 {font-size:25px;}.moments-sticker {padding:10px;}.moments-sticker span:first-child {font-size:22px;}.moments-sticker span:last-child {font-size:16px;}}

/* Wall names live on the large, tactile wall buttons. */
.intro {justify-content:flex-end;margin:4px 0 22px;}
#wallControls>.wall-tabs button,#wallBrowseControls>.wall-tabs button {min-height:54px;border-radius:20px;padding:14px 16px;border:1px solid #484b55;background:#191c24;color:#e5e1d8;font-weight:600;box-shadow:0 4px 0 #050609;transition:background .15s,transform .15s,box-shadow .15s;}
#wallControls>.wall-tabs button[aria-pressed="true"],#wallBrowseControls>.wall-tabs button[aria-pressed="true"] {background:#f3e8d6;color:#28231e;border-color:#f3e8d6;box-shadow:0 4px 0 #a5957d;}
#wallControls>.wall-tabs button:active,#wallBrowseControls>.wall-tabs button:active {transform:translateY(3px);box-shadow:0 1px 0 #050609;}
@media(hover:hover){#wallControls>.wall-tabs button:hover,#wallBrowseControls>.wall-tabs button:hover {filter:brightness(1.12);}}

/* Locked-wall invitations sit beneath the photos as one simple panel. */
#privateControls {max-width:500px;margin:20px auto 16px;padding:20px;background:#151820;border:1px solid #30343e;border-radius:22px;}
#privateControls>p:first-child {margin:0 0 8px;font-size:14px;line-height:1.5;}
#privateControls .privacy-hint {margin:0 0 18px;font-size:11px;line-height:1.5;color:#a8a5a0;}
#privateControls label {margin:0 0 8px;font-size:13px;font-weight:600;}
#privateControls select {display:block;width:100%;min-height:50px;margin:0 0 12px;padding:12px 14px;border:1px solid #454954;border-radius:14px;background:#0d1016;color:#f3e8d6;font:inherit;font-size:14px;}
#privateControls #privateInviteButton {width:100%;min-height:50px;margin:0;padding:12px 16px;border:0;border-radius:16px;background:#f3e8d6;color:#28231e;font-weight:600;box-shadow:0 3px 0 #a5957d;}
#privateAccessList>div {margin-top:14px;padding-top:14px;border-top:1px solid #30343e;}
#privateAccessList p {margin:0;font-size:12px;line-height:1.6;color:#aaa9ae;overflow-wrap:anywhere;}
#privateAccessList button {margin-top:10px;padding:9px 13px;border:1px solid #55505a;background:transparent;color:#f3e8d6;border-radius:12px;font-size:12px;}

/* Photo stacking stays inside its wall; navigation stays above the wall. */
#wall,#peekContent {isolation:isolate;}
#peekContent {min-height:570px;}
nav {z-index:90;height:calc(67px + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px);bottom:0;transform:translateZ(0);}
.capture {bottom:calc(83px + env(safe-area-inset-bottom,0px));}
@media(max-width:600px){#peekContent {min-height:535px;}#peekContent .peek-card {width:155px;}}