/* 1.27.0 · Belső terek vizuális frissítése
   Hogy vagy ma? = belső tér · Gyakorlatok = alkotói tér · Szimbólumok = asszociatív tér */

/* Közös mélység és finom mozgás */
.reflection-screen,.exercise-library,.symbols-screen{isolation:isolate}
.reflection-shell,.library-shell,.symbols-shell{position:relative;z-index:2}
.reflection-screen:before,.reflection-screen:after,
.exercise-library:before,.exercise-library:after,
.symbols-screen:before,.symbols-screen:after{
  content:"";position:fixed;pointer-events:none;z-index:0;border-radius:50%;
  filter:blur(54px);opacity:.58;will-change:transform;
}
@keyframes innerSpaceDriftA{
  0%{transform:translate3d(-2%,1%,0) scale(.94) rotate(-2deg)}
  50%{transform:translate3d(3%,-2%,0) scale(1.07) rotate(3deg)}
  100%{transform:translate3d(0,3%,0) scale(.98) rotate(-1deg)}
}
@keyframes innerSpaceDriftB{
  0%{transform:translate3d(2%,-2%,0) scale(1.02)}
  100%{transform:translate3d(-4%,3%,0) scale(.92)}
}

/* HOGY VAGY MA? · puha, belső, atmoszférikus tér */
.reflection-screen{
  background:
    radial-gradient(circle at 17% 18%,rgba(181,140,255,.16),transparent 24%),
    radial-gradient(circle at 80% 22%,rgba(84,212,197,.13),transparent 27%),
    radial-gradient(circle at 70% 86%,rgba(241,185,104,.07),transparent 25%),
    linear-gradient(145deg,#09131b 0%,#101a22 48%,#17212a 100%)!important;
}
.reflection-screen:before{
  width:48vw;height:48vw;left:-15vw;top:-15vw;
  background:radial-gradient(circle,rgba(176,121,255,.20),rgba(84,212,197,.07) 38%,transparent 69%);
  animation:innerSpaceDriftA 22s ease-in-out infinite alternate;
}
.reflection-screen:after{
  width:44vw;height:44vw;right:-12vw;bottom:-17vw;
  background:radial-gradient(circle,rgba(84,212,197,.17),rgba(90,137,210,.07) 42%,transparent 70%);
  animation:innerSpaceDriftB 27s ease-in-out infinite alternate;
}
.reflection-shell{
  background:linear-gradient(145deg,rgba(25,33,42,.88),rgba(15,22,29,.82))!important;
  border-color:rgba(130,178,190,.30)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.48),inset 0 1px 0 rgba(255,255,255,.055)!important;
  backdrop-filter:blur(18px) saturate(120%);
}
.reflection-title{letter-spacing:.025em;text-shadow:0 0 28px rgba(84,212,197,.10)}
.reflection-topicbar{
  background:linear-gradient(135deg,rgba(84,212,197,.08),rgba(181,140,255,.055))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.reflection-module,.dialog-answer{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(27,36,43,.92),rgba(18,24,30,.94))!important;
  box-shadow:0 12px 32px rgba(0,0,0,.18),inset 0 1px 0 rgba(255,255,255,.035);
}
.reflection-module:before,.dialog-answer:before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at 12% 0%,rgba(84,212,197,.10),transparent 38%);
  opacity:.55;transition:.22s;
}
.reflection-module:hover,.dialog-answer:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 17px 38px rgba(0,0,0,.27),0 0 24px rgba(84,212,197,.06);
}
.reflection-module:hover:before,.dialog-answer:hover:before{opacity:1}

