/* ===========================================================================
   EKRANAI — septyni žingsniai, kiekvienas su savo charakteriu.
   =========================================================================== */

/* ── 1. Pasitikimas ──────────────────────────────────────────────────── */

.intro {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 2.4rem;
  padding-block: calc(var(--safe-t) + 2rem) calc(var(--safe-b) + 2rem);
}

.intro__breath {
  position: relative;
  width: 168px;
  height: 168px;
  display: grid;
  place-items: center;
  flex: none;
}

.intro__core {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    rgb(var(--orb-hi) / var(--orb-hi-alpha)),
    rgb(var(--mood) / calc(0.62 * var(--orb-density))) 58%,
    rgb(var(--mood) / calc(0.1 * var(--orb-density))) 100%
  );
  box-shadow: 0 0 46px -6px rgb(var(--mood) / 0.55);
  animation: breathe 9s var(--ease-soft) infinite;
}

.intro__ring {
  position: absolute;
  inset: 20%;
  border-radius: 50%;
  border: 1px solid rgb(var(--paper) / 0.14);
  animation: ripple 9s var(--ease-soft) infinite;
}

.intro__ring--2 {
  inset: 4%;
  border-color: rgb(var(--paper) / 0.07);
  animation-delay: -4.5s;
}

.intro__words {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.intro__kicker {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgb(var(--paper) / 0.66);
}

.intro__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 9.2vw, 2.7rem);
  line-height: 1.12;
  letter-spacing: -0.018em;
}

.intro__body {
  font-size: 0.94rem;
  line-height: 1.62;
  color: rgb(var(--paper) / 0.66);
  max-width: 21rem;
}

.intro__foot {
  width: 100%;
  max-width: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.intro__time {
  font-size: 0.8rem;
  color: rgb(var(--paper) / 0.62);
}

.prefs {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

/* Nuostatų jungikliai: tema ir kalba. Tas pats pavidalas — mažiau formų
   akiai, o pradžios ekranas lieka tylus. */
.segmented {
  display: flex;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--paper) / 0.1);
}

.segmented__item {
  min-width: 52px;
  min-height: 44px;
  padding: 0 0.72rem;
  border-radius: 999px;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  white-space: nowrap;
  color: rgb(var(--paper) / 0.64);
  transition: color 300ms var(--ease), background 300ms var(--ease);
}

.segmented__item[aria-pressed='true'] {
  color: rgb(var(--paper) / 0.92);
  background: rgb(var(--paper) / 0.09);
}

.haptics {
  padding: 0.55rem 1rem;
  min-height: 44px;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgb(var(--paper) / 0.64);
  border-radius: 999px;
  transition: color 300ms var(--ease);
}

.haptics:active {
  color: rgb(var(--paper) / 0.66);
}

/* ── 2. Laukas ───────────────────────────────────────────────────────── */

/* Lauko dydį riboja ir ekrano aukštis: kvadratas visada turi tilpti be
   slinkties. `align-self` vietoj `margin: auto` — automatinės kraštinės
   flex elementui panaikina tempimą, ir laukas susitrauktų iki nieko. */
.field__stage {
  position: relative;
  width: 100%;
  max-width: calc(44vh + 2.7rem);
  align-self: center;
  margin: 1.6rem 0 0.4rem;
  padding: 1.5rem 1.35rem;
}

.field__plane {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 30px;
  touch-action: none;
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  border: 1px solid rgb(var(--paper) / 0.1);
  background:
    radial-gradient(130% 130% at 50% 50%, rgb(var(--paper) / 0.05), rgb(var(--paper) / 0.012));
  box-shadow:
    inset 0 0 70px -26px rgb(var(--mood) / 0.85),
    0 24px 60px -40px rgb(var(--shadow) / var(--shadow-strength));
  transition: box-shadow var(--calm) var(--ease), border-color 400ms var(--ease);
}

.field__plane.is-active {
  border-color: rgb(var(--mood) / 0.4);
}

.field__cross {
  position: absolute;
  background: rgb(var(--paper) / 0.07);
}

.field__cross--h {
  left: 12%;
  right: 12%;
  top: 50%;
  height: 1px;
}

.field__cross--v {
  top: 12%;
  bottom: 12%;
  left: 50%;
  width: 1px;
}

.field__corner {
  position: absolute;
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgb(var(--paper) / 0.64);
  pointer-events: none;
}

.field__corner--tl { top: 0.85rem; left: 1rem; }
.field__corner--tr { top: 0.85rem; right: 1rem; }
.field__corner--bl { bottom: 0.85rem; left: 1rem; }
.field__corner--br { bottom: 0.85rem; right: 1rem; }

.field__orb {
  position: absolute;
  left: 0;
  top: 0;
  width: 120px;
  height: 120px;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate3d(calc(var(--px, 50%) - 50%), calc(var(--py, 50%) - 50%), 0);
}

