/* Desembrulha — cartões finais (revelação, criador, galeria). Ver js/cards.js. */

/* ------------------------------ revelação ------------------------------ */
#cardStep.cz-on, .sheet.letter.cz-on {
  width: min(460px, 100%, calc((100vh - 40px) * .8));
  width: min(460px, 100%, calc((100dvh - 40px) * .8));
  background: none; box-shadow: none; padding: 0; animation: none; text-align: center;
}
.cz-on > .to, .cz-on > .msg, .cz-on > .from, .cz-on > .stats { display: none !important; }
.cz-on .actions { margin-top: 26px; gap: 12px; }
.cz-on .actions .btn { font-size: 17px; padding: 14px 18px; }
.cz-on .btn.ghost { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.25); }
.cz-on .btn.ghost:active { transform: translateY(1px); }
.btn.cz-save {
  background: linear-gradient(180deg, #fff6dc, #ffd98a); color: #3b2508;
  box-shadow: 0 5px 0 #c9922c, 0 12px 30px rgba(255,207,90,.25);
}
.btn.cz-save:disabled { opacity: .7; cursor: progress; }

.cz-stage { position: relative; width: 100%; aspect-ratio: 4 / 5; perspective: 1400px; }
.cz-card {
  position: absolute; inset: 0; z-index: 2; border-radius: 10px; overflow: hidden; cursor: pointer;
  box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 30px 70px rgba(0,0,0,.55), 0 8px 18px rgba(0,0,0,.35);
  transform: translateY(2%) scale(.5); transform-origin: 50% 50%;
  transition: transform .85s cubic-bezier(.3,.9,.3,1), box-shadow .6s;
}
.cz-card canvas { display: block; width: 100%; height: 100%; }
.cz-envpart {
  position: absolute; left: -2%; right: -2%; top: 22%; height: 56%;
  transition: transform .75s cubic-bezier(.5,0,.75,0), opacity .6s;
}
.cz-back { z-index: 1; border-radius: 10px; background: var(--env-liner); box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.cz-back::after { /* forro com padrão discreto */
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: .18;
  background: repeating-linear-gradient(45deg, #fff 0 2px, transparent 2px 14px);
}
.cz-front {
  z-index: 3; border-radius: 10px;
  background:
    linear-gradient(to top right, transparent 49.6%, rgba(0,0,0,.10) 50%, transparent 50.6%) left bottom / 50% 100% no-repeat,
    linear-gradient(to top left, transparent 49.6%, rgba(0,0,0,.10) 50%, transparent 50.6%) right bottom / 50% 100% no-repeat,
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.08)),
    var(--env-paper);
  clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%);
}
.cz-flap {
  z-index: 4; top: 22%; height: calc(56% * .6);
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.16)), var(--env-paper);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0; transform: rotateX(0deg);
  transition: transform .6s cubic-bezier(.4,0,.2,1), opacity .4s;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.2));
}
.cz-seal-wrap { z-index: 5; pointer-events: none; }
.cz-seal {
  position: absolute; left: 50%; top: 57%; width: 17%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; font-size: clamp(16px, 5vw, 24px); color: var(--env-seal-ink);
  background: radial-gradient(circle at 38% 32%, rgba(255,255,255,.45), transparent 42%), var(--env-seal);
  box-shadow: 0 0 0 4px rgba(0,0,0,.18) inset, 0 6px 12px rgba(0,0,0,.35);
  transform: translate(-50%, -50%);
  transition: transform .35s cubic-bezier(.5,0,.75,0), opacity .35s;
}
.cz-stage .cz-envpart, .cz-stage .cz-card { opacity: 0; }
.cz-stage.in .cz-envpart, .cz-stage.in .cz-card { opacity: 1; }
.cz-stage { transform: translateY(40px); opacity: 0; transition: transform .6s cubic-bezier(.2,1.2,.4,1), opacity .4s; }
.cz-stage.in { transform: none; opacity: 1; }
.cz-stage.open .cz-flap { transform: rotateX(180deg); z-index: 1; transition: transform .6s cubic-bezier(.4,0,.2,1), z-index 0s .3s; }
.cz-stage.open .cz-seal { transform: translate(-50%, -50%) scale(1.3); opacity: 0; }
.cz-stage.rise .cz-card { transform: translateY(-30%) scale(.5); }
.cz-stage.out .cz-envpart { transform: translateY(130%); opacity: 0; }
.cz-stage.out .cz-flap { transform: rotateX(180deg) translateY(-130%); }
.cz-stage.out .cz-card { z-index: 6; transform: none; transition: transform .95s cubic-bezier(.3,1.25,.4,1) .12s; }
.cz-stage.instant, .cz-stage.instant * { transition: none !important; }

