/* ═══ TOKENY ═══ */
:root {
  --bg-1:#FDF7F1; --bg-2:#F8E4E9; --bg-3:#F0CBD7;
  --paper:#FFFDFA; --paper-inner:#FDF3F5;
  --accent:#C9647F; --accent-deep:#A9576F; --accent-soft:#DFA9B8;
  --dots-bg:#E6B9C6; --card-line:#E9C9D2;
  --ink:#4A3A3E; --ink-2:#5C464B; --ink-mute:#96707B; --ink-wish:#8C4E63;
  --shadow-card:0 12px 24px rgba(140,78,99,.20);
  --shadow-btn:0 8px 18px rgba(201,100,127,.35);
  --ease:cubic-bezier(.2,.8,.2,1);
  --glow-x:22%;
}

*,*::before,*::after { box-sizing:border-box; }
html,body { margin:0; height:100%; }
body { font-family:Karla,system-ui,sans-serif; color:var(--ink); -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:var(--accent-deep); }
a:hover { color:var(--ink-wish); }
:focus-visible { outline:2px solid var(--accent-deep); outline-offset:3px; border-radius:6px; }

/* ═══ TŁO — trzy warstwy, wspólne dla wszystkich widoków ═══ */
.stage {
  position:relative; min-height:100dvh; overflow:hidden;
  background:linear-gradient(168deg,var(--bg-1) 0%,var(--bg-2) 46%,var(--bg-3) 100%);
}
.stage__glow, .stage__grain { position:absolute; inset:0; pointer-events:none; }
.stage__glow {
  background:radial-gradient(60% 42% at var(--glow-x) 22%, rgba(255,255,255,.85), rgba(255,255,255,0) 70%);
  transition:background 1.2s ease;
}
.stage__grain {
  opacity:.5;
  background-image:radial-gradient(var(--dots-bg) 1.1px, transparent 1.2px);
  background-size:22px 22px;
}

/* ═══ WIDOKI ═══ */
.view { position:relative; min-height:100dvh; box-sizing:border-box; }
.view[hidden] { display:none; }
.view--login,.view--prize {
  display:flex; flex-direction:column; align-items:center;
  padding:clamp(16px,4vh,40px) 22px; max-width:440px; margin-inline:auto; gap:clamp(12px,2.5vh,22px);
}
.view--login { justify-content:space-between; }
.view--prize { justify-content:center; text-align:center; gap:16px; }
.view--quiz {
  display:flex; flex-direction:column; max-width:440px; margin-inline:auto;
  padding:clamp(8px,1.5vh,16px) 20px clamp(10px,2vh,20px); min-height:100dvh; box-sizing:border-box;
}

/* ═══ TYPOGRAFIA ═══ */
.display { font:500 clamp(30px,8.6vw,34px)/1.14 'Playfair Display',serif; margin:0; text-wrap:pretty; }
.lead { font-size:14.5px; line-height:1.55; color:var(--ink-2); margin:0; }
.lead strong { color:var(--ink-wish); font-weight:600; }
.eyebrow { margin:0; font-size:11.5px; letter-spacing:.22em; text-transform:uppercase; color:var(--ink-mute); }
.script { margin:0; font:italic 500 15px 'Playfair Display',serif; color:var(--accent-deep); }
.micro { margin:0; font-size:13px; color:var(--ink-mute); }
.form-title { margin:0; font:500 26px 'Playfair Display',serif; color:var(--ink-wish); }
.form-error { margin:0; font-size:13px; color:var(--accent-deep); }

.monogram {
  width:62px; height:62px; border-radius:99px; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--accent),var(--accent-deep));
  color:#FFF6F8; font:26px 'Playfair Display',serif;
  box-shadow:0 10px 22px rgba(169,87,111,.35);
}
.monogram--sm { width:40px; height:40px; font-size:18px; box-shadow:none; }

.icon { width:19px; height:19px; flex:none; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }
.icon--check { width:30px; height:30px; stroke-width:1.6; }