.field__orb-halo {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(var(--mood) / 0.42) 0%, rgb(var(--mood) / 0) 66%);
  transform: scale(calc(0.72 + var(--charge, 0) * 0.75));
}

.field__orb-core {
  position: relative;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 36% 30%,
    rgb(var(--orb-hi) / calc(var(--orb-hi-alpha) + 0.06)),
    rgb(var(--mood) / calc(0.85 * var(--orb-density))) 62%
  );
  box-shadow: 0 0 22px rgb(var(--mood) / 0.7);
  transform: scale(calc(0.85 + var(--charge, 0) * 0.45));
}

.field__axis {
  position: absolute;
  font-size: 0.7rem;
  letter-spacing: 0.13em;
  color: rgb(var(--paper) / 0.66);
  white-space: nowrap;
}

.field__axis--top { top: 0; left: 50%; transform: translateX(-50%); }
.field__axis--bottom { bottom: 0; left: 50%; transform: translateX(-50%); }
.field__axis--left { left: 0; top: 50%; transform: translateY(-50%) rotate(180deg); writing-mode: vertical-rl; }
.field__axis--right { right: 0; top: 50%; transform: translateY(-50%); writing-mode: vertical-rl; }

.field__readout {
  min-height: 4.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
}

.readout {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  opacity: 0;
}

.readout.is-shown {
  opacity: 1;
  animation: rise 700ms var(--ease) backwards;
}

.readout__name {
  font-family: var(--serif);
  font-size: 1.4rem;
  letter-spacing: 0.02em;
  color: rgb(var(--paper) / 0.95);
}

.readout__hint {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: rgb(var(--paper) / 0.62);
}

.field__hint {
  font-size: 0.82rem;
  color: rgb(var(--paper) / 0.66);
  transition: opacity 500ms var(--ease);
}

.field.is-touched .field__hint {
  opacity: 0;
}

/* ── 3. Emocijų žodynas ──────────────────────────────────────────────── */

/* Įrankiai lieka pasiekiami visą laiką — slenkant nedingsta nei kvadrantų
   perjungimas, nei paieška. Juosta prilimpa prie pat ekrano viršaus ir pati
   dengia grįžimo mygtuko eilutę, tad tarpo, pro kurį lįstų žodžiai, nelieka. */
.sticky {
  position: sticky;
  /* Lygiai ties viršutinės juostos apačia — jokio tarpo, pro kurį lįstų žodžiai. */
  top: var(--chrome-h);
  z-index: 12;
  margin: 1.5rem calc(var(--gutter) * -1) 0;
  padding: 0.5rem var(--gutter) 0.7rem;
  background: rgb(var(--ground) / 0.82);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  backdrop-filter: blur(18px) saturate(1.25);
}

.tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.emotions.is-searching .tools {
  display: none;
}

.tools__quads {
  display: flex;
  gap: 0.22rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tools__quads::-webkit-scrollbar {
  display: none;
}

.quad {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  min-height: 44px;
  padding: 0 0.58rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.8rem;
  white-space: nowrap;
  color: rgb(var(--paper) / 0.62);
  transition: color 300ms var(--ease), background 300ms var(--ease), border-color 300ms var(--ease);
}

.quad__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgb(var(--quad-color));
  opacity: 0.7;
  transition: opacity 300ms var(--ease), box-shadow 300ms var(--ease);
}

.quad[aria-selected='true'] {
  color: rgb(var(--paper) / 0.93);
  background: rgb(var(--paper) / 0.055);
  border-color: rgb(var(--paper) / 0.13);
}

.quad[aria-selected='true'] .quad__dot {
  opacity: 1;
  box-shadow: 0 0 10px rgb(var(--quad-color) / 0.8);
}

.tools__search {
  flex: none;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgb(var(--paper) / 0.14);
  color: rgb(var(--paper) / 0.66);
}

.tools__search svg {
  width: 19px;
  height: 19px;
}

.search {
  display: none;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.35rem 0 1rem;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgb(var(--paper) / 0.14);
  background: rgb(var(--paper) / 0.045);
}

.emotions.is-searching .search {
  display: flex;
}

.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  font-size: 1rem;
  color: rgb(var(--paper) / 0.95);
  -webkit-appearance: none;
  appearance: none;
}

.search__input::placeholder {
  color: rgb(var(--paper) / 0.3);
}

.search__input::-webkit-search-cancel-button {
  display: none;
}

.search__close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.4rem;
  line-height: 1;
  color: rgb(var(--paper) / 0.45);
}

.flow {
  padding-bottom: 3rem;
}

.band + .band {
  margin-top: 1.9rem;
}

.band:first-child {
  margin-top: 1.1rem;
}

.band__title {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgb(var(--paper) / 0.66);
}

.band__row {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.5rem 0.42rem;
  margin-top: 0.8rem;
}

