/* Merak Gezegeni — the interrogation dark, the dial, the chairs, the dosya.
   Kept out of base.css because this is a whole planet's worth of staging and
   base.css is already the longest file in the universe. Everything here is a
   beat type (bulb, dial, chair, dosya), not a game: the görevs still live in
   css/tasks/. */

/* ---------- The bulb: one light, and everything else gone ---------- */

/* Above the sky and the constellation (z2), below the stage (z10), same
   ground the labirent's dark stands on. */
.bulb-layer {
  position: fixed;
  inset: 0;
  z-index: 3;
  background:
    radial-gradient(ellipse 46vmin 52vmin at 50% 34%,
      rgba(232, 200, 140, 0.10) 0%,
      rgba(10, 8, 16, 0.55) 42%,
      rgba(3, 2, 8, 0.97) 74%),
    #05040A;
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
.bulb-layer.show { opacity: 1; }

/* While the bulb is up, the universe stops advertising itself: no portal, no
   profile, no music, no constellation. Lexi stays. She is in the light too,
   and they ask her about herself before they are done. */
body.bulbed #constellation,
body.bulbed #particles,
body.bulbed #atmosphere { opacity: 0.1; transition: opacity 1.1s ease; }
body.bulbed #map-btn,
body.bulbed #profile-btn,
body.bulbed #music-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.7s ease;
}

/* The rig hangs from the ceiling and swings from the point it hangs by. */
.bulb-rig {
  position: absolute;
  left: 50%;
  top: 0;
  width: 0;
  transform-origin: 50% 0;
  animation: bulb-swing 7.5s ease-in-out infinite alternate;
  transition: transform 1.4s cubic-bezier(0.22, 0.61, 0.36, 1);
}
@keyframes bulb-swing {
  from { transform: rotate(-2.6deg); }
  to   { transform: rotate(2.6deg); }
}

.bulb-cord {
  position: absolute;
  left: -1px;
  top: 0;
  width: 2px;
  height: 9vh;
  background: linear-gradient(rgba(243, 234, 216, 0.05), rgba(243, 234, 216, 0.3));
}
.bulb-glass {
  position: absolute;
  left: 50%;
  top: 9vh;
  width: 1.5em;
  height: 1.9em;
  margin-left: -0.75em;
  border-radius: 46% 46% 50% 50% / 38% 38% 62% 62%;
  background: radial-gradient(circle at 50% 62%, #FFF3D0 0%, #F2C87A 44%, rgba(232, 176, 140, 0.5) 78%, rgba(232, 176, 140, 0) 100%);
  box-shadow: 0 0 2.6em 1.1em rgba(240, 196, 120, 0.28);
}
/* The cone the bulb throws. A wedge, warm at the top, gone by the floor. */
.bulb-cone {
  position: absolute;
  left: 50%;
  top: 10.4vh;
  width: 92vmin;
  height: 96vh;
  margin-left: -46vmin;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(rgba(244, 206, 138, 0.16), rgba(244, 206, 138, 0.015) 62%, rgba(244, 206, 138, 0));
}

/* Which direction the voice came from. The bulb leans toward it, and it never
   leaves: every lean is a small rotation or a change in the light. A bulb that
   swings off the top of the screen reads as the room being packed up. */
.bulb-layer[data-from="left"]   .bulb-rig { animation: none; transform: rotate(-9deg); }
.bulb-layer[data-from="right"]  .bulb-rig { animation: none; transform: rotate(9deg); }
/* Straight overhead: no lean at all, and the light presses down harder. */
.bulb-layer[data-from="above"]  .bulb-rig { animation: none; transform: rotate(0deg); }
.bulb-layer[data-from="above"]  .bulb-cone { filter: brightness(1.3); }
/* From behind you: out of the light. The cone thins and dims, and the glass
   dims with it, but it stays exactly where it hangs. */
.bulb-layer[data-from="behind"] .bulb-rig { animation: none; transform: rotate(0deg); }
.bulb-layer[data-from="behind"] .bulb-cone { opacity: 0.55; transform: scaleX(0.72); }
.bulb-layer[data-from="behind"] .bulb-glass { filter: brightness(0.78); }
/* Up and to the right: they have stopped looking at you and started looking
   at the small glowing thing you brought with you. */
.bulb-layer[data-from="lexi"]   .bulb-rig { animation: none; transform: rotate(13deg); }
/* The two questions that are not a joke. The room stops moving. */
.bulb-layer[data-from="still"]  .bulb-rig { animation: none; transform: rotate(0deg); }

.bulb-cone, .bulb-glass {
  transform-origin: 50% 0;
  transition: opacity 1.2s ease, transform 1.2s ease, filter 1.2s ease;
}

/* And when the light finds Lexi, she is lit. She is chrome, not stage, so the
   glow is hung on the body rather than reached for through the dark. */
body.bulb-at-lexi #counter {
  transform: scale(1.16);
  transform-origin: 100% 0;
  filter: drop-shadow(0 0 0.7em rgba(255, 226, 160, 0.75)) drop-shadow(0 0 2.2em rgba(240, 190, 120, 0.45));
  transition: transform 1s ease, filter 1s ease;
  animation: lexi-caught 2.6s ease-in-out infinite;
}
@keyframes lexi-caught { 50% { filter: drop-shadow(0 0 0.9em rgba(255, 232, 175, 0.9)) drop-shadow(0 0 2.8em rgba(240, 190, 120, 0.6)); } }

