/* Таро — «Нічне святилище»: зоряне небо, золото й бузок, Cormorant + Inter. Рух вимикається за prefers-reduced-motion. */
:root {
  --tlo: #0B0819;
  --poverkhnia: #161032;
  --poverkhnia-2: #241B45;
  --poverkhnia-3: #1B1433;
  --poverkhnia-zoloto: #1D1530;
  --liniia: #3A2D63;
  --liniia-2: #5B4A96;
  --liniia-zoloto: #5A4520;
  --zoloto: #E8C068;
  --zoloto-svitle: #F7E3A8;
  --liliia: #C9B8F5;
  --fiolet: #A78BFA;
  --tekst: #F1EAFB;
  --tekst-2: #E4DCF5;
  --tykho: #B3A8D1;
  --na-zoloti: #1A1326;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: Inter, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vgori: var(--tg-content-safe-area-inset-top, 0px);
  --vnyzu: var(--tg-safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--tlo); color: var(--tekst); }
body { font: 15px/1.5 var(--sans); min-height: 100vh; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
button { font-family: var(--sans); cursor: pointer; }
#app {
  position: relative; z-index: 1;
  padding: calc(var(--vgori) + var(--tg-safe-area-inset-top, 0px) + 18px) 18px calc(var(--vnyzu) + 104px);
  max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px;
}
h1 { margin: 0; font: 700 34px/1.05 var(--serif); letter-spacing: .03em; color: var(--zoloto-svitle); }
.ekran { display: flex; flex-direction: column; gap: 18px; }
.mitka { margin: 0; font: 600 12px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--tykho); }
.mitka.liliia { color: var(--liliia); letter-spacing: .18em; }
.opys { margin: 0; font-size: 14px; color: var(--tykho); }