.word {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 44px;
  padding: 0.5rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--paper) / calc(0.055 + var(--emphasis) * 0.11));
  background: rgb(var(--paper) / calc(0.02 + var(--emphasis) * 0.045));
  color: rgb(var(--paper) / calc(0.66 + var(--emphasis) * 0.3));
  font-size: calc(0.9rem + var(--emphasis) * 0.2rem);
  line-height: 1.2;
  transition: background 300ms var(--ease), border-color 300ms var(--ease), transform 220ms var(--ease);
}

.word:active {
  transform: scale(0.96);
  background: rgb(var(--word-color) / 0.2);
}

.word--breathing {
  animation: drift 11s var(--ease-soft) var(--delay) infinite;
}

.word.is-chosen {
  color: rgb(var(--paper) / 0.97);
  background: rgb(var(--word-color) / var(--sel-fill));
  border-color: rgb(var(--word-color) / var(--sel-edge));
}

.word__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex: none;
  background: rgb(var(--word-color));
  opacity: 0.8;
}

.flow__empty {
  font-size: 0.9rem;
  color: rgb(var(--paper) / 0.62);
  padding: 1rem 0;
}

/* Aprašymo lapelis */

.sheet-wrap {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.sheet__scrim {
  position: absolute;
  inset: 0;
  background: rgb(var(--scrim) / 0.66);
  opacity: 1;
  transition: opacity 340ms var(--ease);
}

.sheet {
  position: relative;
  width: 100%;
  max-width: var(--measure);
  padding: 0.85rem var(--gutter) calc(var(--safe-b) + 1.4rem);
  border-radius: 28px 28px 0 0;
  background: rgb(var(--raised) / 0.985);
  border-top: 1px solid rgb(var(--sheet-color) / 0.42);
  box-shadow: 0 -20px 60px -30px rgb(var(--sheet-color) / 0.9);
  transform: translateY(0);
  transition: transform 400ms var(--ease);
}

.sheet-wrap.is-opening .sheet,
.sheet-wrap.is-closing .sheet {
  transform: translateY(103%);
}

.sheet-wrap.is-opening .sheet__scrim,
.sheet-wrap.is-closing .sheet__scrim {
  opacity: 0;
}

.sheet__grip {
  display: block;
  width: 36px;
  height: 4px;
  border-radius: 999px;
  background: rgb(var(--paper) / 0.16);
  margin: 0 auto 1.15rem;
}

.sheet__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: rgb(var(--paper) / 0.97);
}

.sheet__desc {
  margin-top: 0.55rem;
  font-size: 0.96rem;
  line-height: 1.62;
  color: rgb(var(--paper) / 0.74);
}

.sheet__acts {
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

/* ── 4. Kūnas ────────────────────────────────────────────────────────── */

/* Figūra užima visą likusią ekrano erdvę: kuo ji didesnė, tuo didesni zonų
   lietimo taikiniai. Aukštį duoda `flex`, plotį — proporcija. */
.body__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.body__side {
  font-size: 0.7rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: rgb(var(--paper) / 0.64);
}

.flip {
  position: relative;
  flex: 1 1 auto;
  min-height: 240px;
  max-height: 560px;
  aspect-ratio: 200 / 470;
  align-self: center;
  transform-style: preserve-3d;
  transition: transform 820ms var(--ease-soft);
}

.flip.is-back {
  transform: rotateY(180deg);
}

.flip__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.flip__face--back {
  transform: rotateY(180deg);
}

.figure {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

.zone {
  cursor: pointer;
  animation: none;
}

.zone__shape {
  fill: rgb(var(--paper) / 0.05);
  stroke: rgb(var(--paper) / 0.14);
  stroke-width: 0.8;
  stroke-linejoin: round;
  pointer-events: none;
  transition: fill 480ms var(--ease), stroke 480ms var(--ease);
}

.zone__halo {
  fill: none;
  stroke: rgb(var(--mood) / 0);
  stroke-linejoin: round;
  pointer-events: none;
  transition: stroke 560ms var(--ease);
}

.zone__halo--wide { stroke-width: 14; }
.zone__halo--tight { stroke-width: 5; }

.zone__hit {
  fill: transparent;
  stroke: transparent;
  stroke-width: 9;
  pointer-events: all;
}

/* Zonos su savo lietimo lauku jo neplečia — laukai suguldyti be tarpų. */
.zone__hit--exact {
  stroke-width: 0;
}

.zone.is-on .zone__shape {
  fill: rgb(var(--mood) / var(--zone-fill));
  stroke: rgb(var(--mood) / var(--zone-edge));
}

.zone.is-on .zone__halo--wide { stroke: rgb(var(--mood) / var(--halo-wide)); }
.zone.is-on .zone__halo--tight { stroke: rgb(var(--mood) / var(--halo-tight)); }

.zone.is-on {
  animation: zonePulse 6s var(--ease-soft) infinite;
}

.figure--still .zone {
  cursor: default;
}

.figure--still .zone__hit {
  pointer-events: none;
}

.flipper {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--paper) / 0.11);
  font-size: 0.84rem;
  color: rgb(var(--paper) / 0.68);
  transition: color 300ms var(--ease), border-color 300ms var(--ease);
}

