.screen { padding: 8px 0 40px; }
.center { text-align: center; }
.cream { color: var(--cream); }
.eyebrow { color: var(--orange); font-size: .8rem; margin: 10px 0 6px; }
.big-emoji { font-size: 3.4rem; margin: 40px 0 10px; }
#s-loading { display: grid; place-items: center; min-height: 50dvh; }
.spinner { width: 46px; height: 46px; border-radius: 50%; border: 5px solid var(--ink-3); border-top-color: var(--orange); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Contador estilo cámara descartable */
.counter { text-align: center; margin: 14px 0 6px; }
.counter-num { font-size: 5.2rem; line-height: 1; color: var(--yellow); text-shadow: 0 0 24px rgba(255,196,61,.35); }
.counter-label { color: var(--muted); font-weight: 700; }
.frames { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 300px; margin: 16px auto 0; }
.frames i { aspect-ratio: 3/4; border-radius: 3px; background: var(--ink-3); }
.frames i.used { background: var(--orange); }
.frames i.pending { background: var(--yellow); animation: pulse 1.2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .45; } }

/* Disparador */
.shutter { display: block; width: 168px; height: 168px; margin: 30px auto 8px; cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent; }
.shutter input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; font-size: 0; }
.shutter-ring { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: var(--cream); box-shadow: 0 0 0 8px rgba(255,247,234,.12), 0 12px 40px rgba(255,92,33,.25); pointer-events: none; }
.shutter-core { width: 78%; height: 78%; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a5c, var(--orange) 55%, #c63c0c); transition: transform .1s; }
.shutter:active .shutter-core { transform: scale(.9); }
.shutter.busy .shutter-core { animation: pulse .8s infinite; }
.shutter.off { opacity: .35; pointer-events: none; }
.shutter-hint { font-weight: 700; }
.flash { position: fixed; inset: 0; background: #fff; z-index: 90; pointer-events: none; animation: flash .5s ease-out forwards; }
@keyframes flash { from { opacity: .95; } to { opacity: 0; } }

.roll-done { text-align: center; margin: 26px 0 10px; }
.status { text-align: center; font-weight: 700; font-size: .95rem; min-height: 1.5em; margin: 14px 0; }
.status.ok { color: var(--green); }
.status.wait { color: var(--yellow); }
.countdown { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.countdown strong { color: var(--cream); font-size: 1.1rem; }

/* Álbum */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 0 -16px; }
@media (min-width: 560px) { .grid { margin: 0; } }
.grid button { padding: 0; border: 0; background: var(--ink-2); aspect-ratio: 1; overflow: hidden; cursor: pointer; }
.grid img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .6s; }
.grid img.in { opacity: 1; animation: develop 1.4s ease-out; }
@keyframes develop { from { filter: sepia(1) brightness(1.8) contrast(.5) blur(2px); } to { filter: none; } }

.lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(10,8,7,.97); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 56px 12px 16px; }
.lightbox img { max-width: 100%; max-height: calc(100dvh - 160px); object-fit: contain; border: 6px solid var(--cream); border-bottom-width: 28px; border-radius: 3px; }
.lb-close { position: absolute; top: 10px; right: 12px; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--ink-3); color: var(--cream); font-size: 1.2rem; cursor: pointer; }
.lb-bar { display: flex; gap: 14px; align-items: center; justify-content: space-between; width: min(100%, 520px); margin-top: 14px; }
.lb-bar .btn { width: auto; min-height: 48px; }
#lb-who { font-weight: 700; }

