:root{--bg:#0d1020;--ink:#f8f7f1;--muted:#c1c0c9;--purple:#7c66ff;--mint:#64e6c7;--amber:#ffc45f;--pink:#ff7dba;--paper:#fffdf7;--paper-ink:#20202a}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:radial-gradient(circle at 20% 15%,#26205b 0,transparent 32%),radial-gradient(circle at 86% 82%,#1c5b55 0,transparent 28%),linear-gradient(145deg,#0c0f1d,#12162a 58%,#0b0e19);color:var(--ink)}
.wall-body{position:relative}.wall-body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.35),transparent 82%)}
.ambient{position:absolute;border-radius:50%;filter:blur(70px);opacity:.2;pointer-events:none}.ambient-one{width:22vw;height:22vw;background:#7c66ff;left:-6vw;top:28vh}.ambient-two{width:18vw;height:18vw;background:#64e6c7;right:4vw;top:8vh}.ambient-three{width:20vw;height:20vw;background:#ff7dba;right:14vw;bottom:-8vw}
.wall-shell{height:100vh;padding:1.55vh 2.2vw 1.25vh;display:grid;grid-template-rows:1fr auto;gap:1.15vh;position:relative;z-index:2}
.photo-stage{position:relative;min-height:0;overflow:hidden;border-radius:clamp(22px,1.5vw,36px);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 1px rgba(255,255,255,.08),0 24px 70px rgba(0,0,0,.24);background-color:#8d613e;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.06) 0 1px,transparent 1.4px),radial-gradient(circle at 70% 60%,rgba(53,25,10,.12) 0 1px,transparent 1.5px),linear-gradient(120deg,rgba(255,255,255,.025),rgba(0,0,0,.045));background-size:13px 13px,17px 17px,100% 100%}
.photo-stage:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.05),transparent 30%,rgba(0,0,0,.04) 70%,transparent),radial-gradient(circle at 50% -20%,rgba(255,240,211,.12),transparent 60%)}
.pin{position:absolute;z-index:5;width:clamp(8px,.72vw,17px);height:clamp(8px,.72vw,17px);border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff4cd 0 12%,#f5bd43 20%,#b66d16 68%,#6d3810 100%);box-shadow:0 2px 5px rgba(0,0,0,.38)}.pin-1{left:10%;top:5%}.pin-2{left:48%;top:3%}.pin-3{right:9%;top:7%}
.photo-card{position:absolute;overflow:visible;background:var(--paper);padding:clamp(11px,.78vw,20px) clamp(11px,.78vw,20px) clamp(43px,2.95vw,72px);border-radius:clamp(3px,.24vw,7px);box-shadow:0 14px 30px rgba(31,17,8,.28),0 2px 5px rgba(31,17,8,.18);transform-origin:center;transition:filter .3s,box-shadow .3s,transform .3s;isolation:isolate;cursor:zoom-in;outline:none}.photo-card:focus-visible{box-shadow:0 0 0 4px rgba(255,196,95,.78),0 18px 38px rgba(31,17,8,.34)}.photo-card:before{content:"";position:absolute;left:50%;top:clamp(-5px,-.25vw,-2px);width:clamp(8px,.62vw,15px);height:clamp(8px,.62vw,15px);border-radius:50%;transform:translateX(-50%);z-index:7;background:radial-gradient(circle at 35% 30%,#fff7da 0 12%,#efbb4f 20%,#bd7417 67%,#75400e 100%);box-shadow:0 2px 5px rgba(0,0,0,.42)}
.photo-image-wrap{width:100%;aspect-ratio:var(--photo-ratio,1.3333);max-height:58vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#f1eee7}.photo-card img{width:100%;height:100%;object-fit:contain;display:block;background:#f1eee7;opacity:0;transform:scale(1);transition:opacity .65s ease,transform 9s ease}.photo-card.has-photo img{opacity:1;transform:scale(1.012)}.photo-card:nth-of-type(even).has-photo img{transform:scale(1.008)}.photo-card.is-changing{animation:cardSwap .7s ease}
.photo-meta{position:absolute;left:clamp(13px,.92vw,23px);right:clamp(13px,.92vw,23px);bottom:clamp(9px,.64vw,16px);z-index:3;color:var(--paper-ink);text-shadow:none;display:flex;align-items:baseline;gap:.5em;min-width:0}.photo-name{font-size:clamp(12px,.72vw,18px);font-weight:850;letter-spacing:-.02em;white-space:nowrap}.photo-message{font-size:clamp(9px,.55vw,14px);line-height:1.2;color:#5f5b61;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.photo-source{display:none}
.card-hero{left:3.2%;top:5%;width:27.5%;transform:rotate(-3.2deg)}.card-a{left:31.2%;top:3.5%;width:20.5%;transform:rotate(2.3deg)}.card-b{left:52%;top:5.5%;width:19.5%;transform:rotate(-1.5deg)}.card-c{right:3.3%;top:3.5%;width:21.5%;transform:rotate(3deg)}.card-d{left:4.7%;bottom:4.2%;width:22.5%;transform:rotate(2.2deg)}.card-e{left:28.8%;bottom:3%;width:18.5%;transform:rotate(-2.4deg)}.card-f{left:48%;bottom:4.2%;width:20.5%;transform:rotate(1.5deg)}.card-g{right:14.5%;bottom:3.4%;width:18.5%;transform:rotate(-3.1deg)}.card-h{right:2.3%;top:39%;width:14.5%;transform:rotate(4.4deg);z-index:4}
.card-hero{z-index:3}.card-a,.card-e{z-index:2}.card-b,.card-d,.card-f,.card-g{z-index:3}.card-c{z-index:2}.photo-card:hover{z-index:9;filter:brightness(1.03);box-shadow:0 20px 42px rgba(31,17,8,.34)}
.empty-state{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:linear-gradient(135deg,rgba(104,68,39,.92),rgba(141,97,62,.88));transition:opacity .5s}.empty-state[hidden]{opacity:0;pointer-events:none}.empty-icon{font-size:clamp(42px,4vw,92px);filter:drop-shadow(0 12px 20px rgba(0,0,0,.24))}.empty-state h2{font-size:clamp(28px,2.3vw,56px);margin:.35em 0 .25em;letter-spacing:-.04em}.empty-state p{max-width:34ch;color:#f0e5db;font-size:clamp(14px,.95vw,22px);margin:0}
.wall-footer{min-height:3.2vh;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.15vw;padding-right:clamp(132px,9vw,205px);color:#c9cbd7;font-size:clamp(10px,.62vw,16px)}.challenge-footer-title{font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--amber);font-size:clamp(10px,.66vw,17px);white-space:nowrap}.ticker-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}.ticker-track{white-space:nowrap;display:inline-block;min-width:100%;animation:ticker 34s linear infinite}.clock{font-variant-numeric:tabular-nums;color:#8f93a8}
.corner-qr{position:fixed;z-index:30;right:2.2vw;bottom:1.05vh;width:clamp(112px,7.35vw,172px);aspect-ratio:1/1;background:rgba(255,255,255,.98);border:1px solid rgba(255,255,255,.8);border-radius:clamp(13px,.95vw,21px);padding:clamp(8px,.48vw,12px);display:grid;grid-template-rows:1fr auto;place-items:center;gap:4px;color:#17172a;box-shadow:0 16px 46px rgba(0,0,0,.32);transform:rotate(1.2deg)}.corner-qr strong{font-size:clamp(9px,.52vw,13px);line-height:1;text-transform:uppercase;letter-spacing:.08em}.qr-code{width:100%;height:100%;min-height:0;display:grid;place-items:center}.qr-code svg,.qr-code canvas{width:100%!important;height:100%!important;max-width:126px;max-height:126px;display:block}
.new-photo-toast{position:fixed;z-index:35;top:2.6vh;right:2.6vw;display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.97);color:#17172a;border-radius:16px;padding:10px 14px;box-shadow:0 18px 55px rgba(0,0,0,.3);transform:translateY(-150%);opacity:0;transition:.5s cubic-bezier(.2,.8,.2,1)}.new-photo-toast.show{transform:translateY(0);opacity:1}.new-photo-toast>span{font-size:24px}.new-photo-toast small{display:block;font-size:9px;font-weight:900;letter-spacing:.15em;color:#6758df}.new-photo-toast strong{display:block;font-size:1.05em;margin-top:.08em}
.photo-lightbox[hidden]{display:none}.photo-lightbox{position:fixed;z-index:100;inset:0;padding:4vh 5vw;display:grid;grid-template-columns:minmax(46px,5vw) 1fr minmax(46px,5vw);align-items:center;justify-items:center;background:rgba(7,8,15,.91);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);animation:lightboxIn .22s ease}.lightbox-figure{margin:0;max-width:82vw;max-height:91vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25vh}.lightbox-figure img{display:block;max-width:82vw;max-height:82vh;width:auto;height:auto;object-fit:contain;background:#101119;box-shadow:0 26px 90px rgba(0,0,0,.52);border:clamp(7px,.5vw,13px) solid rgba(255,255,255,.98);border-radius:5px}.lightbox-caption{min-height:1.5em;color:#f5f2ec;font-size:clamp(13px,.85vw,20px);text-align:center;text-shadow:0 2px 8px rgba(0,0,0,.4)}.lightbox-caption strong{color:var(--amber)}.caption-dot{display:inline-block;margin:0 .55em;color:#8f93a8}.lightbox-close,.lightbox-nav{border:0;color:#fff;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);cursor:pointer;transition:background .18s,transform .18s}.lightbox-close:hover,.lightbox-nav:hover{background:rgba(255,255,255,.18)}.lightbox-close{position:absolute;top:2.3vh;right:2.2vw;width:clamp(42px,3vw,62px);height:clamp(42px,3vw,62px);border-radius:50%;font-size:clamp(28px,2vw,44px);line-height:1}.lightbox-nav{width:clamp(44px,3.3vw,70px);height:clamp(70px,7vh,110px);border-radius:999px;font-size:clamp(34px,3vw,64px);line-height:1}.lightbox-prev{justify-self:start}.lightbox-next{justify-self:end}.lightbox-nav:active,.lightbox-close:active{transform:scale(.94)}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.78);opacity:.65}}@keyframes cardSwap{0%{filter:brightness(1)}45%{filter:brightness(.72)}100%{filter:brightness(1)}}@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-45%)}}@keyframes lightboxIn{from{opacity:0}to{opacity:1}}
@media (max-aspect-ratio:4/3){.wall-shell{padding:1.35vh 2vw 1.2vh}.card-hero{left:3%;top:5%;width:34%}.card-a{left:36%;top:4%;width:27%}.card-b{right:4%;top:6%;width:28%}.card-c{left:5%;bottom:4%;width:29%}.card-d{left:34%;bottom:3%;width:30%}.card-e{right:12%;bottom:4%;width:29%}.card-f,.card-g,.card-h{display:none}.wall-footer{padding-right:clamp(118px,11vw,170px)}.corner-qr{width:clamp(102px,10vw,148px)}}
@media (max-width:900px){.photo-lightbox{grid-template-columns:1fr;padding:3vh 3vw}.lightbox-nav{position:absolute;bottom:3vh;height:52px;width:52px;font-size:36px}.lightbox-prev{left:3vw}.lightbox-next{right:3vw}.lightbox-figure img{max-width:92vw;max-height:78vh}.lightbox-caption{max-width:86vw}}