.flipper[aria-pressed='true'] {
  color: rgb(var(--paper) / 0.9);
  border-color: rgb(var(--paper) / 0.25);
}

.flipper__icon svg {
  width: 17px;
  height: 17px;
  display: block;
}

.body__exits {
  display: flex;
  gap: 0.45rem;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 0.9rem;
}

.exit {
  min-height: 44px;
  padding: 0 1rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--paper) / 0.14);
  font-size: 0.86rem;
  color: rgb(var(--paper) / 0.66);
  transition: all 300ms var(--ease);
}

.exit.is-on {
  color: rgb(var(--paper) / 0.97);
  border-color: rgb(var(--mood) / 0.6);
  background: rgb(var(--mood) / var(--sel-fill));
}

.body.is-dimmed .flip {
  opacity: 0.4;
  transition: opacity 500ms var(--ease);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  margin-top: 0.7rem;
  min-height: 1.7rem;
}

.chip {
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.76rem;
  color: rgb(var(--paper) / 0.75);
  background: rgb(var(--mood) / calc(var(--sel-fill) * 0.85));
  border: 1px solid rgb(var(--mood) / calc(var(--sel-edge) * 0.55));
  animation: rise 420ms var(--ease) backwards;
}

.chips__empty {
  font-size: 0.82rem;
  color: rgb(var(--paper) / 0.64);
}

.body .foot {
  padding-top: 1rem;
}

/* ── 5. Pojūčiai ─────────────────────────────────────────────────────── */

.feels__group {
  margin-top: 1.7rem;
}

.feels__group--exit {
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgb(var(--paper) / 0.07);
}

.feels__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: rgb(var(--paper) / 0.66);
}

.feels__note {
  text-transform: none;
  letter-spacing: 0.01em;
  font-size: 0.74rem;
  color: rgb(var(--paper) / 0.62);
}

.feels__row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.42rem;
  margin-top: 0.75rem;
}

.feel {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  padding: 0.4rem 0.85rem;
  border-radius: 15px;
  border: 1px solid rgb(var(--paper) / 0.09);
  background: rgb(var(--paper) / 0.028);
  color: rgb(var(--paper) / 0.84);
  font-size: 0.925rem;
  line-height: 1.25;
  transition: background 300ms var(--ease), border-color 300ms var(--ease),
    color 300ms var(--ease), transform 200ms var(--ease);
}

.feel:active {
  transform: scale(0.96);
}

.feel__hint {
  font-size: 0.7rem;
  color: rgb(var(--paper) / 0.64);
  margin-top: 0.1rem;
}

.feel.is-on {
  color: rgb(var(--paper) / 0.98);
  background: rgb(var(--mood) / var(--sel-fill));
  border-color: rgb(var(--mood) / var(--sel-edge));
  box-shadow: 0 0 24px -12px rgb(var(--mood));
}

/* Juslinės asociacijos: statiškas atspalvis visada, judesys — tik pasirinkus. */
/* Atspalviai pašviesinti tiek, kad išlaikytų kontrastą ir ant šviesiausios
   atmosferos vietos — asociacija lieka, skaitomumas nebepriklauso nuo fono. */
.feel--warm .feel__label { color: rgb(var(--vibe-warm) / 0.95); }
.feel--cool .feel__label { color: rgb(var(--vibe-cool) / 0.95); }
.feel--press .feel__label { color: rgb(var(--vibe-press) / 0.95); }
.feel--pulse .feel__label { color: rgb(var(--vibe-pulse) / 0.95); }
.feel--flow .feel__label { color: rgb(var(--vibe-flow) / 0.95); }
.feel--rise .feel__label { color: rgb(var(--vibe-rise) / 0.95); }
.feel--fall .feel__label { color: rgb(var(--vibe-fall) / 0.95); }
.feel--open .feel__label { color: rgb(var(--vibe-open) / 0.95); }
.feel--heavy .feel__label { color: rgb(var(--vibe-heavy) / 0.95); }
.feel--light .feel__label { color: rgb(var(--vibe-light) / 0.95); }
.feel--void .feel__label { color: rgb(var(--vibe-void) / 0.95); }
.feel--sharp .feel__label { color: rgb(var(--vibe-sharp) / 0.95); }
.feel--numb .feel__label { color: rgb(var(--vibe-numb) / 0.95); }

.feel.is-on .feel__label { color: inherit; }