@media (prefers-reduced-motion: reduce) {
  .bulb-rig { animation: none; }
  body.bulb-at-lexi #counter { transform: none; }
}

/* ---------- The dial: a wheel, and the word that finishes the sentence ----- */

/* The scale runs through a lit band across the middle, and whatever is
   standing in the band is the answer. The word that ends the sentence waits at
   the end of that band, so the centre row and the button read as one line:
   Yirmi üç · yaşındayım. */

.dial {
  --row-h: 2.5em;
  --wheel-h: 12.5em;
  margin-top: 1.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6em;
  width: 100%;
}

.dial-pick {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
}

.dial-wheel {
  position: relative;
  height: var(--wheel-h);
  width: min(11em, 52vw);
  border-radius: 0.9em;
  background: linear-gradient(rgba(243, 234, 216, 0.045), rgba(243, 234, 216, 0.015));
  box-shadow: inset 0 0 0 1px rgba(243, 234, 216, 0.07);
}
.dial-wheel.shake { animation: shake 0.35s ease; }

/* The band: the one place on the wheel where a number counts. It sits over
   the scale, takes no taps, and stays inside the wheel's own edges. The button
   beside it carries the same warmth when it is awake, so the two still read as
   one line without the band hanging off the side of the box. */
.dial-band {
  position: absolute;
  left: 0.4em;
  right: 0.4em;
  top: calc(50% - var(--row-h) / 2);
  height: var(--row-h);
  border-radius: 0.55em;
  background: linear-gradient(90deg, rgba(232, 193, 106, 0.13), rgba(232, 193, 106, 0.06));
  box-shadow: inset 0 0 0 1px rgba(232, 193, 106, 0.2);
  pointer-events: none;
}

/* The track is the window the drum turns behind. It clips, it carries the
   perspective that tilts the rows, and it fades at both ends so the scale
   reads as longer than the opening it is seen through. Nothing here scrolls:
   one notch is one number, so the list is moved by a transform and there is no
   scroll container to fight (see renderDial in engine.js). */
.dial-track {
  position: absolute;
  inset: 0;
  overflow: hidden;
  perspective: 640px;
  touch-action: none;
  mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}

.dial-list {
  /* Half a wheel of empty space at each end, so the first and last stops can
     still reach the band. Both values come off .dial, so this stays in step
     with the row height without JavaScript measuring anything. */
  padding-block: calc((var(--wheel-h) - var(--row-h)) / 2);
  transform-style: preserve-3d;
  /* One number's worth of travel, eased. The rows below use the same clock,
     so the whole drum arrives together. */
  transition: transform 0.3s cubic-bezier(0.25, 0.9, 0.25, 1);
}

.dial-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6em;
  width: 100%;
  height: var(--row-h);
  padding: 0 0.9em;
  background: none;
  border: none;
  cursor: pointer;
  /* Everything falls away from the middle. --near is how many stops from the
     band this row is and --off is the same carrying its sign, both set by
     engine.js on the handful close enough to be seen. The transition runs on
     the same clock as the list's, so a notch turns the whole drum one number
     in one motion. The defaults are what a row wears outside that window, and
     they must land at nothing. */
  opacity: calc(1 - var(--near, 6) * 0.2);
  transform:
    rotateX(calc(var(--off, 0) * -19deg))
    scale(calc(1 - var(--near, 6) * 0.05));
  transition:
    opacity 0.3s cubic-bezier(0.25, 0.9, 0.25, 1),
    transform 0.3s cubic-bezier(0.25, 0.9, 0.25, 1);
}

.dial-num {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--lavender);
  min-width: 2.2em;
  text-align: right;
}
.dial-row.on .dial-num { color: var(--cream); }
.dial-word {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--gold);
  text-align: left;
  white-space: nowrap;
}
/* The stop past the end of the scale: an answer nobody owes anybody. */
.dial-refuse { justify-content: center; }
.dial-refuse .dial-num { min-width: 0; letter-spacing: 0.32em; font-size: 1.1rem; }

/* The button waits at the end of the band, asleep until the wheel has moved:
   a scale nobody has touched must never be able to answer for them. */
.dial-submit {
  opacity: 0.3;
  pointer-events: none;
  transition: opacity 0.4s ease, background 0.4s ease, border-color 0.4s ease;
}
/* Awake, it wears the band's own warmth, so the centre row and the word that
   finishes the sentence read as one line across the gap between them. */
.dial-pick.ready .dial-submit {
  opacity: 1;
  pointer-events: auto;
  background: rgba(232, 193, 106, 0.1);
  border-color: rgba(232, 193, 106, 0.55);
}
.dial-submit.shake { animation: shake 0.35s ease; }

