/* Lumori: płaskie, redakcyjne UI. Bez poświat, gradientów i pigułek. Paleta zgodna z ustaleniami. */
:root {
  color-scheme: light;
  --bg: #F5EFE8;
  --card: #FFFAF5;
  --surface: #D8C3B4;
  --btn: #6B4548;
  --on-btn: #FFFAF5;
  --accent: #B77A68;
  --text: #292B3A;
  --ink: #6B4548;
  --muted: rgba(41, 43, 58, .64);
  --line: rgba(107, 69, 72, .18);
  --sage: #6f8d6c;
  --danger: #9a4a4a;
  --sh: 107, 69, 72;
  --paper: #FFFAF5;
  --paper-text: #292B3A;
  --paper-line: #E3D3C6;
  --sat: max(env(safe-area-inset-top, 0px), var(--safe-area-inset-top, 0px));
  --sab: max(env(safe-area-inset-bottom, 0px), var(--safe-area-inset-bottom, 0px));
  --serif: "Newsreader Variable", Charter, "Iowan Old Style", Georgia, serif;
  --sans: "Hanken Grotesk Variable", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hand: "Caveat Variable", "Segoe Print", "Bradley Hand", cursive;
  --ease: cubic-bezier(.22, .7, .2, 1);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #1B1C26;
  --card: #242635;
  --surface: #4A4048;
  --btn: #8A5A5D;
  --accent: #C98B79;
  --text: #F1E9E0;
  --ink: #E3C2B6;
  --muted: rgba(241, 233, 224, .62);
  --line: rgba(241, 233, 224, .13);
  --sage: #9bb39a;
  --danger: #e49a9a;
  --sh: 0, 0, 0;
  --paper: #F3E9DD;
  --paper-text: #292B3A;
  --paper-line: #D8C3B4;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; }
body { font: 400 1rem/1.5 var(--sans); color: var(--text); background: var(--bg); }
.app { max-width: 480px; margin: 0 auto; min-height: 100dvh; padding: 0 20px calc(84px + var(--sab)); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* nagłówek */
#top { display: flex; align-items: center; justify-content: space-between; padding: calc(16px + var(--sat)) 0 12px; border-bottom: 1px solid var(--line); }
#top h1 { margin: 0; font: 600 1.55rem/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.tools { display: flex; align-items: center; gap: 4px; }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--muted); }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--surface); }
.pill[data-s="waiting"] i, .pill[data-s="connecting"] i { background: var(--accent); animation: breathe 2.4s ease-in-out infinite; }
.pill[data-s="online"] { color: var(--text); }
.pill[data-s="online"] i { background: var(--sage); }
@keyframes breathe { 50% { opacity: .3; } }
.iconbtn { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--ink); cursor: pointer; border-radius: 8px; }
.iconbtn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* typografia */
h2 { font: 500 1.9rem/1.12 var(--serif); letter-spacing: -.015em; margin: 26px 0 8px; }
h3 { font: 500 1.2rem/1.3 var(--serif); color: var(--ink); margin: 0 0 4px; }
h3::first-letter, .dateline::first-letter { text-transform: uppercase; }
p { margin: 0 0 12px; }
.muted { color: var(--muted); font-size: .92rem; }
.dateline { display: block; font-size: .86rem; color: var(--muted); }
.hero { padding: 22px 0 6px; }
.hero .when { margin-top: 2px; font: 500 1.65rem/1.2 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.when small { display: block; margin-top: 6px; font: 400 .92rem/1.4 var(--sans); color: var(--muted); letter-spacing: 0; }

/* przyciski i pola */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 11px 18px;
  font: 600 .95rem var(--sans); color: var(--on-btn); background: var(--btn); border: 1px solid var(--btn); border-radius: 10px; cursor: pointer; text-align: center;
  transition: filter .2s, transform .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: default; filter: none; transform: none; }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--surface); }