.feel--warm.is-on { animation: glowSoft 3.4s var(--ease-soft) infinite; }
.feel--cool.is-on { animation: shiver 4s var(--ease-soft) infinite; }
.feel--press.is-on { animation: squeeze 3.6s var(--ease-soft) infinite; }
.feel--pulse.is-on { animation: beat 2.4s var(--ease-soft) infinite; }
.feel--flow.is-on { animation: sway 5s var(--ease-soft) infinite; }
.feel--rise.is-on { animation: liftUp 4.4s var(--ease-soft) infinite; }
.feel--fall.is-on { animation: sinkDown 4.4s var(--ease-soft) infinite; }
.feel--open.is-on { animation: widen 4.6s var(--ease-soft) infinite; }
.feel--heavy.is-on { animation: sinkDown 6s var(--ease-soft) infinite; }
.feel--light.is-on { animation: liftUp 6s var(--ease-soft) infinite; }
.feel--void.is-on { animation: fade 5.2s var(--ease-soft) infinite; }
.feel--sharp.is-on { animation: flicker 3s steps(1, end) infinite; }

/* ── 6. Intensyvumas ─────────────────────────────────────────────────── */

.grades__list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  /* Susicentruoja likusioje erdvėje — arčiau nykščio, ramiau akiai. */
  margin: 1.9rem 0 auto;
  padding-bottom: 2rem;
}

@media (min-height: 700px) {
  .grades__list {
    margin-top: auto;
  }
}

.grade {
  position: relative;
  min-height: 106px;
  display: flex;
  align-items: flex-end;
  padding: 1.1rem;
  border-radius: 24px;
  border: 1px solid rgb(var(--paper) / 0.09);
  background: rgb(var(--paper) / 0.022);
  overflow: hidden;
  text-align: left;
  transition: border-color 420ms var(--ease), background 420ms var(--ease),
    opacity 520ms var(--ease), transform 420ms var(--ease);
}

.grade__field {
  position: absolute;
  inset: 0;
}

.grade__dot {
  position: absolute;
  width: calc((1px + var(--level) * 0.55px) * var(--s));
  height: calc((1px + var(--level) * 0.55px) * var(--s));
  border-radius: 50%;
  background: rgb(var(--mood) / calc(0.16 + var(--level) * 0.2));
  transform: translate(-50%, -50%);
  animation: twinkle calc(5s + var(--d)) var(--ease-soft) var(--d) infinite;
}

.grade__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    80% 130% at 50% 125%,
    rgb(var(--mood) / calc(var(--level) * 0.1)) 0%,
    transparent 72%
  );
}

/* Tekstas visada skaitomas — tankėjanti tekstūra lieka dešinėje. */
.grade__text::before {
  content: '';
  position: absolute;
  inset: -1.1rem -3rem -1.1rem -1.1rem;
  background: linear-gradient(
    100deg,
    rgb(var(--ground) / 0.82) 0%,
    rgb(var(--ground) / 0.5) 55%,
    rgb(var(--ground) / 0) 100%
  );
}

.grade__text {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
}

.grade__text > * {
  position: relative;
}

.grade__label {
  font-family: var(--serif);
  font-size: 1.2rem;
  color: rgb(var(--paper) / 0.95);
}

.grade__hint {
  font-size: 0.8rem;
  color: rgb(var(--paper) / 0.62);
}

.grade.is-on {
  border-color: rgb(var(--mood) / var(--sel-edge));
  background: rgb(var(--mood) / calc(var(--sel-fill) * 0.7));
  transform: scale(1.012);
}

.grade.is-off {
  opacity: 0.36;
  transform: scale(0.985);
}

/* ── 7. Veidrodis ────────────────────────────────────────────────────── */

.mirror {
  align-items: center;
  text-align: center;
}

.mirror__art {
  position: relative;
  height: min(27vh, 250px);
  aspect-ratio: 200 / 470;
  margin: 1.1rem 0 0.2rem;
  display: grid;
  place-items: center;
}

.mirror__aura {
  position: absolute;
  width: 320%;
  height: 130%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgb(var(--mood) / calc(0.05 + var(--intensity) * 0.045)) 0%,
    transparent 62%
  );
  animation: breathe 11s var(--ease-soft) infinite;
}

.mirror__art .figure {
  position: relative;
}

.mirror__art .zone.is-on .zone__halo--wide {
  stroke: rgb(var(--mood) / calc((0.03 + var(--intensity) * 0.035) * var(--zone-mult)));
}

.mirror__art .zone.is-on .zone__halo--tight {
  stroke: rgb(var(--mood) / calc((0.06 + var(--intensity) * 0.07) * var(--zone-mult)));
}

.mirror__art .zone.is-on .zone__shape {
  fill: rgb(var(--mood) / calc((0.12 + var(--intensity) * 0.09) * var(--zone-mult)));
}

.mirror__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgb(var(--paper) / 0.64);
  animation: rise 800ms var(--ease) 0.15s backwards;
}