/* Небо: зорі, туманність, падаючі зорі */
.nebo { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.zirka-n { position: absolute; border-radius: 50%; animation: myhot 3.2s ease-in-out infinite; }
.tumannist {
  position: fixed; left: 50%; top: 40px; width: 320px; height: 320px; margin-left: -160px; z-index: 0; pointer-events: none;
  border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 230, .38) 0%, rgba(11, 8, 25, 0) 70%);
  animation: tumannist 7s ease-in-out infinite;
}
.padaiucha {
  position: fixed; left: 92%; top: 60px; z-index: 0; pointer-events: none; width: 90px; height: 1.5px; border-radius: 2px;
  background: linear-gradient(90deg, rgba(247, 227, 168, 0), #F7E3A8); animation: padinnia 9s linear infinite;
}
.padaiucha.druha { left: 78%; top: 52%; animation-delay: 4.5s; animation-duration: 11s; }
@keyframes myhot { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes tumannist { 0%, 100% { transform: scale(1); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; } }
@keyframes padinnia {
  0% { transform: translate(0, 0) rotate(-35deg); opacity: 0; } 4% { opacity: 1; }
  14% { transform: translate(-260px, 180px) rotate(-35deg); opacity: 0; } 100% { transform: translate(-260px, 180px) rotate(-35deg); opacity: 0; }
}

/* Шапка */
.shapka { display: flex; align-items: center; justify-content: space-between; }
.shapka h1 { font-size: 36px; letter-spacing: .04em; }
.faza {
  display: flex; align-items: center; gap: 8px; padding: 6px 12px 6px 8px; border-radius: 999px;
  background: rgba(27, 20, 51, .9); border: 1px solid var(--liniia); font-size: 13px; font-weight: 500; color: var(--tekst-2);
}
.faza svg { animation: misiats 4s ease-in-out infinite; }
@keyframes misiats { 0%, 100% { filter: drop-shadow(0 0 2px rgba(247, 227, 168, .4)); } 50% { filter: drop-shadow(0 0 7px rgba(247, 227, 168, .9)); } }

/* Знак дня */
.znak-dnia { display: flex; flex-direction: column; align-items: center; gap: 14px; padding-top: 4px; text-align: center; }
.kolo { position: relative; width: 170px; height: 170px; display: flex; align-items: center; justify-content: center; }
.orbita { position: absolute; inset: 0; animation: obert 40s linear infinite; }
.orbita-vnutr { position: absolute; left: 10px; top: 10px; animation: obert-nazad 14s linear infinite; }
.iskra { animation: iskra 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.levituie { animation: levituvannia 4.5s ease-in-out infinite; }
.zvorot-dnia {
  width: 92px; height: 158px; padding: 0; border: 0; border-radius: 10px; background: var(--poverkhnia-3);
  animation: dykh 3.6s ease-in-out infinite; transition: transform .3s ease;
}
.zvorot-dnia svg { display: block; }
.zvorot-dnia:active, .zvorot-dnia.vidkryvaietsia { transform: scale(.94) rotateY(25deg); }
.znak-dnia h2 { margin: 0; font: 600 26px/1.1 var(--serif); color: var(--zoloto-svitle); }
.riad-pidkazky { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--tykho); flex-wrap: wrap; justify-content: center; }
.seriia {
  display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
  background: var(--poverkhnia-2); color: var(--zoloto-svitle); font-size: 12px; font-weight: 600;
}
@keyframes obert { to { transform: rotate(360deg); } }
@keyframes obert-nazad { to { transform: rotate(-360deg); } }
@keyframes iskra { 0%, 100% { opacity: 0; transform: scale(.4); } 50% { opacity: 1; transform: scale(1); } }
@keyframes levituvannia { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes dykh {
  0%, 100% { box-shadow: 0 0 28px 4px rgba(167, 139, 250, .35), 0 0 0 1px #E8C068; }
  50% { box-shadow: 0 0 54px 12px rgba(232, 192, 104, .45), 0 0 0 1px #F7E3A8; }
}

/* Вибір розкладу */
.vydy { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.vydy > * { animation: poiava-vgoru .6s ease-out both; }
.vydy > :nth-child(2) { animation-delay: .08s; } .vydy > :nth-child(3) { animation-delay: .16s; }
.vydy > :nth-child(4) { animation-delay: .24s; } .vydy > :nth-child(5) { animation-delay: .32s; } .vydy > :nth-child(6) { animation-delay: .4s; }
.vyd {
  min-height: 62px; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--liniia); background: var(--poverkhnia);
  color: var(--tekst); text-align: left; display: flex; flex-direction: column; gap: 2px; transition: border-color .2s ease, transform .15s ease;
}
.vyd:active { transform: scale(.97); border-color: var(--zoloto); }
.vyd .n { font-weight: 600; font-size: 15px; }
.vyd .p { font-size: 12px; color: var(--tykho); }
.vyd .tsina { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--zoloto); }
.vyd.platnyi { border-color: var(--liniia-zoloto); background: var(--poverkhnia-zoloto); position: relative; overflow: hidden; }
.vyd.platnyi .n { color: var(--zoloto-svitle); }
.vyd.platnyi::after, .oblozhka::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, rgba(247, 227, 168, 0) 35%, rgba(247, 227, 168, .2) 50%, rgba(247, 227, 168, 0) 65%);
  animation: blysk 5s ease-in-out infinite;
}
.vyd.velykyi { grid-column: span 2; flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; }
.vyd.velykyi .n { font: 700 21px/1.1 var(--serif); }
.vyd .stovp { display: flex; flex-direction: column; gap: 2px; }
.znachok-tsiny { display: inline-flex; align-items: center; gap: 4px; padding: 6px 11px; border-radius: 999px; background: var(--zoloto); color: var(--na-zoloti); font-size: 13px; font-weight: 600; flex: none; }
.zirka { width: 11px; height: 11px; flex: none; }
@keyframes poiava-vgoru { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@keyframes blysk { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }

/* Кнопки й поля */
.golovna-knopka {
  width: 100%; min-height: 56px; border: 0; border-radius: 18px; background: var(--zoloto); color: var(--na-zoloti);
  font-size: 17px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 0 30px rgba(232, 192, 104, .35);
}
.golovna-knopka:disabled { opacity: .45; }
.ramkova { min-height: 44px; padding: 0 18px; border: 1px solid var(--liniia-2); border-radius: 12px; background: transparent; color: var(--tekst-2); font-size: 14px; font-weight: 500; }
.ramkova.zolota { border-color: var(--zoloto); color: var(--zoloto-svitle); font-weight: 600; }
.pole-pytannia { display: flex; flex-direction: column; gap: 8px; }
.pole-pytannia label { font-size: 13px; color: var(--tykho); }
.pytannia {
  width: 100%; resize: none; padding: 14px; border-radius: 16px; border: 1px solid var(--liniia-2); background: var(--poverkhnia);
  color: var(--tekst); font: 400 17px/1.4 var(--sans); box-shadow: 0 0 24px rgba(124, 92, 230, .25);
}
.pytannia:focus, .pole-vvodu:focus { outline: 2px solid var(--zoloto); outline-offset: 1px; }
.variant {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 14px;
  border-radius: 14px; background: var(--poverkhnia); border: 1px solid var(--liniia); font-size: 15px; cursor: pointer;
}
.variant-tekst { display: flex; align-items: center; gap: 10px; }
.variant input { width: 22px; height: 22px; accent-color: var(--zoloto); }

/* Ритуал */
.zag-ekranu { display: flex; align-items: center; gap: 10px; }
.zag-ekranu h1 { font-size: 28px; }
.nazad { width: 44px; height: 44px; flex: none; border-radius: 12px; border: 1px solid var(--liniia); background: transparent; color: var(--zoloto); display: flex; align-items: center; justify-content: center; }
.vivtar { display: flex; flex-direction: column; align-items: center; gap: 18px; padding-top: 4px; }
.tasuvannia { position: relative; width: 240px; height: 240px; display: flex; align-items: center; justify-content: center; }
.kilce { position: absolute; inset: 0; }
.kilce-prohres { transition: stroke-dashoffset .3s ease; }
#ritual.tasuie .kilce-prohres { stroke-dashoffset: 0; transition: stroke-dashoffset 2.4s linear; }
.siaivo { position: absolute; width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(124, 92, 230, .5) 0%, rgba(11, 8, 25, 0) 70%); }
.kupka { position: relative; width: 70px; height: 120px; }
.tas {
  position: absolute; inset: 0; border-radius: 7px; background: var(--poverkhnia-3); border: 1px solid var(--zoloto);
  background-image: radial-gradient(circle at 50% 50%, rgba(232, 192, 104, .35) 0 12px, transparent 13px);
}
.tas-1 { animation: tasuvannia 2.6s ease-in-out infinite; }
.tas-2 { animation: tasuvannia2 2.6s ease-in-out infinite; }
.tas-3 { animation: verkhnia 3s ease-in-out infinite; box-shadow: 0 0 22px rgba(232, 192, 104, .45); }
#ritual.tasuie .tas-1, #ritual.tasuie .tas-2 { animation-duration: .5s; }
#ritual.tasuie .tas-3 { animation-duration: .6s; }
.iskra-v {
  position: absolute; bottom: 40px; width: 3px; height: 3px; border-radius: 50%; background: #F7E3A8; box-shadow: 0 0 6px #F7E3A8;
  animation: iskra-vgoru 2.6s ease-out infinite;
}
.iskra-v.liliiova { background: #C9B8F5; box-shadow: 0 0 6px #C9B8F5; }
.zaklyk { margin: 0; max-width: 290px; text-align: center; font: 600 22px/1.25 var(--serif); color: var(--zoloto-svitle); animation: svitinnia 4s ease-in-out infinite; }
#tasuvaty { user-select: none; -webkit-user-select: none; touch-action: none; position: relative; }
#tasuvaty.trymaie { transform: scale(.97); }
.pulsuie::before { content: ""; position: absolute; inset: 0; border-radius: 18px; border: 2px solid var(--zoloto); animation: khvylia 1.8s ease-out infinite; pointer-events: none; }
.pidkazka { margin: 0; text-align: center; font-size: 13px; color: var(--tykho); }
@keyframes tasuvannia { 0%, 100% { transform: translateX(0) rotate(-8deg); } 50% { transform: translateX(-34px) rotate(-16deg); } }
@keyframes tasuvannia2 { 0%, 100% { transform: translateX(0) rotate(7deg); } 50% { transform: translateX(34px) rotate(15deg); } }
@keyframes verkhnia { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(1.5deg); } }
@keyframes iskra-vgoru { 0% { transform: translateY(0) scale(.6); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-120px) scale(1); opacity: 0; } }
@keyframes khvylia { 0% { transform: scale(1); opacity: .55; } 100% { transform: scale(1.18, 1.5); opacity: 0; } }
@keyframes svitinnia { 0%, 100% { text-shadow: 0 0 0 rgba(247, 227, 168, 0); } 50% { text-shadow: 0 0 18px rgba(247, 227, 168, .55); } }

/* Вибір карт віялом */
.zag-vyboru { display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center; }
.zag-vyboru h1 { font-size: 30px; }
.sloty { display: grid; gap: 8px; }
.slot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
.mistse {
  width: 100%; max-width: 58px; aspect-ratio: 54 / 92; border-radius: 7px; border: 1px dashed var(--liniia-2);
  display: flex; align-items: center; justify-content: center; font: 600 22px var(--serif); color: #7C6BB8;
}
.mistse.nastupne { animation: chekaie 1.6s ease-in-out infinite; }
.mistse.povne { border: 1px solid var(--zoloto-svitle); background: var(--poverkhnia-3); box-shadow: 0 0 18px rgba(232, 192, 104, .55); animation: poiava .35s ease, spalakh 1.2s ease-out; }
.mistse.povne svg { width: 86%; height: auto; }
.slot-nazva { font-size: 9.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tykho); text-align: center; overflow-wrap: anywhere; line-height: 1.2; }
.viialo { position: relative; height: 230px; margin: 6px -18px 0; overflow: hidden; }
.viialo::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: -160px; height: 360px; border-radius: 50%; background: radial-gradient(ellipse, rgba(124, 92, 230, .4) 0%, rgba(11, 8, 25, 0) 65%); animation: tumannist 5s ease-in-out infinite; }
.viialo-karta {
  position: absolute; left: 50%; top: 30px; width: 70px; height: 120px; margin-left: -35px; padding: 0; border: 0; background: transparent;
  transform-origin: 35px 360px; transform: rotate(var(--kut)); animation: rozdacha .7s cubic-bezier(.2, .8, .2, 1) both;
  transition: filter .25s ease, opacity .3s ease;
}
.viialo-karta svg { width: 100%; height: 100%; display: block; border-radius: 7px; background: var(--poverkhnia-3); }
.viialo-karta:active { filter: drop-shadow(0 0 12px rgba(232, 192, 104, .8)); }
.viialo-karta.vziata { opacity: 0; pointer-events: none; transform: rotate(var(--kut)) translateY(-120px) scale(.7); transition: transform .4s ease, opacity .4s ease; }
.nyz-vyboru { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.lichylnyk { margin: 0; font-size: 14px; color: var(--tekst-2); }
.siaie { animation: poiava .4s ease; box-shadow: 0 0 30px rgba(232, 192, 104, .4); }
@keyframes rozdacha { from { opacity: 0; transform: rotate(var(--kut)) translateY(140px); } to { opacity: 1; transform: rotate(var(--kut)) translateY(0); } }
@keyframes poiava { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes spalakh { 0% { box-shadow: 0 0 0 0 rgba(247, 227, 168, .9); } 100% { box-shadow: 0 0 18px rgba(232, 192, 104, .55); } }
@keyframes chekaie { 0%, 100% { border-color: #5B4A96; color: #7C6BB8; } 50% { border-color: #E8C068; color: #E8C068; } }

/* Розклад відкрито */
.pytannia-tsytata {
  margin: 0; padding: 12px 14px; border-radius: 14px; background: rgba(22, 16, 50, .9); border: 1px solid var(--liniia);
  font: italic 600 20px/1.25 var(--serif); color: var(--zoloto-svitle);
}
.stil { display: grid; gap: 8px; align-items: end; perspective: 1000px; }
.stil.odna { width: 56%; max-width: 220px; margin: 0 auto; }
.karta { text-align: center; display: flex; flex-direction: column; gap: 6px; min-width: 0; perspective: 900px; animation: proiav .5s ease both; }
@keyframes proiav { from { opacity: 0; } to { opacity: 1; } }
.pozytsiia { font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--tykho); overflow-wrap: anywhere; }
.obertka { position: relative; aspect-ratio: 600 / 1034; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .8, .2, 1); cursor: pointer; }
.karta.vidkryta .obertka { transform: rotateY(180deg); }
.storona { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 6px; overflow: hidden; border: 1px solid var(--zoloto-svitle); }
.zvorot { background: var(--poverkhnia-3); display: flex; align-items: center; justify-content: center; animation: syiaivo 3.4s ease-in-out infinite; }
.zvorot svg { width: 86%; height: auto; }
.lytse { transform: rotateY(180deg); background: #000; }
.karta.vidkryta .lytse { animation: syiaivo 3.4s ease-in-out infinite; }
.karta.perevernuta .lytse { border-color: var(--fiolet); }
.karta.perevernuta.vidkryta .lytse { animation-name: syiaivo-f; }
.lytse img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karta.perevernuta .lytse img { transform: rotate(180deg); }
.nazva { font-size: 12px; font-weight: 600; line-height: 1.2; min-height: 2.4em; opacity: 0; transition: opacity .4s .4s; }
.stil.odna .nazva { font: 600 20px/1.2 var(--serif); color: var(--zoloto-svitle); }
.nazva small { color: var(--liliia); font-weight: 600; }
.karta.vidkryta .nazva { opacity: 1; }
@keyframes syiaivo { 0%, 100% { box-shadow: 0 0 10px rgba(232, 192, 104, .35); } 50% { box-shadow: 0 0 22px rgba(232, 192, 104, .75); } }
@keyframes syiaivo-f { 0%, 100% { box-shadow: 0 0 10px rgba(167, 139, 250, .35); } 50% { box-shadow: 0 0 22px rgba(167, 139, 250, .8); } }

.tlumachennia {
  padding: 16px; border-radius: 18px; background: var(--poverkhnia); border: 1px solid var(--liniia);
  white-space: pre-wrap; font-size: 15px; line-height: 1.55; animation: poiava-vgoru .8s ease-out both;
}
.tlumachennia.chekaie { color: var(--tykho); animation: myhot 1.6s ease-in-out infinite; }
.bukvytsia { float: left; margin: 2px 8px 0 0; font: 700 46px/.8 var(--serif); color: var(--zoloto); animation: bukvytsia 3s ease-in-out infinite; }
.bukvytsia.znak { font-size: 30px; line-height: 1; margin: 0 10px 0 0; }
@keyframes bukvytsia { 0%, 100% { text-shadow: 0 0 0 rgba(232, 192, 104, 0); } 50% { text-shadow: 0 0 14px rgba(232, 192, 104, .8); } }
.dii { display: grid; gap: 8px; }
.dii > * { animation: poiava-vgoru .5s ease-out both; }
.dii > :nth-child(2) { animation-delay: .1s; } .dii > :nth-child(3) { animation-delay: .2s; } .dii > :nth-child(4) { animation-delay: .3s; }
.dija {
  min-height: 64px; border-radius: 14px; border: 1px solid var(--liniia); background: var(--poverkhnia); color: var(--zoloto-svitle);
  font-size: 12px; font-weight: 600; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.dija.holovna { border-color: var(--zoloto); background: var(--poverkhnia-2); }
.dija svg { width: 20px; height: 20px; }
.utochnennia { display: flex; flex-direction: column; gap: 10px; }
.pidkazky { display: flex; flex-wrap: wrap; gap: 8px; }
.pidkazka {
  border-radius: 16px; border: 1px solid var(--zoloto); background: var(--poverkhnia-2); color: var(--zoloto-svitle);
  font: inherit; font-size: 14px; padding: 8px 12px; text-align: left; animation: poiava-vgoru .5s ease-out both;
}
.utochnennia label { font-size: 13px; color: var(--tykho); }
.riad-vvodu { display: flex; gap: 8px; }
.pole-vvodu { flex: 1; min-width: 0; height: 48px; padding: 0 14px; border-radius: 14px; border: 1px solid var(--liniia-2); background: var(--poverkhnia); color: var(--tekst); font: 15px var(--sans); }
.knopka-vvodu { width: 48px; height: 48px; flex: none; border: 0; border-radius: 14px; background: var(--zoloto); display: flex; align-items: center; justify-content: center; }
.knopka-vvodu:disabled { opacity: .5; }
.vidpovid { padding: 14px 16px; border-radius: 16px; background: var(--poverkhnia); border: 1px solid var(--liniia); display: flex; flex-direction: column; gap: 6px; white-space: pre-wrap; animation: poiava-vgoru .5s ease; }
.vidpovid .pyt { color: var(--zoloto-svitle); font-weight: 600; font-size: 14px; }
.vidpovid .tekst { font-size: 14px; line-height: 1.5; }
.prymitka { margin: 0; font-size: 12px; color: var(--tykho); display: inline-flex; align-items: center; gap: 4px; }

/* Нижня навігація */
.nyzhnia {
  position: fixed; z-index: 5; left: 12px; right: 12px; bottom: calc(var(--vnyzu) + 14px); max-width: 536px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 20px;
  background: rgba(22, 16, 50, .92); border: 1px solid var(--liniia); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.vkladka {
  min-height: 48px; border: 0; border-radius: 14px; background: transparent; color: var(--tykho);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 11px; font-weight: 500;
  transition: background .25s ease, color .25s ease;
}
.vkladka.aktyvna { background: var(--zoloto); color: var(--na-zoloti); font-weight: 600; }

/* Історія */
.spysok { display: flex; flex-direction: column; gap: 10px; }
.zapys { background: var(--poverkhnia); border-radius: 14px; padding: 12px 14px; border: 1px solid var(--liniia); animation: poiava-vgoru .4s ease both; }
.zapys[open] { border-color: var(--liniia-2); }
.zapys summary { cursor: pointer; list-style: none; }
.zapys summary::-webkit-details-marker { display: none; }
.zapys .data { color: var(--tykho); font-size: 13px; }
.zapys .karty-r { font-size: 14px; margin-top: 4px; color: var(--zoloto-svitle); }
.zapys .tekst { white-space: pre-wrap; margin-top: 10px; font-size: 15px; }
.porozhno { color: var(--tykho); text-align: center; margin-top: 40px; }

/* Я */
.statystyka { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.stat { padding: 12px; border-radius: 14px; background: var(--poverkhnia); border: 1px solid var(--liniia); display: flex; flex-direction: column; gap: 2px; }
.stat b { font: 700 28px/1 var(--serif); color: var(--zoloto-svitle); }
.stat span { font-size: 12px; color: var(--tykho); }
.kartka { padding: 18px; border-radius: 20px; background: var(--poverkhnia); border: 1px solid var(--liniia); display: flex; flex-direction: column; gap: 12px; }
.kartka.premium { background: var(--poverkhnia-zoloto); border: 1.5px solid var(--zoloto); padding: 20px 18px; gap: 14px; box-shadow: 0 0 30px rgba(232, 192, 104, .15); }
.kartka h2 { margin: 0; font: 600 22px/1.15 var(--serif); color: var(--zoloto-svitle); }
.kartka.premium h2 { font-size: 28px; font-weight: 700; }
.kartka .zag { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.perevahy { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.perevahy li { display: flex; gap: 10px; align-items: flex-start; }
.perevahy svg { flex: none; margin-top: 2px; }
.ranok { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.chas { height: 44px; border-radius: 12px; border: 1px solid var(--liniia); background: transparent; color: var(--tekst); font-size: 14px; font-weight: 500; }
.chas.vymk { color: var(--tykho); font-size: 13px; }
.chas[aria-pressed="true"] { border: 0; background: var(--zoloto); color: var(--na-zoloti); font-weight: 600; }

/* Прогрес */
.progres { border-color: var(--liniia-2); box-shadow: 0 0 30px rgba(124, 92, 230, .2); }
.chip { align-self: flex-start; padding: 4px 10px; border-radius: 999px; background: var(--poverkhnia-2); color: var(--zoloto-svitle); font-size: 12px; font-weight: 600; white-space: nowrap; }
.progres .chip { align-self: center; }
.kolektsiia-zag { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.kolektsiia-zag b { font: 700 20px/1 var(--serif); color: var(--zoloto-svitle); }
.smuha { height: 8px; border-radius: 999px; background: var(--poverkhnia-2); overflow: hidden; }
.smuha div { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--zoloto), var(--zoloto-svitle)); transition: width .8s cubic-bezier(.2, .8, .2, 1); }
.kolektsiia { display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 4px; }
.mini { aspect-ratio: 600 / 1034; border-radius: 4px; padding: 0; border: 1px solid var(--liniia); background: var(--poverkhnia-3); overflow: hidden; display: flex; align-items: center; justify-content: center; color: var(--liniia-2); font: 600 12px var(--serif); }
.mini img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mini.vidkryta { border-color: var(--zoloto); box-shadow: 0 0 8px rgba(232, 192, 104, .3); }
.dosiahnennia { display: flex; flex-direction: column; gap: 8px; }
.dos { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--poverkhnia-3); opacity: .75; }
.dos.ye { opacity: 1; border: 1px solid var(--liniia-zoloto); background: var(--poverkhnia-zoloto); }
.dos .z { font-size: 22px; flex: none; filter: grayscale(1); }
.dos.ye .z { filter: none; }
.dos .t { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.dos .n { font-weight: 600; font-size: 14px; }
.dos.ye .n { color: var(--zoloto-svitle); }
.dos .o { font-size: 12px; color: var(--tykho); }
.dos .smuha { height: 4px; }

/* Колоди */
.gamanets { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--poverkhnia-zoloto); border: 1px solid var(--liniia-zoloto); }
.gamanets-liva { display: flex; align-items: center; gap: 12px; }
.moneta { animation: moneta 5s ease-in-out infinite; }
.gamanets .suma { display: flex; flex-direction: column; }
.gamanets b { font: 700 30px/1 var(--serif); color: var(--zoloto-svitle); }
.gamanets .ramkova { border-color: var(--zoloto); color: var(--zoloto-svitle); font-weight: 600; }
@keyframes moneta { 0%, 70% { transform: rotateY(0); } 85% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }
.pakety { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; animation: poiava-vgoru .3s ease; }
.paket { min-height: 60px; border-radius: 14px; border: 1px solid var(--liniia); background: var(--poverkhnia); color: var(--tekst); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.paket b { color: var(--zoloto-svitle); font-size: 16px; }
.paket span { font-size: 12px; color: var(--tykho); display: inline-flex; align-items: center; gap: 4px; }
.opys-kolod { margin: 0; font-size: 14px; color: var(--tykho); }
.kolody-sitka { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kolody-sitka > * { animation: poiava-vgoru .6s ease-out both; }
.kolody-sitka > :nth-child(2) { animation-delay: .12s; } .kolody-sitka > :nth-child(3) { animation-delay: .24s; }
.koloda-plytka { padding: 10px; border-radius: 16px; border: 1px solid var(--liniia); background: var(--poverkhnia); color: var(--tekst); text-align: left; display: flex; flex-direction: column; gap: 8px; }
.koloda-plytka.aktyvna { border: 1.5px solid var(--zoloto); background: var(--poverkhnia-3); animation: poiava-vgoru .6s ease-out both, aktyvna 3.6s ease-in-out infinite; }
.oblozhka { position: relative; overflow: hidden; border-radius: 8px; }
.koloda-plytka img, .koloda-velyka img { width: 100%; aspect-ratio: 600 / 1034; object-fit: cover; border-radius: 8px; display: block; background: var(--poverkhnia-3); }
.koloda-plytka .n { font: 700 20px/1.1 var(--serif); color: var(--zoloto-svitle); }
.koloda-plytka .s { font-size: 12px; color: var(--tykho); display: inline-flex; align-items: center; gap: 4px; }
.koloda-plytka.aktyvna .s { color: var(--zoloto-svitle); font-weight: 600; }
@keyframes aktyvna { 0%, 100% { box-shadow: 0 0 16px rgba(232, 192, 104, .2); } 50% { box-shadow: 0 0 34px rgba(232, 192, 104, .5); } }
.riad-podarunka { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 16px; background: var(--poverkhnia); border: 1px solid var(--liniia); color: var(--tekst); text-align: left; }
.riad-podarunka > svg:first-child { animation: khytannia 4s ease-in-out infinite; flex: none; }
.riad-podarunka .t { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.riad-podarunka .n { font-size: 15px; font-weight: 600; }
.riad-podarunka .o { font-size: 12px; color: var(--tykho); }
@keyframes khytannia { 0%, 80%, 100% { transform: rotate(0); } 85% { transform: rotate(-10deg); } 90% { transform: rotate(9deg); } 95% { transform: rotate(-5deg); } }
.koloda-velyka { display: flex; gap: 16px; align-items: flex-start; }
.koloda-velyka .obkl { flex: 0 0 42%; }
.koloda-velyka .tekst { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.koloda-velyka h2 { margin: 0; font: 700 28px/1.05 var(--serif); color: var(--zoloto-svitle); }
.koloda-velyka .opys { margin: 0; font-size: 14px; color: var(--tykho); }
.dii-kolody { display: flex; flex-direction: column; gap: 8px; }
.dii-kolody .riad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dii-kolody .ramkova { width: 100%; }
.tsiny { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.lot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--poverkhnia); border: 1px solid var(--liniia); }
.lot b { color: var(--zoloto-svitle); }
.podarunok { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.podarunok .knopky { display: flex; gap: 6px; }
.podarunok .ramkova { min-height: 36px; padding: 0 12px; font-size: 13px; }
.povidomlennia { margin: 0; padding: 12px 14px; border-radius: 14px; background: var(--poverkhnia-2); color: var(--zoloto-svitle); text-align: center; animation: poiava-vgoru .4s ease; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--vnyzu) + 92px); transform: translateX(-50%); z-index: 10;
  width: min(92vw, 420px); padding: 12px 16px; border-radius: 16px; background: var(--poverkhnia-zoloto); border: 1px solid var(--zoloto);
  color: var(--zoloto-svitle); white-space: pre-line; text-align: center; box-shadow: 0 8px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(232, 192, 104, .25);
  animation: poiava-vgoru .4s ease;
}
/* Оцінка, нотатки */
.otsinka { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 8px 8px 14px; border-radius: 14px; background: var(--poverkhnia); border: 1px solid var(--liniia); font-size: 14px; color: var(--tekst-2); animation: poiava-vgoru .5s ease both; }
.otsinka-knopky { display: flex; gap: 6px; }
.otsinka-knopka { width: 44px; height: 40px; border-radius: 12px; border: 1px solid var(--liniia-2); background: transparent; font-size: 18px; transition: transform .15s ease; }
.otsinka-knopka:active { transform: scale(.9); }
.notatka { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.notatka textarea { width: 100%; resize: vertical; min-height: 70px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--liniia-2); background: var(--poverkhnia-3); color: var(--tekst); font: 14px/1.4 var(--sans); }
.notatka textarea:focus { outline: 2px solid var(--zoloto); outline-offset: 1px; }
.notatka .ramkova { align-self: flex-start; }
.zapys .notatka-pokaz { margin-top: 8px; font-size: 13px; color: var(--liliia); white-space: pre-wrap; }
.pidkazka-mala { font-size: 12px; }
.zbulos { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; font-size: 14px; color: var(--tekst-2); }
.zbulos-pidpys { color: var(--zoloto-svitle); font-weight: 600; }

/* Вікно з картою */
.vikno { position: fixed; inset: 0; z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.vikno-tlo { position: absolute; inset: 0; background: rgba(5, 3, 14, .7); animation: proiav .25s ease; }
.vikno-tilo {
  position: relative; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto; padding: 22px 18px calc(var(--vnyzu) + 24px);
  border-radius: 24px 24px 0 0; background: var(--poverkhnia); border: 1px solid var(--liniia-2); border-bottom: 0;
  box-shadow: 0 -10px 40px rgba(124, 92, 230, .3); animation: vyizd .35s cubic-bezier(.2, .8, .2, 1);
  display: flex; flex-direction: column; gap: 16px;
}
.vikno-zakryty { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--liniia); background: transparent; color: var(--tykho); display: flex; align-items: center; justify-content: center; }
.vikno-verkh { display: flex; gap: 16px; align-items: center; }
.vikno-verkh img { width: 38%; max-width: 150px; aspect-ratio: 600 / 1034; object-fit: cover; border-radius: 8px; border: 1px solid var(--zoloto-svitle); animation: syiaivo 3.4s ease-in-out infinite; }
.vikno-verkh img.perevernuta { transform: rotate(180deg); border-color: var(--fiolet); animation-name: syiaivo-f; }
.vikno-tekst { display: flex; flex-direction: column; gap: 6px; min-width: 0; padding-right: 30px; }
.vikno-tekst h2 { margin: 0; font: 700 28px/1.05 var(--serif); color: var(--zoloto-svitle); }
.vikno-riadky { display: flex; flex-direction: column; gap: 10px; }
.vikno-riadok { padding: 12px 14px; border-radius: 14px; background: var(--poverkhnia-3); border: 1px solid var(--liniia); }
.vikno-riadok .m { display: block; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tykho); margin-bottom: 4px; }
.vikno-riadok .t { font-size: 15px; line-height: 1.5; }
@keyframes vyizd { from { transform: translateY(100%); } to { transform: translateY(0); } }

.pomylka { color: #FF9A8A; text-align: center; margin: 0; }
[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}