/* Qiziqarli faktlar, natija ochilishi (sovg'a + konfetti). */

/* ---------- Faktlar ---------- */
.facts-head { display: grid; justify-items: center; gap: 6px; }
.fact-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.fact-tile { position: relative; padding: 14px; border-radius: 18px; background: var(--glass); border: 1px solid var(--glass-line); box-shadow: var(--shadow); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); }
.fact-tile i { position: absolute; right: 12px; top: 12px; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: var(--wine); background: #fbeef0; }
.fact-tile i svg { width: 17px; height: 17px; }
.fact-tile b { display: block; font: 800 30px var(--serif); color: var(--ink); line-height: 1.1; margin-top: 2px; }
.fact-tile span { font-size: 12px; font-weight: 600; color: var(--muted); }
.facts-grid { display: grid; gap: 0; }
.fact h3 { font: 700 18px/1.3 var(--serif); color: var(--t); margin: 8px 0 10px; }
.fact .tag { display: inline-flex; gap: 6px; align-items: center; font-size: 11.5px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .4px; }
.fact .tag svg { width: 16px; height: 16px; }
.fact-hl { background: linear-gradient(135deg, #fff8e6, #fdeee0) !important; border: 2px solid var(--gold) !important; }
.fact-hl h3 { font-size: 22px; color: var(--wine); }
.big-pct { font: 800 42px var(--serif); color: var(--wine); margin: 0; }
.fact-bars { display: grid; gap: 10px; }
.fb-lbl { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 4px; }
.fb-lbl b { color: var(--ink); }
.fb-bar { height: 10px; border-radius: 10px; background: rgba(241, 227, 218, .8); overflow: hidden; }
.fb-bar i { display: block; height: 100%; border-radius: 10px; background: linear-gradient(90deg, color-mix(in srgb, var(--t) 65%, white), var(--t)); }
.gender { display: grid; gap: 10px; }

/* ---------- Natija ochilishi ---------- */
.reveal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(40, 8, 14, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); animation: fadeIn .3s ease; }
.reveal-card { width: min(380px, 100%); text-align: center; padding: 28px 22px 22px; border-radius: 26px; background: linear-gradient(160deg, #fffaf4, #fbe9df); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); display: grid; gap: 10px; justify-items: center; animation: popIn .45s cubic-bezier(.2, 1.4, .4, 1); }
.reveal-card h2 { color: var(--wine); font-size: 26px; }
.reveal-card .sub { margin: 0; font-weight: 600; }
.reveal-card .btn { width: 100%; margin-top: 6px; }
.gift { position: relative; width: 120px; height: 120px; animation: wobble 1.6s ease-in-out infinite; }
.gift .box { position: absolute; left: 14px; right: 14px; bottom: 0; height: 74px; border-radius: 10px; background: linear-gradient(135deg, #a8243a, var(--wine)); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .12); }
.gift .lid { position: absolute; left: 6px; right: 6px; top: 28px; height: 26px; border-radius: 8px; background: linear-gradient(135deg, #c03a52, #8e1b2c); z-index: 2; transition: transform .6s cubic-bezier(.3, 1.6, .5, 1), opacity .6s; }
.gift .ribbon { position: absolute; left: 50%; top: 28px; bottom: 0; width: 18px; margin-left: -9px; background: linear-gradient(90deg, #e3b55e, #f6dc97, #c9973f); z-index: 3; transition: opacity .3s; }
.gift .ribbon::before, .gift .ribbon::after { content: ''; position: absolute; top: -22px; width: 30px; height: 24px; border: 6px solid #e3b55e; border-radius: 50% 50% 0 50%; }
.gift .ribbon::before { right: 8px; transform: rotate(-20deg); }
.gift .ribbon::after { left: 8px; transform: scaleX(-1) rotate(-20deg); }
.reveal.opened .gift { animation: none; height: 0; }
.reveal.opened .gift .lid { transform: translateY(-90px) rotate(-25deg); opacity: 0; }
.reveal.opened .gift .ribbon { opacity: 0; }
.reveal.opened .gift .box { opacity: 0; transition: opacity .4s .2s; }
.reveal-ring { --p: 0; --c: var(--wine); width: 170px; height: 170px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: radial-gradient(closest-side, #fffaf4 78%, transparent 79% 100%), conic-gradient(var(--c) calc(var(--p) * 1%), #f1e3da 0); animation: popIn .5s cubic-bezier(.2, 1.4, .4, 1); }
.reveal-ring b { font: 800 46px/1 var(--serif); color: var(--c); }
.reveal-ring small { font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.reveal-level { margin: 0; padding: 6px 14px; border-radius: 30px; background: #fbeef0; color: var(--wine); font-weight: 700; }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
@keyframes fadeIn { from { opacity: 0; } }
@keyframes popIn { from { opacity: 0; transform: scale(.7); } }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-6deg); } 40% { transform: rotate(5deg); } 60% { transform: rotate(-3deg); } }

@media (min-width: 768px) {
  .fact-tiles { grid-template-columns: repeat(4, 1fr); }
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
  .facts-grid .fact-hl { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { .reveal, .reveal-card, .gift, .reveal-ring { animation: none !important; } }

/* ---------- Kelajakka xat ---------- */
.letter-card .tag, .rate-card .tag { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; font-weight: 700; color: var(--gold); text-transform: uppercase; letter-spacing: .4px; }
.letter-card .tag svg { width: 16px; height: 16px; }
.letter-card h3, .rate-card h3, .follow h3 { font-family: var(--serif); color: var(--wine); margin: 8px 0 4px; font-size: 20px; }
.letter-card textarea, .rate-card textarea, .follow textarea { width: 100%; resize: vertical; min-height: 96px; margin: 10px 0; font: 15px/1.55 var(--sans); }
.letter-card.sealed { text-align: center; background: linear-gradient(160deg, #fffaf2, #f8ecdf); }
.seal { width: 64px; height: 64px; margin: 10px auto 4px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #c0394c, var(--wine) 60%, #4d0c16); box-shadow: 0 6px 16px rgba(122, 22, 38, .35), inset 0 -3px 6px rgba(0, 0, 0, .25); }
.seal svg { width: 30px; height: 30px; }
.seal.open { background: radial-gradient(circle at 35% 30%, #fbe3a6, var(--gold)); color: #3d0a12; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 12px 0 4px; }
.letter-page { display: grid; gap: 14px; max-width: 680px; margin: 0 auto; }
.letter-paper { background: repeating-linear-gradient(#fffdf8 0 31px, #efe2d3 31px 32px); border-left: 4px solid var(--gold); }
.letter-paper h3 { font-family: var(--serif); color: var(--wine); margin: 0 0 10px; }
.letter-paper p { white-space: pre-wrap; font: italic 17px/32px var(--serif); margin: 0; color: var(--ink); }

/* ---------- Baholash va keyingi so'rovnoma ---------- */
.stars { display: flex; gap: 6px; margin: 8px 0; }
.stars button, .moods button { border: 0; background: none; cursor: pointer; padding: 4px; line-height: 1; min-width: 44px; min-height: 44px; }
.stars button { font-size: 34px; color: #e3d3c4; transition: transform .15s, color .15s; }
.stars button.on { color: var(--gold); }
.stars button:active, .moods button:active { transform: scale(1.2); }
.moods { display: flex; gap: 4px; flex-wrap: wrap; }
.moods button { font-size: 32px; border-radius: 14px; filter: grayscale(.7); opacity: .65; }
.moods button[aria-checked='true'] { filter: none; opacity: 1; background: rgba(201, 151, 63, .18); }
.follow .chips { margin-top: 6px; }
html.dark .letter-card.sealed { background: linear-gradient(160deg, #2e1a1f, #22121a); }
html.dark .letter-paper { background: repeating-linear-gradient(#2a171c 0 31px, #3d262c 31px 32px); }
html.dark .letter-card h3, html.dark .rate-card h3, html.dark .follow h3, html.dark .letter-paper h3 { color: #f3b9c3; }
html.dark .stars button { color: #5a3c42; }
html.dark .stars button.on { color: var(--gold); }