/* ═══ LOGOWANIE ═══ */
.login__brand { display:flex; flex-direction:column; align-items:center; gap:14px; }
/* .login__lead — celowo NIE ma stylu w bazowej (mobile) sekcji: ukryte na mobile,
   pokazane wyłącznie na desktopie w media query niżej. Mobile ma zostać bez zmian. */
.login__lead { display:none; }
.login__form { display:flex; flex-direction:column; gap:12px; width:100%; }
.login__form .form-title { display:none; }
.login__actions { display:flex; flex-direction:column; align-items:center; gap:12px; margin-top:6px; }
.login__dots { opacity:.5; }

/* Delikatny, przezroczysty bukiet róż w tle — WYŁĄCZNIE na desktopie (patrz media query),
   mobile pozostaje bez zmian, ukryte tutaj celowo */
.login__bouquet {
  display:none; opacity:.35; pointer-events:none;
  width:min(70vw,320px); margin:8px auto 0;
}
.login__bouquet img { width:100%; height:auto; display:block; }

.login__countdown {
  margin:2px 0 0; font:600 13px Karla,sans-serif; letter-spacing:.03em; color:var(--accent-deep);
}

.lead__strong { font-weight:700; }

.display__balon { display:inline-block; width:0.5em; height:auto; vertical-align:-0.12em; margin-left:0.05em; }

.field-group { display:flex; flex-direction:column; gap:7px; }
.field-label { font:600 11.5px Karla,sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-mute); }
.field {
  width:100%; font:16px Karla,sans-serif; color:var(--ink);
  padding:15px 16px; border:1px solid var(--card-line);
  border-radius:14px 14px 16px 6px;
  background:rgba(255,253,250,.86); box-shadow:inset 0 1px 0 #fff; outline:none;
}
.field:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(201,100,127,.18); }
.field--code { letter-spacing:.3em; }
.field--shake { animation:shake .24s ease; }
@keyframes shake { 25%{transform:translateX(-5px)} 75%{transform:translateX(5px)} }

.hint {
  display:flex; gap:9px; align-items:flex-start; margin:2px 0 0;
  font:italic 500 14px/1.4 'Playfair Display',serif; color:var(--ink-wish);
}
.hint .icon { color:var(--accent-deep); margin-top:2px; }

/* ═══ PRZYCISKI ═══ */
.btn {
  font:600 14px Karla,sans-serif; letter-spacing:.06em; text-transform:uppercase;
  color:#FFF6F8; background:var(--accent); border:0; border-radius:99px;
  padding:16px 30px; min-height:46px; width:100%; cursor:pointer;
  box-shadow:var(--shadow-btn); transition:transform .2s ease, opacity .35s ease;
}
.btn-ghost {
  font:600 13.5px Karla,sans-serif; color:var(--accent-deep);
  background:rgba(255,253,250,.6); border:1px solid var(--accent-soft);
  border-radius:99px; padding:14px 24px; min-height:46px; width:100%; cursor:pointer;
  transition:background .25s ease;
}
.link-reset {
  background:none; border:0; cursor:pointer; padding:0 0 2px;
  font:13px Karla,sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent-deep); border-bottom:1px solid var(--accent-soft);
}
@media (hover:hover) {
  .btn:hover { transform:translateY(-2px); }
  .btn-ghost:hover { background:rgba(255,253,250,.95); }
}

/* ═══ POLE ŻYCZEŃ — rzuca się w oczy, nad pytaniem ═══ */
.wishes {
  position:relative; display:flex; gap:12px; align-items:center;
  padding:clamp(10px,1.6vh,18px) 16px; min-height:56px;
  border-radius:20px 20px 24px 8px;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  box-shadow:0 14px 28px rgba(169,87,111,.38), inset 0 1px 0 rgba(255,255,255,.35);
  width:100%; flex:none;
}
.wishes__icon {
  flex:none; font-size:clamp(20px,4vh,30px); line-height:1;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.15));
  transition:opacity .3s ease, transform .3s ease;
}
.wishes__icon[data-fading="true"] { opacity:0; transform:scale(.7) rotate(-8deg); }
.wishes p {
  margin:0; font:italic 500 clamp(12.5px,2.4vh,15.5px)/1.4 'Playfair Display',serif; color:#FFF6F8;
  transition:opacity .4s ease;
}
.wishes p[data-fading="true"] { opacity:0; }

