:root {
  --gold: #c9a227;
  --ink: #2a2320;
  --bg: #fbf7f0;
  --accent: #b5476b;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ---------- Landing / codes ---------- */
.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 64px;
  text-align: center;
}

h1 {
  font-size: 2.2rem;
  margin: 0.2em 0 0.1em;
  color: var(--ink);
}
.subtitle {
  color: var(--accent);
  font-style: italic;
  margin-bottom: 1.6em;
}

.btn {
  display: inline-block;
  background: var(--gold);
  color: #fff;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 14px 28px;
  border: none;
  border-radius: 999px;
  margin: 8px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(201, 162, 39, 0.4);
}
.btn.secondary { background: var(--accent); box-shadow: 0 4px 14px rgba(181,71,107,0.4); }
.btn:active { transform: translateY(1px); }

.card {
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 16px;
  padding: 24px;
  margin: 18px 0;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
}

.note {
  font-size: 0.9rem;
  color: #7a7068;
  line-height: 1.5;
}

/* siatka kodów QR */
.codes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.qr-tile {
  background: #fff;
  border: 1px solid #eadfce;
  border-radius: 16px;
  padding: 18px;
}
.qr-tile canvas { width: 180px; height: 180px; image-rendering: pixelated; }
.qr-tile .cap { margin-top: 10px; font-weight: 600; }
.qr-tile .desc { font-size: 0.85rem; color: #7a7068; }

@media print {
  .no-print { display: none !important; }
  body { background: #fff; }
  .qr-tile { break-inside: avoid; }
}

/* ---------- AR ---------- */
body.ar {
  background: #000;
  overflow: hidden;
}
#view {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: block;
}
#cam { display: none; }

/* Scena z perspektywą — w niej żyje "naklejka" AR. */
#ar-stage {
  position: fixed;
  inset: 0;
  perspective: 800px;
  pointer-events: none;
  overflow: hidden;
}
#ar-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 240px;
  height: 240px;
  transform-origin: 0 0;
  transform-style: preserve-3d;
  opacity: 0;
  transition: opacity 0.15s ease;
}
#ar-content.visible { opacity: 1; }

/* delikatna ramka leżąca na kodzie */
#ar-content::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 4px solid rgba(201, 162, 39, 0.9);
  border-radius: 12px;
  box-shadow: 0 0 24px rgba(201, 162, 39, 0.6);
}

/* "magiczny" pulsujący pierścień leżący na markerze (płaszczyzna Z=0) */
#ar-content::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 170px;
  height: 170px;
  margin: -85px 0 0 -85px;
  border-radius: 50%;
  border: 3px solid rgba(255, 209, 102, 0.85);
  box-shadow: 0 0 30px rgba(255, 209, 102, 0.6);
  animation: ar-pulse 1.8s ease-out infinite;
}
@keyframes ar-pulse {
  0%   { transform: scale(0.55); opacity: 0.9; }
  100% { transform: scale(1.3); opacity: 0; }
}

/* Unoszący się obiekt 3D (środek markera). Każdy poziom ma jedną transformację:
   #ar-object  -> unoszenie (translateZ w górę i w dół)
   .ar-spin    -> obrót wokół osi Y (pełny lub wahadłowy dla strzałki)
   .ar-stack   -> kierunek strzałki (obrót w płaszczyźnie, rotateZ)
   .ar-layer   -> warstwy bryły (translateZ) dające wytłoczenie/grubość */
#ar-object {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  transform-style: preserve-3d;
  animation: ar-float 2.4s ease-in-out infinite;
}
@keyframes ar-float {
  0%, 100% { transform: translateZ(70px); }
  50%      { transform: translateZ(125px); }
}
/* Para tańczy NA planszy znacznika — bez wysokiego unoszenia. */
#ar-object.couple {
  animation: none;
  transform: translateZ(0);
}

.ar-spin {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  animation: ar-spin 4.5s linear infinite;
}
.ar-spin.wobble { animation: ar-wobble 2.6s ease-in-out infinite; }
@keyframes ar-spin {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes ar-wobble {
  0%, 100% { transform: rotateY(-26deg); }
  50%      { transform: rotateY(26deg); }
}

.ar-stack {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
}

.ar-layer {
  position: absolute;
  left: 0;
  top: 0;
  width: 110px;
  height: 110px;
  margin: -55px 0 0 -55px;
  text-align: center;
  font-size: 104px;
  line-height: 110px;
  transform: translateZ(var(--z, 0px));
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  will-change: transform;
}

/* ----- Tańcząca para młoda ----- */
.ar-couple {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  /* taneczny obrót pary WOKÓŁ OSI Z znacznika (płasko w płaszczyźnie taga) */
  animation: ar-turn 5s linear infinite;
}
@keyframes ar-turn {
  from { transform: rotateZ(0deg); }
  to   { transform: rotateZ(360deg); }
}
.ar-slot {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
}
/* większy promień orbity — para wiruje szeroko wokół środka znacznika */
.ar-slot.left  { transform: translateX(-105px); }
.ar-slot.right { transform: translateX(105px); }
.ar-dancer {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  animation: ar-dance 1.1s ease-in-out infinite; /* podskok w górę + lekki obrót */
}
.ar-slot.right .ar-dancer { animation-delay: -0.55s; } /* druga osoba w przeciwfazie */
/* Podskok = translateZ (wzdłuż normalnej taga = "w górę"), obrót ciała = rotateZ.
   Mały, żeby tancerze trzymali się planszy (taniec NA tagu, nie nad nim). */
@keyframes ar-dance {
  0%, 100% { transform: translateZ(0px) rotateZ(-12deg); }
  50%      { transform: translateZ(26px) rotateZ(12deg); }
}
/* Postawienie figury PIONOWO NA powierzchni znacznika:
   rotateX(-90deg) -> figura stoi (wzrok prostopadły do osi Z taga),
   translateZ(90px) -> przesuwa stopy na płaszczyznę taga (z=0), głowa w górę. */
.ar-stand {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform: translateZ(90px) rotateX(-90deg);
}
/* DUŻO większe figury pary młodej */
.couple .ar-layer {
  width: 180px;
  height: 180px;
  margin: -90px 0 0 -90px;
  font-size: 168px;
  line-height: 180px;
}

#ar-label {
  position: absolute;
  left: 50%;
  bottom: -14px;
  transform: translate(-50%, 0) translateZ(60px);
  white-space: nowrap;
  background: rgba(42, 35, 32, 0.88);
  color: #fff;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 22px;
  font-weight: 700;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}

#status {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 24px;
  text-align: center;
  color: #fff;
  font-size: 0.95rem;
  text-shadow: 0 1px 4px #000;
  pointer-events: none;
}

#start-btn {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  color: #fff;
  text-shadow: 0 1px 4px #000;
  z-index: 5;
}
.topbar a { color: #fff; text-decoration: none; font-size: 0.9rem; }