.mirror__badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--mood));
  box-shadow: 0 0 12px rgb(var(--mood) / 0.9);
}

.mirror__badge-sep {
  opacity: 1;
}

.mirror__text {
  margin-top: 1.1rem;
  font-family: var(--serif);
  font-size: clamp(1.22rem, 5.6vw, 1.55rem);
  line-height: 1.44;
  letter-spacing: -0.006em;
  color: rgb(var(--paper) / 0.96);
  text-wrap: pretty;
  -webkit-user-select: text;
  user-select: text;
}

/* `backwards`, o ne `forwards`: jei animacijos kokiu nors atveju nepasileistų,
   tekstas lieka matomas. Nematoma pradžia — tik animacijos reikalas. */
.mirror__line {
  display: block;
  animation: rise 950ms var(--ease) backwards;
  animation-delay: calc(0.45s + var(--i) * 0.7s);
}

.mirror__line + .mirror__line {
  margin-top: 0.15rem;
}

.mirror__feels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.3rem 0.5rem;
  margin-top: 1.35rem;
}

.mirror__feel {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: rgb(var(--paper) / 0.64);
  animation: rise 700ms var(--ease) backwards;
  animation-delay: calc(2.5s + var(--i) * 0.12s);
}

.mirror__outro {
  margin-top: 1.6rem;
  font-size: 0.88rem;
  line-height: 1.6;
  color: rgb(var(--paper) / 0.64);
  max-width: 22rem;
  animation: rise 900ms var(--ease) 3s backwards;
}

.mirror .foot {
  width: 100%;
  max-width: 21rem;
  animation: rise 900ms var(--ease) 3.3s backwards;
}

/* ── Užsklanda ───────────────────────────────────────────────────────── */

.closing {
  justify-content: center;
  align-items: center;
  text-align: center;
  gap: 1.1rem;
}

.closing__breath {
  position: relative;
  width: 130px;
  height: 130px;
  display: grid;
  place-items: center;
  margin-bottom: 1rem;
}

.closing__core {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: radial-gradient(
    circle at 38% 32%,
    rgb(var(--orb-hi) / calc(var(--orb-hi-alpha) * 0.85)),
    rgb(var(--mood) / calc(0.4 * var(--orb-density))) 62%,
    transparent 100%
  );
  animation: breathe 10s var(--ease-soft) infinite;
}

.closing__ring {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  border: 1px solid rgb(var(--paper) / 0.1);
  animation: ripple 10s var(--ease-soft) infinite;
}

.closing__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.6rem, 7vw, 2rem);
  letter-spacing: -0.01em;
}

.closing__body {
  font-size: 0.94rem;
  color: rgb(var(--paper) / 0.66);
  max-width: 19rem;
  margin-bottom: 1.2rem;
}

/* ── Judesio žodynas ─────────────────────────────────────────────────── */

@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.9; }
  50% { transform: scale(1.13); opacity: 1; }
}

@keyframes ripple {
  0%, 100% { transform: scale(1); opacity: 0.55; }
  50% { transform: scale(1.16); opacity: 1; }
}

@keyframes rise {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to { opacity: 1; transform: none; }
}

@keyframes drift {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -3px, 0); }
}

@keyframes zonePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.82; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.75; }
  50% { opacity: 1; }
}

@keyframes glowSoft {
  0%, 100% { box-shadow: 0 0 24px -12px rgb(var(--mood)); }
  50% { box-shadow: 0 0 30px -6px rgb(var(--mood) / 0.85); }
}

@keyframes shiver {
  0%, 100% { transform: translate3d(0, 0, 0); }
  47% { transform: translate3d(-0.6px, 0, 0); }
  53% { transform: translate3d(0.6px, 0, 0); }
}

@keyframes squeeze {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(0.965, 0.99); }
}

@keyframes beat {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.035); }
  24% { transform: scale(1); }
}

@keyframes sway {
  0%, 100% { transform: translate3d(-2px, 0, 0); }
  50% { transform: translate3d(2px, 0, 0); }
}

@keyframes liftUp {
  0%, 100% { transform: translate3d(0, 1.5px, 0); }
  50% { transform: translate3d(0, -2.5px, 0); }
}

@keyframes sinkDown {
  0%, 100% { transform: translate3d(0, -1.5px, 0); }
  50% { transform: translate3d(0, 2.5px, 0); }
}

@keyframes widen {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.035, 1.01); }
}

@keyframes fade {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.62; }
}

@keyframes flicker {
  0%, 92%, 100% { opacity: 1; }
  94% { opacity: 0.55; }
  96% { opacity: 1; }
}

/* ── Platesnis ekranas: tiesiog graži siaura kolona ──────────────────── */

