:root {
  --tlo: #14101f;
  --tlo-2: #1f1830;
  --tekst: #efe7d6;
  --tykho: #a99fbd;
  --zoloto: #d8b46a;
  --zoloto-2: #f3dca0;
  --radius: 14px;
  --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: 16px/1.5 -apple-system, "Segoe UI", Roboto, sans-serif;
  background: radial-gradient(120% 60% at 50% 0%, #2a2045 0%, var(--tlo) 60%) fixed;
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}
#app {
  padding: calc(var(--vgori) + var(--tg-safe-area-inset-top, 0px) + 12px) 16px calc(var(--vnyzu) + 24px);
  max-width: 560px; margin: 0 auto;
}
.shapka { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
h1 { font: 600 24px/1 Georgia, "Times New Roman", serif; letter-spacing: .04em; margin: 0; color: var(--zoloto-2); }
.vkladky { display: flex; background: var(--tlo-2); border-radius: 999px; padding: 3px; }
.vkladka { border: 0; background: none; color: var(--tykho); padding: 7px 14px; border-radius: 999px; font: inherit; font-size: 14px; }
.vkladka.aktyvna { background: var(--zoloto); color: #1a1326; font-weight: 600; }

.vydy { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.vyd {
  border: 1px solid #3a2f55; background: var(--tlo-2); color: var(--tekst);
  border-radius: var(--radius); padding: 12px; font: inherit; text-align: left;
}
.vyd .z { display: block; font-size: 20px; }
.vyd.obranyi { border-color: var(--zoloto); box-shadow: 0 0 0 1px var(--zoloto) inset; }

.pytannia {
  width: 100%; resize: none; border-radius: var(--radius); border: 1px solid #3a2f55;
  background: var(--tlo-2); color: var(--tekst); padding: 12px; font: inherit; margin-bottom: 12px;
}
.golovna-knopka {
  width: 100%; border: 0; border-radius: var(--radius); padding: 14px; font: 600 16px/1 inherit;
  background: linear-gradient(180deg, var(--zoloto-2), var(--zoloto)); color: #1a1326;
}
.golovna-knopka:disabled { opacity: .45; }
.pidkazka { text-align: center; color: var(--tykho); font-size: 14px; margin: 14px 0 0; }

.stil { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-top: 16px; perspective: 1000px; }
.karta { width: 30%; max-width: 150px; text-align: center; }
.stil.odna .karta { width: 52%; max-width: 220px; }
.obertka {
  position: relative; aspect-ratio: 7 / 12; transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.2, .8, .2, 1); cursor: pointer;
}
.karta.vidkryta .obertka { transform: rotateY(180deg); }
.storona { position: absolute; inset: 0; backface-visibility: hidden; border-radius: 10px; overflow: hidden; }
.zvorot {
  border: 2px solid var(--zoloto);
  background:
    radial-gradient(circle at 50% 50%, transparent 18%, var(--zoloto) 19%, var(--zoloto) 21%, transparent 22%),
    repeating-linear-gradient(45deg, #2b2147 0 6px, #231a3a 6px 12px);
  animation: dykhannia 2.4s ease-in-out infinite;
}
@keyframes dykhannia { 50% { box-shadow: 0 0 18px rgba(216, 180, 106, .45); } }
.lytse { transform: rotateY(180deg); background: #000; }
.lytse img { width: 100%; height: 100%; object-fit: cover; display: block; }
.karta.perevernuta .lytse img { transform: rotate(180deg); }
.pozytsiia { font-size: 12px; color: var(--tykho); margin-top: 6px; text-transform: uppercase; letter-spacing: .06em; }
.nazva { font-size: 14px; min-height: 2.6em; opacity: 0; transition: opacity .4s .4s; }
.karta.vidkryta .nazva { opacity: 1; }

.tlumachennia {
  margin-top: 20px; background: var(--tlo-2); border: 1px solid #3a2f55; border-radius: var(--radius);
  padding: 16px; white-space: pre-wrap; animation: poiava .5s ease;
}
.tlumachennia.chekaie { color: var(--tykho); }
@keyframes poiava { from { opacity: 0; transform: translateY(8px); } }

.spysok { display: flex; flex-direction: column; gap: 10px; }
.zapys { background: var(--tlo-2); border-radius: var(--radius); padding: 12px 14px; border: 1px solid #3a2f55; }
.zapys summary { cursor: pointer; list-style: none; }
.zapys .data { color: var(--tykho); font-size: 13px; }
.zapys .karty-r { font-size: 14px; margin-top: 4px; }
.zapys .tekst { white-space: pre-wrap; margin-top: 10px; font-size: 15px; }
.porozhno { color: var(--tykho); text-align: center; margin-top: 40px; }
.pomylka { color: #ff9a8a; text-align: center; }
.podilytysia {
  display: block; width: 100%; margin-top: 14px; border: 1px solid var(--zoloto); background: none;
  color: var(--zoloto-2); border-radius: var(--radius); padding: 11px; font: 600 15px/1 inherit;
}