/* ------------------------------ criador ------------------------------ */
.msg-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 6px; }
.msg-tools .count { margin: 0; }
.cz-suggest {
  border: 1.5px solid #f0d9a8; background: #fff7e3; color: #7a4f0a; border-radius: 999px;
  padding: 7px 14px; font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.cz-suggest:hover { border-color: #e0a93a; background: #fff1cc; }

.cz-picker { margin-top: 4px; }
.cz-rail {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory;
  padding: 6px 22px 14px; margin: 0 -22px; scroll-padding: 0 22px;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.cz-thumb {
  flex: none; scroll-snap-align: center; border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 7px; color: var(--ink, #1d1534);
}
.cz-thumb-card {
  display: block; width: 116px; aspect-ratio: 4 / 5; border-radius: 8px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 6px 14px rgba(40,20,60,.18);
  transition: transform .15s, box-shadow .15s;
}
.cz-thumb-card canvas { display: block; width: 100%; height: 100%; }
.cz-thumb:hover .cz-thumb-card { transform: translateY(-3px); }
.cz-thumb[aria-selected="true"] .cz-thumb-card { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--red, #e0303f), 0 10px 22px rgba(224,48,63,.3); }
.cz-thumb-name { font-size: 12.5px; font-weight: 800; color: #5d5372; white-space: nowrap; }
.cz-thumb[aria-selected="true"] .cz-thumb-name { color: var(--red, #e0303f); }
.cz-big { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.cz-big-card {
  width: min(340px, 100%); aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 18px 40px rgba(40,20,60,.25);
}
.cz-big-card canvas { display: block; width: 100%; height: 100%; }
.cz-big-name { font-family: var(--display, Fredoka, sans-serif); font-weight: 600; font-size: 18px; margin: 14px 0 0; }
.cz-big-tag { font-size: 14px; color: #776d8c; margin: 2px 0 0; }

/* sugestões */
.cz-lock { overflow: hidden; }
.cz-sugg {
  position: fixed; inset: 0; z-index: 60; background: rgba(10,8,30,.55); backdrop-filter: blur(3px);
  display: flex; align-items: flex-end; justify-content: center; padding: 0;
}
@media (min-width: 640px) { .cz-sugg { align-items: center; padding: 20px; } }
.cz-sugg-panel {
  width: min(560px, 100%); max-height: min(86vh, 720px); display: flex; flex-direction: column;
  background: var(--paper, #fffaf2); color: var(--ink, #1d1534); border-radius: 22px 22px 0 0;
  padding: 18px 18px calc(12px + env(safe-area-inset-bottom)); box-shadow: 0 -20px 60px rgba(0,0,0,.4);
  animation: czUp .3s cubic-bezier(.2,1,.4,1);
}
@media (min-width: 640px) { .cz-sugg-panel { border-radius: 22px; } }
@keyframes czUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
.cz-sugg-head { display: flex; justify-content: space-between; align-items: center; }
.cz-sugg-head h3 { font-family: var(--display, Fredoka, sans-serif); font-weight: 600; font-size: 21px; margin: 0; }
.cz-x { border: 0; background: #f1e8da; width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; cursor: pointer; color: #5d5372; }
.cz-sugg-sub { margin: 4px 0 12px; color: #776d8c; font-size: 14px; }
.cz-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; flex: none; scrollbar-width: none; }
.cz-tabs .chip { flex: none; }
.cz-tabs .chip[aria-selected="true"] { background: var(--ink, #1d1534); border-color: var(--ink, #1d1534); color: #fff; }
.cz-list { overflow-y: auto; display: grid; gap: 10px; padding: 2px 2px 8px; }
.cz-msg {
  text-align: left; border: 1.5px solid var(--line, #e8dccb); background: #fff; border-radius: 14px;
  padding: 13px 15px; font: inherit; font-size: 15px; line-height: 1.45; color: #3a3050; cursor: pointer;
  transition: border-color .12s, transform .12s;
}
.cz-msg:hover { border-color: var(--red, #e0303f); }
.cz-msg:active { transform: scale(.99); }

/* ------------------------------ galeria ------------------------------ */
.cz-gallery-body { background: #14102b; }
.cz-gallery { max-width: 1500px; margin: 0 auto; padding: 24px 16px 60px; color: #eef2ff; }
.cz-gallery header h1 { font-family: var(--display, Fredoka, sans-serif); margin: 0 0 4px; }
.cz-gallery header p { color: #a6b1dc; margin: 0 0 20px; }
.cz-gallery a { color: #ffcf5a; }
.cz-gallery a[aria-current] { color: #fff; font-weight: 900; }
.cz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.cz-grid figure { margin: 0; }
.cz-g-card { width: 100%; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.5); }
.cz-g-card canvas { display: block; width: 100%; height: 100%; }
.cz-grid figcaption { display: flex; flex-direction: column; gap: 2px; padding-top: 10px; font-size: 14px; color: #a6b1dc; }
.cz-grid figcaption b { color: #fff; font-size: 16px; }
.cz-png { display: block; width: min(100%, 1080px); margin: 0 auto; }
.cz-png-wrap { padding: 0; margin: 0; }
.cz-png-wrap .cz-png { width: 100%; max-width: none; }