@media (min-width: 700px) {
  :root {
    --measure: 32rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mirror__line,
  .mirror__badge,
  .mirror__outro,
  .mirror .foot,
  .mirror__feel,
  .readout.is-shown {
    opacity: 1;
    animation: none;
  }
}

/* ── Prisijungimas ───────────────────────────────────────────────────── */

.auth {
  justify-content: center;
  gap: 2rem;
}

.auth__words {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
  text-align: center;
}

.auth__form {
  width: 100%;
  max-width: 22rem;
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.auth__input {
  width: 100%;
  min-height: 52px;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--paper) / 0.18);
  background: rgb(var(--paper) / 0.05);
  color: rgb(var(--paper) / 0.95);
  font-size: 1rem;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 300ms var(--ease), background 300ms var(--ease);
}

.auth__input:focus {
  border-color: rgb(var(--mood) / 0.6);
  background: rgb(var(--paper) / 0.07);
}

.auth__input::placeholder {
  color: rgb(var(--paper) / 0.34);
}

.auth__input--code {
  font-size: 1.5rem;
  letter-spacing: 0.5em;
  padding-left: 1.7rem;
  font-variant-numeric: tabular-nums;
}

.auth__sent {
  font-size: 0.86rem;
  text-align: center;
  color: rgb(var(--paper) / 0.66);
  overflow-wrap: anywhere;
}

.auth__hint {
  font-size: 0.8rem;
  text-align: center;
  color: rgb(var(--paper) / 0.55);
}

.auth__note {
  min-height: 1.2rem;
  font-size: 0.84rem;
  line-height: 1.45;
  text-align: center;
  color: rgb(var(--paper) / 0.6);
  opacity: 0;
  transition: opacity 300ms var(--ease);
}

.auth__note.is-shown {
  opacity: 1;
}

.auth__note--error {
  color: rgb(var(--vibe-sharp) / 0.95);
}

.auth__note--info {
  color: rgb(var(--paper) / 0.66);
}

.auth__foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

.auth__privacy {
  font-size: 0.78rem;
  text-align: center;
  color: rgb(var(--paper) / 0.5);
  max-width: 19rem;
}

/* ── Pradžios tylios nuorodos ────────────────────────────────────────── */

.intro__links {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  margin-top: 0.3rem;
}

.intro__links-sep {
  color: rgb(var(--paper) / 0.3);
}

/* ── Istorija ────────────────────────────────────────────────────────── */

.segmented--center {
  align-self: center;
  margin-top: 1.2rem;
}

.history__content {
  display: flex;
  flex-direction: column;
  padding-bottom: 2.5rem;
}

.history__note {
  margin-top: 1.6rem;
  text-align: center;
  font-size: 0.9rem;
  color: rgb(var(--paper) / 0.6);
}

.history__banner {
  margin-top: 1.2rem;
  padding: 0.7rem 1rem;
  border-radius: 14px;
  border: 1px solid rgb(var(--paper) / 0.12);
  background: rgb(var(--paper) / 0.045);
  font-size: 0.82rem;
  line-height: 1.5;
  color: rgb(var(--paper) / 0.66);
}

.history__empty {
  margin-top: 2.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  text-align: center;
}

.history__empty p {
  font-size: 0.92rem;
  line-height: 1.6;
  color: rgb(var(--paper) / 0.66);
  max-width: 20rem;
}

.history__day {
  margin-top: 1.7rem;
}

.history__group {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.entry-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  min-height: 56px;
  padding: 0.7rem 1rem;
  border-radius: 16px;
  border: 1px solid rgb(var(--paper) / 0.09);
  background: rgb(var(--paper) / 0.028);
  text-align: left;
  transition: background 260ms var(--ease), border-color 260ms var(--ease), transform 200ms var(--ease);
}

.entry-row:active {
  transform: scale(0.985);
  background: rgb(var(--row-color) / 0.12);
}

.entry-row__time {
  font-size: 0.78rem;
  color: rgb(var(--paper) / 0.55);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.entry-row__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: rgb(var(--row-color));
  box-shadow: 0 0 10px rgb(var(--row-color) / 0.6);
}

.entry-row__main {
  display: flex;
  flex-direction: column;
  gap: 0.05rem;
  min-width: 0;
}

.entry-row__emotion {
  font-size: 0.96rem;
  color: rgb(var(--paper) / 0.92);
}

.entry-row__quadrant {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: rgb(var(--paper) / 0.5);
}

.entry-row__pending {
  margin-left: auto;
  color: rgb(var(--paper) / 0.45);
}

/* ── Įžvalgos ────────────────────────────────────────────────────────── */

.insights__range {
  margin-top: 1.2rem;
}

.insights__blocks {
  display: flex;
  flex-direction: column;
  gap: 1.9rem;
  margin-top: 1.5rem;
}

.insights__total {
  text-align: center;
  font-family: var(--serif);
  font-size: 1.25rem;
  color: rgb(var(--paper) / 0.9);
}