/* GYAKORLATOK · alkotói műhely / kártyaasztal */
.exercise-library{
  background:
    radial-gradient(circle at 10% 14%,rgba(241,185,104,.14),transparent 24%),
    radial-gradient(circle at 87% 20%,rgba(84,212,197,.11),transparent 26%),
    radial-gradient(circle at 56% 92%,rgba(118,183,255,.10),transparent 30%),
    linear-gradient(145deg,#0b1320 0%,#121d29 50%,#182735 100%)!important;
}
.exercise-library:before{
  width:46vw;height:46vw;left:-16vw;bottom:-18vw;
  background:radial-gradient(circle,rgba(241,185,104,.17),rgba(183,112,64,.055) 44%,transparent 70%);
  animation:innerSpaceDriftB 31s ease-in-out infinite alternate;
}
.exercise-library:after{
  width:42vw;height:42vw;right:-12vw;top:-16vw;
  background:radial-gradient(circle,rgba(84,212,197,.14),rgba(118,183,255,.055) 43%,transparent 70%);
  animation:innerSpaceDriftA 25s ease-in-out infinite alternate;
}
.library-title h1{
  font-size:clamp(38px,5vw,58px)!important;font-weight:300!important;letter-spacing:.035em;
  text-shadow:0 0 30px rgba(241,185,104,.10);
}
.library-title p{max-width:790px;line-height:1.55}
.library-filters{
  padding:7px;border:1px solid rgba(118,183,255,.13);border-radius:18px;
  background:rgba(8,19,31,.32);backdrop-filter:blur(12px);
}
.library-filter{transition:transform .18s,border-color .18s,background .18s,box-shadow .18s!important}
.library-filter:hover{transform:translateY(-2px);border-color:rgba(143,218,202,.58);box-shadow:0 8px 20px rgba(0,0,0,.18)}
.exercise-grid{perspective:1100px}
.exercise-tile{
  position:relative;isolation:isolate;overflow:hidden;
  border-color:rgba(118,183,255,.22)!important;
  background:linear-gradient(145deg,rgba(20,38,55,.82),rgba(10,24,38,.78))!important;
  box-shadow:0 17px 44px rgba(0,0,0,.23),inset 0 1px 0 rgba(255,255,255,.045);
  transition:transform .20s ease,border-color .20s ease,box-shadow .20s ease!important;
}
.exercise-tile:before{
  content:"";position:absolute;z-index:-1;inset:-35% 40% 48% -20%;
  background:radial-gradient(circle,rgba(241,185,104,.13),transparent 67%);
  opacity:.7;transition:.22s;pointer-events:none;
}
.exercise-tile:nth-child(3n+2):before{background:radial-gradient(circle,rgba(84,212,197,.12),transparent 67%)}
.exercise-tile:nth-child(3n):before{background:radial-gradient(circle,rgba(181,140,255,.11),transparent 67%)}
.exercise-tile:hover{
  transform:translateY(-5px) rotateX(1deg)!important;
  border-color:rgba(143,218,202,.52)!important;
  box-shadow:0 25px 58px rgba(0,0,0,.32),0 0 30px rgba(84,212,197,.055);
}
.exercise-tile:hover:before{opacity:1;transform:scale(1.08)}
.exercise-topic{color:#f2c77f!important}
.exercise-tile button{box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
.library-random{
  position:relative;overflow:hidden;
  box-shadow:0 9px 24px rgba(241,185,104,.08),inset 0 1px 0 rgba(255,255,255,.07);
}
.library-random:after{
  content:"";position:absolute;inset:-80% -30%;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.16) 49%,transparent 60%);
  transform:translateX(-65%);transition:transform .55s ease;
}
.library-random:hover:after{transform:translateX(65%)}

/* SZIMBÓLUMOK · asszociatív, majdnem összeálló tér */
.symbols-screen{
  background:
    radial-gradient(circle at 18% 17%,rgba(215,167,255,.18),transparent 25%),
    radial-gradient(circle at 82% 22%,rgba(96,119,205,.15),transparent 27%),
    radial-gradient(circle at 67% 88%,rgba(84,212,197,.07),transparent 28%),
    linear-gradient(145deg,#080b16 0%,#121226 48%,#21172e 100%)!important;
}
.symbols-screen:before{
  width:52vw;height:52vw;left:-17vw;top:-18vw;
  background:
    repeating-radial-gradient(circle at 50% 50%,rgba(215,167,255,.11) 0 1px,transparent 1px 42px);
  border:1px solid rgba(215,167,255,.08);filter:blur(.1px);opacity:.34;
  animation:symbolOrbit 34s linear infinite;
}
.symbols-screen:after{
  width:46vw;height:46vw;right:-14vw;bottom:-18vw;
  background:
    radial-gradient(circle at 50% 50%,transparent 0 27%,rgba(84,212,197,.08) 27.3% 27.7%,transparent 28% 43%,rgba(215,167,255,.09) 43.3% 43.7%,transparent 44%),
    linear-gradient(35deg,transparent 49.7%,rgba(215,167,255,.08) 50%,transparent 50.3%),
    linear-gradient(125deg,transparent 49.7%,rgba(84,212,197,.06) 50%,transparent 50.3%);
  filter:none;opacity:.48;animation:symbolOrbit 42s linear infinite reverse;
}
@keyframes symbolOrbit{from{transform:rotate(0deg) scale(.96)}50%{transform:rotate(180deg) scale(1.04)}to{transform:rotate(360deg) scale(.96)}}
.symbols-title{
  font-size:clamp(40px,6vw,62px)!important;font-weight:280!important;letter-spacing:.045em;
  text-shadow:0 0 34px rgba(215,167,255,.17);
}
.symbols-kicker{text-shadow:0 0 18px rgba(215,167,255,.26)}
.symbols-card{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(24,21,39,.88),rgba(13,16,30,.84))!important;
  border-color:rgba(215,167,255,.34)!important;
  box-shadow:0 28px 80px rgba(0,0,0,.44),0 0 40px rgba(215,167,255,.045),inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.symbols-card:before{
  content:"";position:absolute;pointer-events:none;inset:-45% 48% 55% -20%;
  background:radial-gradient(circle,rgba(215,167,255,.18),transparent 68%);
}
.symbols-answer{
  position:relative;overflow:hidden;
  background:linear-gradient(145deg,rgba(31,27,45,.94),rgba(20,20,34,.96))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035);
}
.symbols-answer:after{
  content:"";position:absolute;width:70px;height:70px;border:1px solid rgba(215,167,255,.10);
  border-radius:50%;right:-28px;bottom:-35px;transition:.25s;
}
.symbols-answer:hover{
  transform:translateY(-3px)!important;
  box-shadow:0 16px 34px rgba(0,0,0,.25),0 0 24px rgba(215,167,255,.07);
}
.symbols-answer:hover:after{transform:scale(1.35);border-color:rgba(215,167,255,.24)}
.symbols-progress span{transition:.25s}.symbols-progress span.done{transform:scale(1.16)}

@media(max-width:700px){
  .reflection-screen:before,.reflection-screen:after,.exercise-library:before,.exercise-library:after,.symbols-screen:before,.symbols-screen:after{opacity:.35}
  .library-filters{padding:5px}
  .exercise-tile:hover,.symbols-answer:hover,.reflection-module:hover,.dialog-answer:hover{transform:none!important}
}
@media(prefers-reduced-motion:reduce){
  .reflection-screen:before,.reflection-screen:after,.exercise-library:before,.exercise-library:after,.symbols-screen:before,.symbols-screen:after{animation:none!important}
}