:root[data-theme="dark"] .btn.ghost { border-color: var(--line); }
.btn.small { min-height: 36px; padding: 6px 13px; font-size: .86rem; border-radius: 8px; }
.btn.danger { color: var(--danger); }
.row { display: flex; gap: 10px; flex-wrap: wrap; }
.row > .btn { flex: 1 1 140px; }
input[type="text"], input[type="time"], textarea { width: 100%; font: inherit; color: var(--text); background: var(--card); border: 1px solid var(--surface); border-radius: 8px; padding: 11px 12px; }
:root[data-theme="dark"] input[type="text"], :root[data-theme="dark"] input[type="time"] { border-color: var(--line); }
.banner { margin: 14px 0; padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--card); font-size: .92rem; }
.section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: .92rem; cursor: pointer; margin-bottom: 12px; }
.check input { width: 20px; height: 20px; accent-color: var(--btn); flex: none; margin-top: 2px; }
.seg { display: flex; margin-bottom: 18px; border: 1px solid var(--surface); border-radius: 10px; overflow: hidden; }
:root[data-theme="dark"] .seg { border-color: var(--line); }
.seg .btn { flex: 1; border: 0; border-radius: 0; background: transparent; color: var(--ink); min-height: 40px; }
.seg .btn + .btn { border-left: 1px solid var(--line); }
.seg .btn[aria-pressed="true"] { background: var(--btn); color: var(--on-btn); }
.timerow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: .95rem; }
.timerow input { width: auto; min-width: 124px; }