.insights__block {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.insights__hint {
  font-size: 0.78rem;
  color: rgb(var(--paper) / 0.55);
  margin-top: -0.4rem;
}

.insights__field-wrap {
  border-radius: 24px;
  border: 1px solid rgb(var(--paper) / 0.1);
  background: rgb(var(--paper) / 0.03);
  padding: 0.6rem;
}

.insights__field {
  display: block;
  width: 100%;
  aspect-ratio: 1;
}

.insights__field-axis {
  stroke: rgb(var(--paper) / 0.12);
  stroke-width: 0.4;
}

.insights__bars {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.insights__bar-row {
  display: grid;
  grid-template-columns: 6.2rem 1fr 2rem;
  align-items: center;
  gap: 0.6rem;
}

.insights__bar-label {
  font-size: 0.84rem;
  color: rgb(var(--paper) / 0.75);
}

.insights__bar-track {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgb(var(--paper) / 0.06);
  overflow: hidden;
}

.insights__bar-fill {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: rgb(var(--bar-color) / 0.75);
  transition: width 700ms var(--ease);
}

.insights__bar-count {
  font-size: 0.8rem;
  text-align: right;
  color: rgb(var(--paper) / 0.6);
  font-variant-numeric: tabular-nums;
}

.insights__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.insights__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 40px;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgb(var(--chip-color, var(--paper)) / 0.4);
  background: rgb(var(--chip-color, var(--paper)) / 0.1);
  font-size: 0.9rem;
  color: rgb(var(--paper) / 0.9);
}

.insights__chip--plain {
  border-color: rgb(var(--paper) / 0.14);
  background: rgb(var(--paper) / 0.045);
}

.insights__chip-count {
  font-size: 0.76rem;
  color: rgb(var(--paper) / 0.55);
  font-variant-numeric: tabular-nums;
}

.insights__bodies {
  display: flex;
  justify-content: center;
  gap: 1.6rem;
}

.insights__body {
  height: 220px;
  aspect-ratio: 200 / 470;
}

.insights__body .figure {
  width: 100%;
  height: 100%;
}

.insights__timeline {
  display: flex;
  flex-wrap: wrap;
  gap: 0.32rem;
}

.insights__tick {
  width: 13px;
  height: 13px;
  border-radius: 50%;
}

/* ── Nustatymai ──────────────────────────────────────────────────────── */

.profile__section {
  margin-top: 1.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  padding-bottom: 0.4rem;
}

.profile__section .segmented {
  align-self: flex-start;
}

.profile__email {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.profile__email-hint {
  font-size: 0.78rem;
  color: rgb(var(--paper) / 0.55);
}

.profile__email-value {
  font-size: 1rem;
  color: rgb(var(--paper) / 0.92);
  overflow-wrap: anywhere;
}

.profile__hint {
  font-size: 0.84rem;
  line-height: 1.55;
  color: rgb(var(--paper) / 0.62);
}

.feedback__input {
  width: 100%;
  padding: 0.85rem 1rem;
  border-radius: 16px;
  border: 1px solid rgb(var(--paper) / 0.16);
  background: rgb(var(--paper) / 0.05);
  color: rgb(var(--paper) / 0.95);
  font: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  resize: vertical;
  min-height: 6rem;
  -webkit-appearance: none;
  appearance: none;
}

.feedback__input:focus {
  border-color: rgb(var(--mood) / 0.6);
}

.feedback__input::placeholder {
  color: rgb(var(--paper) / 0.34);
}

.btn--danger-quiet {
  color: rgb(var(--vibe-sharp) / 0.85);
}

.danger__confirm {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1rem;
  border-radius: 16px;
  border: 1px solid rgb(var(--vibe-sharp) / 0.4);
  background: rgb(var(--vibe-sharp) / 0.07);
}

.danger__warning {
  font-size: 0.86rem;
  line-height: 1.55;
  color: rgb(var(--paper) / 0.8);
}

.danger__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.btn--danger {
  background: rgb(var(--vibe-sharp) / 0.2);
  border: 1px solid rgb(var(--vibe-sharp) / 0.6);
  color: rgb(var(--paper) / 0.95);
}

/* ── Veidrodžio offline pastaba ir įrašo peržiūra ───────────────────── */

.mirror__offline {
  margin-top: 1.1rem;
  padding: 0.6rem 1rem;
  border-radius: 12px;
  border: 1px solid rgb(var(--paper) / 0.14);
  background: rgb(var(--paper) / 0.05);
  font-size: 0.8rem;
  line-height: 1.5;
  color: rgb(var(--paper) / 0.7);
}

.mirror--entry {
  padding-top: calc(var(--chrome-h) + 0.4rem);
}

.closing__feedback {
  margin-top: 0.2rem;
}

/* ── Įrašo trynimas ──────────────────────────────────────────────────── */

.entry__acts {
  width: 100%;
  max-width: 21rem;
  margin-top: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.entry__confirm {
  width: 100%;
  text-align: left;
}