@media (prefers-reduced-motion: reduce) {
  .dial-track { perspective: none; }
  .dial-list { transition: none; }
  .dial-row { transform: none; transition: none; }
}

/* ---------- The typed answer: its shape, and what came back ---------- */

/* Not the answer. What an answer looks like. */
.input-ghost {
  margin-top: 0.9em;
  font-family: var(--sans);
  font-style: italic;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--lavender);
  opacity: 0.6;
}
.input-note, .dial-note { margin-top: 1em; }

/* ---------- The swap: the answer takes the question word's place ---------- */
/* The `chair` key is internal engine config and keeps its name. On screen
   this is a place in the sentence, not a piece of furniture: a bracket that
   holds one word, and holds still while the word inside it changes. */

.chairs {
  margin-top: 1.5em;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.1em;
  width: 100%;
}

.chair-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.28em;
  font-family: var(--serif);
  font-size: clamp(1.15rem, 3.6vw, 1.7rem);
  color: var(--cream);
  opacity: 0;
  transform: translateY(10px);
  animation: chair-in 0.7s ease forwards;
}
@keyframes chair-in { to { opacity: 1; transform: translateY(0); } }

/* The place itself: one bracket in the line, holding one word. Anything
   written on the bracket (.chair-tail, a person ending) belongs to the place
   and not to the word, so it survives the swap without moving a pixel. */
.chair-seat {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.2em;
  padding: 0.1em 0.5em 0.28em;
  border-bottom: 2px solid rgba(232, 193, 106, 0.5);
  border-radius: 0 0 0.25em 0.25em;
  transition: background 0.5s ease, border-color 0.5s ease;
}

.chair-sitter {
  display: inline-block;
  transition: transform 0.44s cubic-bezier(0.4, 0, 0.7, 0.2), opacity 0.44s ease;
}
/* The question word steps out to the left, the way something leaves a place
   it has been holding for a very long time. */
.chair-seat.leaving .chair-sitter {
  transform: translate(-1.4em, -0.55em) rotate(-9deg);
  opacity: 0;
}
/* And the answer walks in from the right and takes it. */
.chair-seat.taken {
  background: rgba(232, 193, 106, 0.07);
  border-bottom-color: var(--gold);
}
.chair-seat.taken .chair-sitter { animation: chair-sit 0.55s ease forwards; }
@keyframes chair-sit {
  from { transform: translate(1.3em, -0.55em) rotate(8deg); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.chair-pre, .chair-post { color: var(--cream); }
/* A tail is written on the place, not on the word, so it touches the bracket
   with no gap and never moves when the word inside changes. */
.chair-tail { color: var(--cream); margin-left: -0.28em; }
/* The mark the sentence ends on. It closes up against the last word, the way
   punctuation does, rather than standing off it like another word. */
.chair-end {
  color: var(--lavender);
  margin-left: -0.28em;
  transition: color 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
  .chair-row { animation: none; opacity: 1; transform: none; }
  .chair-seat.taken .chair-sitter { animation: none; }
  .chair-sitter { transition: none; }
}

/* ---------- The dosya: the file the planet keeps ---------- */

.dosya {
  margin-top: 1.4em;
  width: min(26em, 84vw);
  padding: 1.2em 1.4em 1.4em;
  border: 1px solid rgba(232, 193, 106, 0.22);
  border-radius: 0.5em;
  background: rgba(232, 193, 106, 0.035);
  display: flex;
  flex-direction: column;
  gap: 0.7em;
  text-align: left;
}
.dosya-title {
  font-family: var(--sans);
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lavender);
  padding-bottom: 0.5em;
  border-bottom: 1px solid rgba(232, 193, 106, 0.14);
}
.dosya-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.1em;
}
.dosya-q {
  font-family: var(--serif);
  font-size: 0.95rem;
  color: var(--lavender);
  flex-shrink: 0;
}
/* Every answer stands on its own line, on the same bracket as the big ones,
   shrunk to the size of a line in a file. */
.dosya-seat {
  position: relative;
  font-family: var(--serif);
  font-size: 1.02rem;
  color: var(--cream);
  text-align: right;
  padding: 0 0.35em 0.16em;
  border-bottom: 2px solid rgba(232, 193, 106, 0.42);
  border-radius: 0 0 0.2em 0.2em;
}
/* A question that was never put leaves its line blank. */
.dosya-seat.empty { min-width: 3.4em; border-bottom-style: dashed; }

/* Narrow screens cannot hold a question and its answer on one line, so the
   answer drops under its question. Twelve rows of that is a long scroll, so
   the whole file tightens rather than growing a scrollbar of its own. */
@media (max-width: 640px) {
  .dosya { gap: 0.45em; padding: 1em 1.1em 1.1em; }
  .dosya-row { flex-direction: column; align-items: flex-start; gap: 0.1em; }
  .dosya-q { font-size: 0.85rem; }
  .dosya-seat { text-align: left; font-size: 0.95rem; }
}