/* Misión al azar */
.mission { text-align: center; margin: 18px auto 0; max-width: 340px; padding: 14px 16px 10px; border-radius: 16px; background: var(--cream); color: var(--ink); transform: rotate(-1.5deg); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
.mission-tag { color: var(--orange); font-size: .72rem; }
.mission p { font-weight: 800; font-size: 1.15rem; line-height: 1.2; margin: 4px 0 2px; }
.mission p.flip { animation: flip .45s ease-out; }
@keyframes flip { from { transform: rotateX(90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mission button.link { color: var(--orange); font-weight: 800; text-decoration: none; }
.mission small { display: block; color: #7b6f65; font-size: .78rem; }
.shutter { margin-top: 22px; }
.frames { grid-template-columns: repeat(var(--cols, 10), 1fr); max-width: calc(min(var(--cols, 10), 10) * 30px); }

/* Guardar el rollo */
.save { display: grid; gap: 12px; padding: 16px; margin: 4px 0 16px; border-radius: 16px; background: #2b1a12; border: 2px solid var(--orange); }
.save strong { display: block; font-size: 1.05rem; }
.save span { display: block; color: #e6d9c8; font-size: .92rem; }
.save.saved { background: #0f2e1d; border-color: var(--green); }
.save .btn { min-height: 52px; }

.lb-bar small { display: block; color: var(--yellow); font-weight: 700; font-size: .85rem; margin-top: 2px; }
button.lb-report { color: var(--muted); font-size: .85rem; margin-top: 10px; }

/* Identidad laboratorio en la app */
.counter-num { font-family: var(--mono); color: var(--yellow); text-shadow: 0 0 10px rgba(255,138,42,.9), 0 0 30px rgba(255,90,0,.5); }
.mission { border-radius: 0; border: 3px solid #000; box-shadow: 6px 6px 0 var(--orange); }
.mission p { font: 900 1.45rem/1.05 var(--display); text-transform: uppercase; }
.free-note { font-size: .9rem; color: var(--muted); border-left: 3px solid var(--orange); padding: 4px 0 4px 12px; margin: 0 0 18px; }
.save { border-radius: 0; border: 2px solid var(--orange); }
.save span b { color: var(--cream); }
.save small { font-size: .8rem; }
.grid button { position: relative; }
.grid .tag { position: absolute; top: 5px; left: 5px; background: var(--cream); color: var(--ink); font: 900 .78rem var(--display); text-transform: uppercase; padding: 2px 6px; }
.grid .votes { position: absolute; right: 5px; bottom: 5px; color: #fff; font: .8rem var(--mono); text-shadow: 0 1px 3px #000; }
.grid button.top { outline: 3px solid var(--orange); outline-offset: -3px; }
.undev { aspect-ratio: 1; background: #ece6da; position: relative; overflow: hidden; }
.undev::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(224,51,42,.18) 50%, transparent 70%); animation: sheen 2.8s ease-in-out infinite; }
@keyframes sheen { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.undev.more { grid-column: 1 / -1; aspect-ratio: auto; min-height: 120px; display: grid; place-content: center; text-align: center; background: repeating-linear-gradient(-45deg, #ece6da 0 14px, #e2dacb 14px 28px); color: var(--ink); }
.undev.more b { font: 900 2rem var(--display); line-height: 1; }
.undev.more span { font: .8rem var(--mono); text-transform: uppercase; color: #5a4c46; }
.top-photo { display: grid; grid-template-columns: 92px 1fr; gap: 12px; align-items: center; width: 100%; text-align: left; padding: 10px; margin: 0 0 14px; background: var(--cream); color: var(--ink); border: 3px solid #000; box-shadow: 6px 6px 0 var(--orange); position: relative; cursor: pointer; font: inherit; animation: popIn .6s cubic-bezier(.3,1.6,.5,1); }
.top-photo img { width: 92px; height: 92px; object-fit: cover; }
.top-photo strong { display: block; font: 900 1.2rem var(--display); text-transform: uppercase; }
.top-photo span { font-size: .85rem; color: #5a4c46; }
.top-photo .ribbon { position: absolute; top: -12px; right: 10px; background: var(--orange); color: #fff; font: 900 .9rem var(--display); text-transform: uppercase; padding: 3px 9px; border: 2px solid #000; }
@keyframes popIn { from { transform: scale(.85) rotate(-3deg); opacity: 0; } to { transform: none; opacity: 1; } }
.vote { border: 2px solid var(--cream); background: transparent; color: var(--cream); font: 1.1rem var(--mono); padding: 10px 14px; cursor: pointer; min-height: 48px; }
.vote.on { background: var(--orange); border-color: var(--orange); color: #fff; }
.vote.pop { animation: votePop .4s cubic-bezier(.3,1.8,.5,1); }
@keyframes votePop { 50% { transform: scale(1.25); } }
.own-cta { display: block; margin: 28px 0 10px; padding: 18px; text-decoration: none; color: var(--ink); background: var(--cream); border: 3px solid #000; box-shadow: 6px 6px 0 var(--orange); }
.own-cta span { display: block; font-size: .9rem; color: #5a4c46; }
.own-cta b { font: 900 1.5rem var(--display); text-transform: uppercase; }
.lightbox img { border-radius: 0; }

/* ---- Momentos ---- */
.moments-pick { margin: 18px -20px 0; }
.moments-pick > span { display: block; padding: 0 20px; font-size: .78rem; color: var(--muted); margin-bottom: 6px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 20px 6px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips button { flex: none; border: 2px solid var(--ink-3); background: var(--ink-2); color: var(--cream); font: 900 1.05rem var(--display); text-transform: uppercase; padding: 9px 14px; cursor: pointer; }
.chips button.on { background: var(--cream); color: var(--ink); border-color: #000; box-shadow: 4px 4px 0 var(--orange); }
.privacy { font-size: .84rem; color: var(--muted); border-left: 3px solid var(--ink-3); padding-left: 12px; margin: 0 0 18px; }
.privacy a { color: var(--yellow); }
.demo-note { font-size: .92rem; color: var(--cream); background: #2a1210; border: 2px solid var(--orange); padding: 10px 12px; }
.saved { display: grid; gap: 10px; margin: 4px 0 16px; color: var(--muted); font-size: .92rem; }
.moment-sec .grid { margin-top: 0; }
.moment-h { display: flex; justify-content: space-between; align-items: baseline; font-size: 1.5rem; margin: 22px 0 8px; }
.moment-h i { font: normal .9rem var(--mono); color: var(--yellow); }
.saved .gift { color: var(--cream); font: 900 1.25rem var(--display); text-transform: uppercase; }
.share-album { margin: 0 0 16px; }