/* polaroidy: kwadratowe rogi, papier, odręczny podpis */
.grid { display: grid; gap: 28px; margin-top: 20px; }
.polaroid {
  --r: 0deg; position: relative; padding: 10px 10px 14px; border-radius: 2px; background: var(--paper); color: var(--paper-text);
  transform: rotate(var(--r)); box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 10px 18px -10px rgba(var(--sh), .45);
}
.tilt-a { --r: -1deg; } .tilt-b { --r: .8deg; } .tilt-c { --r: -.4deg; }
.polaroid .ph { aspect-ratio: 4 / 5; overflow: hidden; background: var(--paper-line); }
.polaroid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.polaroid .cap { font: 400 1.4rem/1.15 var(--hand); margin: 10px 2px 0; min-height: 1.2em; white-space: pre-wrap; overflow-wrap: anywhere; }
.polaroid textarea.cap { display: block; width: calc(100% - 4px); resize: none; background: transparent; color: var(--paper-text); border: 0; border-bottom: 1px dashed var(--paper-line); border-radius: 0; padding: 2px 0; min-height: 2.5em; }
.polaroid textarea.cap:focus { outline: none; border-bottom-color: var(--accent); }
.polaroid textarea.cap::placeholder { color: rgba(41, 43, 58, .4); }
.polaroid .acts { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 12px 2px 0; }
.polaroid .btn.ghost { color: #6B4548; border-color: var(--paper-line); }
.polaroid .btn.pick { background: transparent; color: #6B4548; border: 1px solid #B77A68; }
.polaroid.picked .btn.pick { background: #6B4548; border-color: #6B4548; color: #FFFAF5; }
.polaroid .sent { font-size: .85rem; color: #55734f; font-weight: 600; }
.polaroid .sent::before { content: "✓ "; }
/* wybrane zdjęcie dostaje kawałek taśmy */
.polaroid.picked::before, .mini .polaroid:nth-child(3n + 1)::before {
  content: ""; position: absolute; top: -9px; left: 50%; width: 64px; height: 18px; margin-left: -32px; transform: rotate(-2.5deg);
  background: rgba(183, 122, 104, .5); clip-path: polygon(0 0, 4% 30%, 0 60%, 4% 100%, 100% 100%, 96% 65%, 100% 35%, 96% 0);
}
.mini .polaroid:nth-child(3n + 1)::before { background: rgba(216, 195, 180, .85); }
.reacts { display: flex; flex-direction: column; gap: 6px; margin: 10px 2px 0; }
.react { font: .86rem/1.35 var(--sans); padding: 1px 0 1px 9px; border-left: 2px solid var(--accent); overflow-wrap: anywhere; }
.polaroid .react { color: var(--paper-text); }
.ico-heart { display: inline-block; width: 1em; height: 1em; margin-right: 5px; vertical-align: -.12em; color: #b5483f; }
.ico-heart svg { width: 100%; height: 100%; display: block; fill: currentColor; }
.polaroid.enter { animation: settle .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
@keyframes settle { from { opacity: 0; transform: translateY(14px) rotate(calc(var(--r) - 2deg)); } to { opacity: 1; transform: rotate(var(--r)); } }
.polaroid.pop { animation: nudge .4s var(--ease); }
@keyframes nudge { 40% { transform: rotate(calc(var(--r) * -1)) translateY(-3px); } }

/* limit zdjęć */
.quota { display: flex; align-items: center; gap: 4px; margin-top: 20px; color: var(--muted); font-size: .86rem; }
.quota i { width: 16px; height: 4px; border-radius: 1px; background: var(--surface); transition: background .3s; }
.quota i.on { background: var(--accent); }
.quota span { margin-left: 8px; }

/* stany puste: tylko tekst */
.empty { margin-top: 30px; padding: 0; color: var(--muted); }
.empty b { display: block; margin-bottom: 4px; font: 500 1.25rem/1.25 var(--serif); color: var(--ink); }
.locked { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
.locked b { display: block; margin-bottom: 2px; font: 500 1.25rem/1.25 var(--serif); color: var(--ink); }

/* widok Wieczór */
.moment { margin: 22px 0 8px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.moment .at { font: 500 3.6rem/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.moment .when { margin-top: 12px; font-size: 1.1rem; }

/* parowanie */
.qrbox { background: #FFFAF5; border: 1px solid var(--line); border-radius: 10px; padding: 16px; margin: 16px 0; max-width: 260px; }
.qrbox svg { width: 100%; height: auto; display: block; }
.code { font: .78rem/1.5 ui-monospace, Menlo, Consolas, monospace; word-break: break-all; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; color: var(--muted); user-select: all; }
.scan { position: fixed; inset: 0; z-index: 50; background: #292B3A; color: #F5EFE8; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 20px; }
.scan video { width: min(92vw, 420px); aspect-ratio: 1; object-fit: cover; border-radius: 12px; border: 2px solid var(--accent); }
.scan .muted { color: rgba(245, 239, 232, .75); }
.scan .btn.ghost { color: #F5EFE8; border-color: rgba(245, 239, 232, .4); }

/* zakładki */
#tabs { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; justify-content: center; padding: 0 12px var(--sab); background: var(--bg); border-top: 1px solid var(--line); }
#tabs button { position: relative; flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 10px 0 8px; background: none; border: 0; color: var(--muted); font: 500 .74rem var(--sans); cursor: pointer; }
#tabs svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
#tabs button[aria-current="page"] { color: var(--ink); }
#tabs button[aria-current="page"]::before { content: ""; position: absolute; top: -1px; left: 22%; right: 22%; height: 2px; background: var(--accent); }

#toast { position: fixed; left: 50%; bottom: calc(80px + var(--sab)); transform: translate(-50%, 8px); z-index: 60; max-width: 88vw; padding: 10px 16px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: .9rem; opacity: 0; pointer-events: none; transition: opacity .25s, transform .3s var(--ease); }
#toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- wspólny wieczór (pełny ekran) ---------- */
.no-scroll { overflow: hidden; }
.session { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; overflow-y: auto; background: var(--bg); padding: calc(14px + var(--sat)) 20px calc(18px + var(--sab)); animation: fade-in .35s ease both; }
@keyframes fade-in { from { opacity: 0; } }
.s-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.stars { display: flex; align-items: flex-start; }
.st { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 64px; }
.st small { font-size: .72rem; color: var(--muted); }
.star { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--surface); background: transparent; transition: background .5s, border-color .5s; }
.star.on { background: var(--accent); border-color: var(--accent); }
.thread { width: 52px; height: 1px; margin-top: 5px; background: var(--surface); transition: background .5s; }
.thread.on { background: var(--accent); }
.s-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 18px 0 90px; }
.s-body h2 { margin: 6px 0 8px; }
.s-body p { max-width: 30ch; }
.s-time { font: 500 4rem/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--ink); }
.s-status { min-height: 3em; }
.s-progress { font: 500 1rem var(--serif); color: var(--muted); margin-bottom: 14px; }
.done { display: flex; flex-direction: column; align-items: center; }
.done .btn { margin-top: 12px; }

/* zapieczętowana karta, która obraca się po dotknięciu */
.deckwrap { position: relative; width: min(78vw, 320px); margin: 0 auto; }
.deckcard { position: absolute; inset: 0; border-radius: 2px; background: var(--paper); box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 6px 12px -6px rgba(var(--sh), .4); }
.deckcard.g1 { transform: translate(6px, 6px) rotate(2.5deg); opacity: .85; }
.deckcard.g2 { transform: translate(-6px, 11px) rotate(-3deg); opacity: .6; }
.flip { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5.3; padding: 0; border: 0; background: none; perspective: 1300px; cursor: pointer; color: var(--paper-text); }
.flip-inner { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform .9s cubic-bezier(.45, .05, .25, 1); }
.flip.open .flip-inner { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 2px; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: var(--paper); box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 14px 26px -12px rgba(var(--sh), .55); }
.face.sealed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: #D8C3B4; color: #5b4a45; font-size: .85rem; }
.face.sealed::before { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(107, 69, 72, .4); }
.face.sealed .mark { font: 500 2rem/1 var(--serif); letter-spacing: -.01em; color: #6B4548; padding-bottom: 8px; border-bottom: 1px solid rgba(107, 69, 72, .4); }
.face.photo { transform: rotateY(180deg); padding: 10px 10px 14px; display: flex; flex-direction: column; color: var(--paper-text); }
.face.photo .ph { flex: 1; min-height: 0; overflow: hidden; background: var(--paper-line); }
.face.photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.flip.open .face.photo img { animation: develop 1.8s ease-out .4s both; }
@keyframes develop { from { filter: sepia(.7) brightness(.82); } to { filter: none; } }
.face.photo .cap { font: 400 1.4rem/1.15 var(--hand); margin: 10px 2px 2px; min-height: 2.4em; text-align: left; overflow-wrap: anywhere; opacity: 0; }
.flip.open .face.photo .cap { animation: write 1s ease 1s both; }
@keyframes write { from { opacity: 0; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
.card-in { animation: card-in .55s var(--ease) both; }
@keyframes card-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

.controls { width: min(92vw, 400px); margin: 22px auto 0; display: flex; flex-direction: column; gap: 12px; animation: card-in .5s var(--ease) both; }
.react-row { display: flex; gap: 8px; align-items: center; }
.react-row input { flex: 1; min-width: 0; }
.btn.round { width: 46px; padding: 0; flex: none; color: #b5483f; border-color: var(--surface); }
.btn.round .ico-heart { margin: 0; width: 1.2rem; height: 1.2rem; }
.btn.round[aria-pressed="true"] { background: rgba(181, 72, 63, .12); border-color: #b5483f; }
.echo { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.react.mine { padding: 1px 9px 1px 0; border-left: 0; border-right: 2px solid var(--btn); text-align: right; color: var(--text); }
.floaty { position: fixed; z-index: 70; width: 1.6rem; height: 1.6rem; color: #b5483f; pointer-events: none; animation: floatup 1.6s ease-out forwards; }
.floaty .ico-heart { width: 100%; height: 100%; margin: 0; }
@keyframes floatup { from { opacity: 1; transform: translate(-50%, 0); } to { opacity: 0; transform: translate(-50%, -120px); } }
.s-bubbles { position: fixed; left: 16px; right: 16px; bottom: calc(86px + var(--sab)); display: flex; flex-direction: column; gap: 8px; pointer-events: none; z-index: 5; }
.bubble { display: flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); font-size: .9rem; text-align: left; animation: bubble 7s ease both; }
.bubble img { width: 42px; height: 42px; border-radius: 2px; object-fit: cover; flex: none; }
@keyframes bubble { 0% { opacity: 0; transform: translateY(12px); } 6% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- linia czasu ---------- */
.tl { position: relative; margin-top: 24px; padding-left: 24px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 0; width: 1px; background: var(--surface); }
.tl-item { position: relative; margin-bottom: 38px; animation: card-in .55s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms); }
.tl-item::before { content: ""; position: absolute; left: -24px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.tl-meta { margin: 0 0 4px; }
.who { margin: 16px 0 12px; font-size: .84rem; color: var(--muted); }
.mini { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.mini .polaroid { padding: 7px 7px 10px; cursor: pointer; }
.mini .cap { font-size: 1.1rem; margin: 6px 1px 0; }
.mini .react { font-size: .76rem; }
.lightbox { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: 20px; background: rgba(27, 28, 38, .82); animation: fade-in .25s ease both; overflow-y: auto; }
.lb-card { width: min(92vw, 400px); animation: card-in .45s var(--ease) both; }

.theme-anim, .theme-anim *, .theme-anim *::before, .theme-anim *::after { transition: background-color .4s ease, color .4s ease, border-color .4s ease !important; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* ===== Animacje (przywrócone) i cząsteczki ===== */
:root { --glow: .3; --glow-rgb: 183, 122, 104; --spring: cubic-bezier(.25, 1.35, .45, 1); }
:root[data-theme="dark"] { --glow-rgb: 201, 139, 121; }
body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(90% 42% at 50% -6%, rgba(var(--glow-rgb), calc(var(--glow) * .32)), transparent 72%); animation: lamp 9s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: .55; transform: scale(1.05); } }
.app { position: relative; z-index: 1; }
#particles { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 45; pointer-events: none; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#top h1 { animation: rise .9s var(--spring) both; }
.hero .when { animation: rise .8s var(--spring) .1s both; }
.pill[data-s="connecting"] i { animation-duration: 1s; }
.pill[data-s="online"] i { animation: ring 2.8s ease-out infinite; }
@keyframes ring { 0% { box-shadow: 0 0 0 0 rgba(127, 154, 125, .6); } 70%, 100% { box-shadow: 0 0 0 9px rgba(127, 154, 125, 0); } }
.btn { transition: transform .25s var(--spring), filter .2s; }
.btn:active { transform: scale(.95); }
.iconbtn svg { animation: turn .7s var(--spring); }
@keyframes turn { from { transform: rotate(-80deg) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* polaroidy: osiadają, kołyszą się po wyborze, wybrane świecą */
.polaroid.enter { animation: settle .8s var(--spring) both; animation-delay: calc(var(--i, 0) * 90ms); }
@keyframes settle { from { opacity: 0; transform: translateY(22px) rotate(calc(var(--r) - 5deg)) scale(.94); } to { opacity: 1; transform: translateY(0) rotate(var(--r)) scale(1); } }
.polaroid.pop { animation: wiggle .55s var(--spring); }
@keyframes wiggle { 30% { transform: rotate(calc(var(--r) * -1 - .8deg)) scale(1.03); } 65% { transform: rotate(calc(var(--r) + .6deg)) scale(1.01); } }
.polaroid.picked::after { content: ""; position: absolute; inset: -3px; border-radius: 4px; pointer-events: none; box-shadow: 0 0 0 2px var(--accent), 0 0 30px rgba(var(--glow-rgb), .5); animation: halo 3.6s ease-in-out infinite; }
@keyframes halo { 50% { opacity: .45; } }
.polaroid .sent { animation: pop-in .6s var(--spring) both; }
@keyframes pop-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.react { animation: pop-in .5s var(--spring) both; }
.quota i { transition: background .3s, transform .45s var(--spring); }
.quota i.on { transform: scaleY(1.7); }

/* puste stany i zamknięte zdjęcia: stosik polaroidów unosi się w miejscu */
.stack { display: flex; justify-content: center; margin-bottom: 16px; }
.stack span { width: 52px; height: 64px; margin: 0 -8px; border-radius: 3px; background: var(--paper); box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 6px 14px rgba(var(--sh), .25); animation: bob 4.4s ease-in-out infinite; }
.stack span:nth-child(1) { rotate: -8deg; }
.stack span:nth-child(2) { rotate: 2deg; background: var(--paper-line); animation-delay: -1.4s; }
.stack span:nth-child(3) { rotate: 9deg; animation-delay: -2.8s; }
@keyframes bob { 50% { translate: 0 -6px; } }
.empty, .locked { margin-top: 24px; padding: 26px 22px; text-align: center; border-radius: 16px; }
.empty { border: 1px dashed var(--surface); }
.locked { border: 1px solid var(--line); background: var(--card); }
.empty b, .locked b { text-align: center; }

/* wspólny wieczór: poświata, gwiazdy, pulsująca pieczęć */
.session::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(80% 50% at 50% 12%, rgba(var(--glow-rgb), .28), transparent 70%); animation: lamp 9s ease-in-out infinite; }
:root[data-theme="dark"] .session::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .8; animation: twinkle 5s ease-in-out infinite;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, #f5efe8, transparent), radial-gradient(1.5px 1.5px at 78% 12%, #f5efe8, transparent),
    radial-gradient(1px 1px at 40% 8%, #f5efe8, transparent), radial-gradient(1.5px 1.5px at 90% 40%, #f5efe8, transparent),
    radial-gradient(1px 1px at 6% 55%, #f5efe8, transparent), radial-gradient(1px 1px at 64% 30%, #f5efe8, transparent);
}
.session > * { position: relative; z-index: 1; }
@keyframes twinkle { 50% { opacity: .35; } }
.star.on { box-shadow: 0 0 14px 4px rgba(var(--glow-rgb), .7); animation: twinkle 3.2s ease-in-out infinite; }
.thread.on { box-shadow: 0 0 8px rgba(var(--glow-rgb), .8); }
.lamp-orb { position: relative; width: 200px; height: 200px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(var(--glow-rgb), .6), rgba(var(--glow-rgb), .12) 60%, transparent 72%); animation: orb 4.5s ease-in-out infinite; }
.lamp-orb .s-time { font-size: 2.7rem; }
@keyframes orb { 50% { transform: scale(1.14); opacity: .75; } }
.flip-inner { transition: transform 1.05s var(--spring); }
.face.sealed { animation: wobble 4s ease-in-out infinite; }
@keyframes wobble { 0%, 100% { transform: rotate(-.6deg); } 50% { transform: rotate(.6deg); } }
.seal { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; color: #FFFAF5; background: radial-gradient(circle at 35% 30%, #cf9482, #8f4f46); box-shadow: 0 6px 14px rgba(110, 50, 40, .45), inset 0 -4px 8px rgba(0, 0, 0, .15); animation: heartbeat 2.6s ease-in-out infinite; }
.seal .ico-heart { width: 2rem; height: 2rem; margin: 0; color: #FFFAF5; }
@keyframes heartbeat { 0%, 60%, 100% { transform: scale(1); } 15% { transform: scale(1.1); } 30% { transform: scale(1); } 42% { transform: scale(1.07); } }
.flip.open .face.photo img { animation: develop 2.4s ease-out .5s both; }
@keyframes develop { from { filter: sepia(1) brightness(.75) blur(3px); } to { filter: none; } }
.card-in { animation: card-in .8s var(--spring) both; }
@keyframes card-in { from { opacity: 0; transform: translateX(46px) rotate(4deg) scale(.95); } to { opacity: 1; transform: none; } }
.controls { animation: rise .7s var(--spring) both; }
.floaty { animation: floatup 1.7s ease-out forwards; }
@keyframes floatup { from { opacity: 1; transform: translate(-50%, 0) scale(.8); } to { opacity: 0; transform: translate(-50%, -140px) scale(1.5); } }
.bubble { animation: bubble 7s ease both; box-shadow: 0 10px 24px rgba(var(--sh), .22); }
@keyframes bubble { 0% { opacity: 0; transform: translateY(16px) scale(.95); } 6% { opacity: 1; transform: none; } 90% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }

/* zakładki, powiadomienia, linia czasu */
#tabs button[aria-current="page"] svg { stroke: var(--accent); fill: rgba(183, 122, 104, .18); animation: hop .5s var(--spring); }
@keyframes hop { 40% { translate: 0 -5px; } }
#toast { transform: translate(-50%, 24px) scale(.9); transition: opacity .25s, transform .45s var(--spring); }
#toast.show { transform: translate(-50%, 0) scale(1); }
.tl-item { animation: rise .8s var(--spring) both; animation-delay: calc(var(--i, 0) * 120ms); }
.tl-item::before { box-shadow: 0 0 12px rgba(var(--glow-rgb), .6); }
.lb-card { animation: card-in .6s var(--spring) both; }
@media (prefers-reduced-motion: reduce) { #particles { display: none; } }

/* ===== poprawki: przyciski karty, QR i kod ===== */
.polaroid .acts { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 12px 2px 0; }
.polaroid .acts .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.polaroid .acts .btns.one { grid-template-columns: 1fr; }
.polaroid .acts .btn { min-height: 42px; width: 100%; padding: 8px 10px; font-size: .88rem; }
.polaroid .btn.del { color: #9a4a4a; border-color: #e3c3bd; }
.polaroid .btn.del:hover { background: rgba(154, 74, 74, .08); }
.lb-card .acts { flex-direction: row; justify-content: space-between; align-items: center; }
.lb-card .acts .btn { width: auto; }
.paircard { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: 10px; }
.qrbox { width: 100%; max-width: 260px; margin: 12px auto; }
.code-label { margin: 16px 0 10px; font-size: .88rem; color: var(--muted); }
.code { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; max-width: 330px; padding: 16px 18px; font: 500 1.08rem/1.35 ui-monospace, Menlo, Consolas, monospace; letter-spacing: .08em; color: var(--text); text-align: center; word-break: normal; user-select: all; }
.code .cg { display: inline-block; }

/* ===== logo w nagłówku ===== */
:root { --logo-l: #6B4548; --logo-r: #B77A68; --logo-c: #B77A68; --logo-s: #B77A68; }
:root[data-theme="dark"] { --logo-l: #D8B8A8; --logo-r: #E8D2C4; --logo-c: #F5EFE8; --logo-s: #C98B79; }
#top h1 { display: flex; align-items: center; gap: 9px; }
.logo { width: 30px; height: auto; flex: none; display: block; }
.logo .ll { fill: var(--logo-l); } .logo .lr { fill: var(--logo-r); } .logo .lc { fill: var(--logo-c); } .logo .ls { fill: var(--logo-s); }

/* ===== poczekalnia: dwa serduszka zamiast kółek ===== */
.star { width: 26px; height: 24px; border: 0; border-radius: 0; background: none; box-shadow: none; display: block; color: var(--surface); transition: color .6s, filter .6s; }
.star svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; transition: fill .6s; }
.star.on { background: none; box-shadow: none; color: var(--accent); filter: drop-shadow(0 0 6px rgba(var(--glow-rgb), .85)); animation: heartbeat 2.6s ease-in-out infinite; }
.star.on svg { fill: currentColor; }
#st-peer.on { animation-delay: -.5s; }
.thread { margin-top: 12px; }

.code { gap: 8px 16px; font-size: 1rem; letter-spacing: .06em; }
.code .cg { text-align: center; }

/* ===== poprawki po przeglądzie zrzutów ===== */
button { font-family: inherit; }
.flip, .flip * { font-family: var(--sans); }
h2, .hero .when, .moment .when, .empty b, .locked b { text-wrap: balance; }
.polaroid .btn.del { color: #9a4a4a; border-color: rgba(154, 74, 74, .45); }

/* ---- serca w poczekalni, linia między nimi, książka ---- */
.duo { display: flex; align-items: flex-start; justify-content: center; width: min(88vw, 360px); margin: 0 auto 8px; }
.duo-h { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 84px; }
.duo-h small { color: var(--muted); font-size: .78rem; }
.big-heart { display: block; width: 76px; height: 70px; color: var(--surface); transition: color .8s, filter .8s; }
.big-heart svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linejoin: round; transition: fill .8s; }
.big-heart.on { color: var(--accent); filter: drop-shadow(0 0 14px rgba(var(--glow-rgb), .8)); animation: heartbeat 2.6s ease-in-out infinite; }
.big-heart.on svg { fill: currentColor; }
.big-heart.solo { width: 112px; height: 104px; margin-bottom: 10px; }
.duo-line { position: relative; flex: 1; height: 2px; margin-top: 35px; }
.duo-line::before { content: ""; position: absolute; inset: 0; background: var(--accent); box-shadow: 0 0 10px rgba(var(--glow-rgb), .9); border-radius: 2px; transform: scaleX(0); transform-origin: left; }
.duo-line::after { content: ""; position: absolute; inset: 0; background: var(--surface); opacity: .6; border-radius: 2px; z-index: -1; }
.duo.on .duo-line::before { animation: draw 1.5s cubic-bezier(.5, 0, .3, 1) both; }
.duo-line .dot { position: absolute; left: 0; top: -4px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #FFFAF5; box-shadow: 0 0 12px 4px rgba(var(--glow-rgb), .95); opacity: 0; }
.duo.on .duo-line .dot { animation: travel 1.5s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes travel { 0% { left: 0; opacity: 1; } 90% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
.s-time.sm { font-size: 2.2rem; margin-top: 10px; }
.s-body { transition: opacity .7s ease; }
.s-body.fade-out { opacity: 0; }
.s-body.fresh { animation: fade-in .9s ease both; }
.book { position: absolute; inset: 0; perspective: 1500px; transform-style: preserve-3d; }
.book > .face.photo { transform: none; backface-visibility: visible; -webkit-backface-visibility: visible; }
.book > .face.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 28%); opacity: 0; }
.flip.open .book > .face.photo::after { animation: spine 1.6s ease .1s both; }
@keyframes spine { 0% { opacity: 1; } 100% { opacity: 0; } }
.cover { position: absolute; inset: 0; transform-origin: left center; transform-style: preserve-3d; }
.cover > .face { box-shadow: 0 1px 1px rgba(0, 0, 0, .1), 0 14px 26px -12px rgba(var(--sh), .55); }
.cover > .face.sealed { border-left: 5px solid #B99F8E; }
.cover > .face.inside { transform: rotateY(180deg); background: #E6D6C8; }
.flip.open .cover { animation: cover-open 1.5s cubic-bezier(.5, .05, .25, 1) both; }
.flip.open .face.sealed { animation: none; }
@keyframes cover-open { 0% { transform: rotateY(0); opacity: 1; } 65% { transform: rotateY(-115deg); opacity: 1; } 100% { transform: rotateY(-172deg); opacity: 0; } }
.flip.open .face.photo img { animation: develop 2.2s ease-out .9s both; }
.flip.open .face.photo .cap { animation: write 1s ease 1.6s both; }

/* sygnał: druga osoba wybrała zdjęcia */
.peer-out { display: flex; align-items: center; gap: 12px; margin-top: 16px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-align: left; animation: card-in .55s var(--ease) both; }
.peer-out .ico-heart { flex: none; width: 1.5rem; height: 1.5rem; margin: 0; color: var(--accent); animation: heartbeat 2.6s ease-in-out infinite; }
.peer-out small { display: block; margin-top: 2px; color: var(--muted); }
#tabs button.badge::after { content: ""; position: absolute; top: 8px; left: calc(50% + 8px); width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(var(--glow-rgb), .9); animation: heartbeat 2.6s ease-in-out infinite; }

/* pastylka statusu: kolor dla każdego stanu, "offline" jest spokojne i puste, nie czeka z pulsowaniem */
.pill { cursor: pointer; }
.pill[data-s="waiting"] i { background: transparent; box-shadow: inset 0 0 0 1.5px var(--muted); animation: none; }
.pill[data-s="off"] i { background: var(--danger); animation: none; }
.pill[data-s="unpaired"] i { background: var(--surface); animation: none; }
.pill[data-s="connecting"] i { background: var(--accent); }