/* ═══ PASEK POSTĘPU ═══ */
.progress { display:flex; gap:5px; align-items:center; height:12px; }
.dot { width:7px; height:7px; border-radius:99px; background:var(--accent); opacity:.26; transition:all .35s ease; }
.dot[data-state="done"] { opacity:.95; }
.dot[data-state="current"] { width:11px; height:11px; opacity:1; }
.progress--idle .dot { opacity:.3 !important; width:7px !important; height:7px !important; }

/* ═══ QUIZ ═══ */
.quiz__top { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sidebar__brand { display:flex; align-items:center; gap:12px; }
.quiz {
  flex:1; display:flex; flex-direction:column; justify-content:flex-start;
  gap:clamp(8px,1.6vh,16px); padding:4px 0;
}
/* Wysokość pytania USTALONA na stałe (miejsce na max 2 linie tekstu) — identyczna
   na każdej z 15 stron niezależnie od długości pytania, żeby reszta układu
   (karty / okno odpowiedzi / puzzle) była zawsze w tym samym miejscu i rozmiarze. */
.question {
  margin:0; flex:none; height:clamp(46px,9.5vh,64px); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font:500 clamp(15px,2.8vh,20px)/1.18 'Playfair Display',serif;
  text-align:center; text-wrap:pretty;
}

/* Mobile: KARTY najpierw (pod pytaniem, wysokość STAŁA, ta sama na każdej stronie),
   potem OKNO ODPOWIEDZI (etykiety, wysokość = zawartość + 0.5cm marginesu góra/dół),
   potem PUZZLE na stałe zeskalowane do reszty przestrzeni — identyczne na każdej stronie.
   Desktop (≥960px, patrz media query niżej): 2 kolumny w rzędzie 40%/60%. */
.cards {
  display:flex; flex-direction:column;
  align-items:stretch; justify-items:stretch; gap:clamp(10px,1.8vh,16px);
}
.cards-row {
  flex:none; width:100%; height:clamp(160px,30vh,230px); display:flex; flex-direction:row;
  gap:clamp(10px,4vw,24px); align-items:stretch; justify-content:center; min-width:0;
}
.card-slot { flex:1; max-width:170px; display:flex; min-width:0; pointer-events:none; }
.card-slot .card { pointer-events:auto; }
.card {
  width:100%; padding:0; border:0; background:none; perspective:1000px;
  cursor:pointer; transition:transform .3s var(--ease);
  display:flex; align-items:stretch; justify-content:center;
}
.card:active { transform:translateY(-3px) scale(.99); }
@media (hover:hover) { .card:hover { transform:translateY(-8px); } }

.card__inner {
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .75s var(--ease), opacity .4s ease, filter .4s ease;
  border-radius:16px; box-shadow:var(--shadow-card);
}
.card__face,.card__back {
  position:absolute; inset:0; backface-visibility:hidden; border-radius:16px;
  overflow:hidden;
}
.card__face { background:var(--paper-inner); }
.card__art { width:100%; height:100%; }
.card__art img { width:100%; height:100%; object-fit:cover; display:block; }
.card__back {
  transform:rotateY(180deg); background:linear-gradient(160deg,var(--accent),var(--accent-deep));
  color:#FFF6F8; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.card__back em { font:italic 500 15px 'Playfair Display',serif; }

/* ═══ OKNO ODPOWIEDZI — osobne okno między kartami a puzzlami, wysokość zawartości + 0.5cm marginesu góra/dół ═══ */
.answers-window {
  flex:none; width:100%; box-sizing:border-box;
  display:flex; flex-direction:row; gap:clamp(10px,4vw,24px);
  padding:0.5cm 4px; align-items:stretch; justify-content:center;
}
.card-slot__label {
  flex:1; max-width:170px; margin:0; padding:10px 12px; text-align:center;
  display:flex; align-items:center; justify-content:center;
  font:600 12.5px/1.3 Karla,sans-serif; color:var(--ink-2);
  background:rgba(255,253,250,.85); border:1px solid var(--card-line);
  border-radius:12px 12px 14px 6px; box-shadow:inset 0 1px 0 #fff;
}

.card[data-state="wrong"] .card__inner { opacity:.5; filter:grayscale(.85); }
.card[data-state="right"] .card__inner { transform:rotateY(180deg); }
.card[data-state="right"] .card__inner { box-shadow:0 0 0 3px var(--accent), var(--shadow-card); }
.cards[data-locked="true"] .card { pointer-events:none; }

.quiz__next { min-height:42px; display:flex; justify-content:center; }
.quiz__next .btn { width:auto; opacity:0; pointer-events:none; padding:12px 26px; }
.quiz__next .btn[data-visible="true"] { opacity:1; pointer-events:auto; }

/* ═══ PUZZLE — na mobile pełna szerokość na górze, na desktopie trzecia kolumna obok kart.
   Wysokość STAŁA (nie flex:1 reagujący na resztę), żeby była identyczna na każdej stronie. ═══ */
.puzzle-slot { flex:none; width:100%; height:auto; display:flex; flex-direction:column; align-items:center; gap:6px; }
.puzzle-slot__label {
  flex:none; width:100%; margin:0; padding:9px 12px; text-align:center; box-sizing:border-box;
  font:600 12.5px/1.3 Karla,sans-serif; color:#FFF6F8;
  background:linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%);
  border-radius:12px 12px 14px 6px; box-shadow:0 6px 14px rgba(169,87,111,.3), inset 0 1px 0 rgba(255,255,255,.3);
}
.puzzle {
  position:relative; width:100%; height:auto;
  aspect-ratio:4/3;
  border-radius:16px; overflow:hidden;
  border:1px solid var(--card-line); background:var(--paper);
  box-shadow:var(--shadow-card), inset 0 0 0 5px var(--paper-inner);
}
.puzzle__img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.puzzle__overlay {
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
  text-align:center; padding:10px;
  background:linear-gradient(160deg, rgba(169,87,111,.55), rgba(169,87,111,.35));
  pointer-events:none;
}
.puzzle__overlay-title {
  font:600 clamp(11px,2.2vw,15px)/1.25 'Playfair Display',serif; color:#FFF6F8;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
}
.puzzle__overlay-sub {
  font:italic 500 clamp(10px,1.9vw,13px) 'Playfair Display',serif; color:#FFF0F3;
  text-shadow:0 2px 6px rgba(0,0,0,.25);
}
.puzzle__tiles {
  position:absolute; inset:0; z-index:3;
  display:grid; grid-template-columns:repeat(5,1fr); grid-template-rows:repeat(3,1fr);
}
.puzzle__tile {
  background:linear-gradient(160deg,var(--accent),var(--accent-deep));
  border:1px solid rgba(255,255,255,.25);
  transition:opacity .6s var(--ease), transform .6s var(--ease);
}
.puzzle__tile[data-revealed="true"] { opacity:0; transform:scale(1.15); pointer-events:none; }

/* ═══ REVEAL — ekran przejściowy: "Wszystkiego Najlepszego!" → animowane bilety ═══ */
.view--reveal {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:24px; padding:24px; max-width:460px; margin-inline:auto; text-align:center;
}
.reveal__headline {
  margin:0; font:600 clamp(34px,9vw,54px)/1.15 'Playfair Display',serif;
  color:var(--ink-wish); opacity:0; transform:scale(.85);
  animation:reveal-headline 1.1s var(--ease) forwards;
}
@keyframes reveal-headline {
  0% { opacity:0; transform:scale(.8); }
  55% { opacity:1; transform:scale(1.06); }
  100% { opacity:1; transform:scale(1); }
}
.reveal__ticket {
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; transform:translateY(18px);
  animation:reveal-ticket .8s var(--ease) forwards;
}
@keyframes reveal-ticket { to { opacity:1; transform:translateY(0); } }
.reveal__ticket-caption {
  margin:0; font:italic 500 16px 'Playfair Display',serif; color:var(--ink-wish);
}
.ticket-photo {
  width:min(300px,80vw); border-radius:16px; overflow:hidden;
  border:1px solid var(--card-line); background:var(--paper);
  box-shadow:0 16px 32px rgba(169,87,111,.28), inset 0 0 0 6px var(--paper-inner);
  animation:ticket-float 3.2s ease-in-out infinite;
}
.ticket-photo img { width:100%; display:block; }
@keyframes ticket-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
.reveal__ticket-info { display:flex; flex-direction:column; gap:2px; }
.reveal__ticket-title {
  margin:0 0 4px; font:600 18px 'Playfair Display',serif; color:var(--ink-wish); letter-spacing:.02em;
}
.reveal__ticket-info p { margin:0; font-size:13.5px; color:var(--ink-2); }
.reveal__ticket-sent {
  margin:6px 0 0; font:italic 500 14px 'Playfair Display',serif; color:var(--accent-deep);
}
@media (prefers-reduced-motion:reduce) {
  .reveal__headline, .reveal__ticket, .ticket-photo { animation:none; opacity:1; transform:none; }
}

.prize__wish { max-width:420px; margin:0 auto; width:100%; }
.prize__wish[hidden] { display:none; }

.wish-card {
  position:relative; display:flex; flex-direction:column; gap:14px;
  padding:32px 26px 26px; text-align:left;
  border-radius:22px 22px 26px 10px;
  background:linear-gradient(160deg, #FFF1F5 0%, #FCE1EA 55%, #F7CBDA 100%);
  border:1px solid var(--accent-soft);
  box-shadow:0 16px 32px rgba(169,87,111,.22), inset 0 1px 0 #fff;
}
.wish-card__icon {
  position:absolute; top:-16px; left:22px; font-size:28px;
  filter:drop-shadow(0 4px 6px rgba(140,78,99,.25));
}
.wish-card p {
  margin:0; font:italic 500 17.5px/1.6 'Playfair Display',serif; color:var(--ink-wish);
}
.wish-card__ps { color:var(--ink-2); font-style:normal; font-size:15px; }
.wish-card__signature { margin-top:4px; }

.ticket {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font:700 16px Karla,sans-serif; letter-spacing:.05em; text-transform:uppercase;
  color:#FFF6F8; text-decoration:none;
  padding:17px 28px; border-radius:99px; border:1px solid var(--accent-soft);
  background:var(--accent); transition:background .25s ease;
}
.ticket[hidden] { display:none; }
@media (hover:hover) { .ticket:hover { background:var(--accent-deep); } }

.ticket--blink { animation:ticket-blink 1.1s ease-in-out infinite; }
@keyframes ticket-blink {
  0%, 100% { background:var(--accent); box-shadow:0 0 0 0 rgba(201,100,127,.5); transform:scale(1); }
  50% { background:#E23F6B; box-shadow:0 0 0 10px rgba(226,63,107,.25); transform:scale(1.04); }
}
@media (prefers-reduced-motion:reduce) { .ticket--blink { animation:none; } }

.display--prize { font-size:30px; color:var(--ink-wish); }
.lead--prize { max-width:268px; }

/* ═══════════ DESKTOP ≥ 960 px ═══════════ */
@media (min-width:960px) {
  .stage__glow { background:radial-gradient(48% 62% at var(--glow-x) 30%, rgba(255,255,255,.88), rgba(255,255,255,0) 70%); }
  .stage__grain { background-size:24px 24px; opacity:.45; }

  .view--login {
    display:grid; grid-template-columns:1.05fr .95fr; grid-template-rows:auto 1fr auto;
    grid-template-areas:"brand form" "lead form" "dots form";
    max-width:none; padding:64px 72px; gap:0 48px; align-items:center; position:relative;
  }
  .login__brand { grid-area:brand; flex-direction:row; align-self:start; gap:14px; }
  .monogram { width:46px; height:46px; font-size:20px; }
  .login__lead { grid-area:lead; display:flex; flex-direction:column; text-align:left; max-width:520px; gap:22px; position:relative; z-index:1; }
  .display { font-size:62px; line-height:1.06; }
  .lead { font-size:19px; line-height:1.6; max-width:450px; }
  .lead__strong { font-size:21px; font-weight:800; }
  .lead__note { font-size:21px; font-weight:700; max-width:480px; }
  .login__countdown { font-family:Playfair Display,serif; font-weight:700; font-size:62px; line-height:1.06; letter-spacing:normal; margin-top:6px; }
  .login__dots { grid-area:dots; align-self:end; }
  /* Bukiet jako zwykły element pod tekstem lead, w tej samej kolumnie */
  .login__bouquet {
    display:block; align-self:flex-start;
    width:min(46%,360px); margin:8px 0 0; position:relative; z-index:0;
  }
  .login__form {
    grid-area:form; justify-self:center; align-self:center;
    max-width:420px; gap:18px;
    background:radial-gradient(72% 58% at 50% 40%, rgba(255,255,255,.92), rgba(255,255,255,0) 72%);
    padding:48px 0;
  }
  .login__form .form-title { display:block; }
  .field { padding:16px 18px; }
  .login__actions { flex-direction:row; flex-wrap:wrap; align-items:center; gap:14px; }
  .btn, .btn-ghost { width:auto; }
  .btn { padding:16px 34px; }
  .login__actions .micro { flex-basis:100%; }

  .view--quiz { max-width:920px; padding:clamp(20px,4vh,40px) 40px 2cm; height:100dvh; }
  .quiz { align-items:center; gap:clamp(12px,2.2vh,20px); }
  .wishes { max-width:700px; padding:20px 24px; }
  .wishes__icon { font-size:34px; }
  .wishes p { font-size:16.5px; }
  .question { font-size:clamp(24px,3.4vh,34px); max-width:760px; }
  /* Desktop: 2 sekcje w rzędzie — 40% Puzzle / 60% karty+odpowiedzi (kolumna: karty nad oknem odpowiedzi) */
  .cards {
    display:grid; grid-template-columns:40fr 60fr; grid-template-rows:auto auto;
    max-width:1100px; width:100%; margin-inline:auto; align-items:stretch; gap:max(1.2cm,20px) max(1.2cm,20px);
  }
  .puzzle-slot { grid-row:1 / 3; grid-column:1; height:auto; }
  .cards-row { grid-row:1; grid-column:2; flex-direction:row; height:clamp(160px,30vh,260px); }
  .answers-window { grid-row:2; grid-column:2; padding:0.5cm 4px; }
  .card__inner { border-radius:20px; box-shadow:0 18px 34px rgba(140,78,99,.22); }
  .card__face,.card__back { border-radius:20px; }
  .card-slot__label { font-size:14px; padding:12px 14px; }
  .puzzle-slot__label { font-size:14px; padding:12px 14px; }
  .puzzle { width:100%; height:auto; max-width:none; aspect-ratio:4/3; } /* desktop: proporcja bazowa, pełna szerokość kolumny */
  .card__back { gap:16px; }
  .card__back em { font-size:19px; }
  .icon--check { width:36px; height:36px; stroke-width:1.5; }
  .quiz__next { min-height:48px; }
  .quiz__next .btn { padding:14px 34px; }

  .puzzle__overlay-title { font-size:15px; }
  .puzzle__overlay-sub { font-size:13px; }
  .display--prize { font-size:48px; }
  .lead--prize { max-width:430px; font-size:17px; }
}

/* ═══ DOSTĘPNOŚĆ ═══ */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; }
}