/*
 * «Стол» — стол детектива Рины (из бывшего варианта 1).
 * Стол из главного меню игры во весь экран; игра — фотография с карточкой-запиской и штампом статуса;
 * языки — тканевые закладки, свисающие с верхнего края.
 * Анимация: лампа зажигается, фото ложится на стол, записка выезжает из-под фото, штамп «ставится»;
 * дальше — пыль в луче лампы, лёгкий параллакс от мыши, тени от лампы, переворот фото при смене языка.
 */

/* ---------- Сцена: стол, свет, пыль ---------- */

.scene { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
/* Сдвиг от мыши задаёт home.js прямо в transform — без пересчёта стилей всей страницы */
.scene__move {
  position: absolute;
  inset: -3%;
  will-change: transform;
}
.scene__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}
/* Всё дальше от лампы уходит в вечерний полумрак — так карточки лучше читаются */
.scene__shade {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 95% 85% at var(--lamp-x, 12%) var(--lamp-y, 20%), rgba(10, 5, 2, 0) 25%, rgba(10, 5, 2, .5) 70%, rgba(8, 4, 2, .78) 100%),
    linear-gradient(to bottom, rgba(8, 4, 2, .35), rgba(8, 4, 2, 0) 22%, rgba(8, 4, 2, 0) 80%, rgba(8, 4, 2, .55));
}
.scene__glow {
  position: absolute;
  inset: 0;
  /* обычное наложение без смешивания цветов: смешивание во весь экран дорого для видеокарты */
  background: radial-gradient(circle at var(--lamp-x, 12%) var(--lamp-y, 20%), rgba(255, 196, 124, .24), rgba(255, 170, 90, .08) 20%, rgba(255, 160, 80, 0) 42%);
  animation: lamp-breathe 7s ease-in-out 1.8s infinite;
  will-change: opacity;
}
.scene__dust { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Темнота до того, как зажглась лампа */
.scene__dark {
  position: absolute;
  inset: 0;
  background: #050302;
  opacity: 0;
  animation: lamp-on 1.5s linear backwards;
  will-change: opacity;
}

@keyframes lamp-on {
  0%, 16% { opacity: .94; }
  20% { opacity: .5; }
  24% { opacity: .86; }
  31% { opacity: .28; }
  36% { opacity: .55; }
  100% { opacity: 0; }
}
@keyframes lamp-breathe {
  0%, 100% { opacity: 1; }
  38% { opacity: .82; }
  41% { opacity: .95; }
  70% { opacity: .88; }
}

/* ---------- Шапка: надпись и закладки ---------- */

.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
}

/* Надпись RinaGame — на оторванной полоске бумаги, приклеенной к столу */
.brand {
  margin-top: clamp(1.1rem, 3vw, 2rem);
  filter: drop-shadow(3px 6px 6px rgba(var(--shadow-ink), .55));
  animation: label-in .7s cubic-bezier(.2, .8, .3, 1) .45s backwards;
}
.brand__paper {
  display: inline-block;
  padding: .3em 1em .38em;
  font-family: var(--font-sign);
  font-size: clamp(1.55rem, 3.4vw, 2.5rem);
  line-height: 1;
  color: var(--heading);
  background: var(--grain), linear-gradient(100deg, #F6E8CC, var(--paper-light) 45%, #E9D2A8);
  clip-path: polygon(1.5% 6%, 4% 0, 30% 3%, 58% 0, 86% 4%, 99% 0, 97% 32%, 100% 58%, 98% 100%, 70% 96%, 42% 100%, 14% 96%, 0 100%, 2% 64%, 0 34%);
  transform: rotate(-2.2deg);
}
@keyframes label-in {
  from { opacity: 0; transform: translate(-14px, -10px) rotate(-6deg); }
  to { opacity: 1; transform: none; }
}

/* Закладки блокнота: каждая — лента с вырезом «ласточкин хвост» */
.bookmarks {
  display: flex;
  gap: .45rem;
  filter: drop-shadow(2px 6px 5px rgba(var(--shadow-ink), .55));
}
.ribbon {
  --cloth: var(--tab-red-deep);
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transform: translateY(-1.1rem);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1);
  animation: ribbon-in .8s cubic-bezier(.2, .9, .3, 1.2) backwards;
  animation-delay: calc(.35s + var(--n, 0) * .12s);
}
.ribbon:nth-child(4n + 2) { --cloth: var(--tab-blue-deep); }
.ribbon:nth-child(4n + 3) { --cloth: var(--tab-green-deep); }
.ribbon:nth-child(4n + 4) { --cloth: #7A5A1E; }
.ribbon__cloth {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 6.4rem;
  height: 5.6rem;
  padding: 0 .9rem 1.55rem;
  color: var(--light);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  /* фактура репсовой ленты — тонкие продольные рубчики */
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .06) 0 1px, rgba(0, 0, 0, 0) 1px 3px),
    linear-gradient(90deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, .22)),
    var(--cloth);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - .9rem), 0 100%);
}
.ribbon[aria-pressed="true"] { transform: translateY(0); }
.ribbon[aria-pressed="false"]:hover { transform: translateY(-.55rem); }
.ribbon:focus-visible { outline-offset: -2px; }
@keyframes ribbon-in {
  from { transform: translateY(-110%); }
}

/* ---------- Игры на столе ---------- */

.case-list {
  width: 100%;
  max-width: 70rem;
  display: grid;
  gap: 4.5rem 3rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.case {
  --tilt-photo: -2.4deg;
  --tilt-note: 1.7deg;
  --sx: 8px;   /* направление тени: от лампы, считает home.js */
  --sy: 12px;
  perspective: 1800px;
}
.case:nth-child(3n + 2) { --tilt-photo: 1.8deg; --tilt-note: -1.5deg; }
.case:nth-child(3n + 3) { --tilt-photo: -1.2deg; --tilt-note: 2.2deg; }
.case:only-child { grid-column: 1 / -1; }

.case__body { transform-style: preserve-3d; }
.case__body.is-flipping { animation: flip .64s cubic-bezier(.45, 0, .55, 1); }
@keyframes flip {
  0% { transform: none; }
  50% { transform: rotateY(88deg) translateZ(30px); }
  100% { transform: none; }
}

.case__link {
  display: block;
  position: relative;
  color: var(--ink);
  text-decoration: none;
  transition: transform .5s cubic-bezier(.2, .7, .2, 1);
}
.case:only-child .case__link {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  align-items: start;
}

/* Фотография с белыми полями */
.case__photo {
  position: relative;
  padding: clamp(.45rem, 1.1vw, .8rem);
  background: linear-gradient(160deg, #F4EAD5, #E8DABD);
  box-shadow:
    calc(var(--sx) * .25) calc(var(--sy) * .25) 3px rgba(var(--shadow-ink), .45),
    var(--sx) var(--sy) 26px rgba(var(--shadow-ink), .55);
  transform: rotate(var(--tilt-photo));
  transition: box-shadow .5s cubic-bezier(.2, .7, .2, 1);
  animation: photo-drop .85s cubic-bezier(.22, .9, .32, 1.06) backwards;
  animation-delay: calc(.75s + var(--i, 0) * .18s);
}
.case__photo img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  filter: sepia(.1) saturate(.95);
}
/* Блик глянца, проезжает по фото при наведении */
.case__gloss {
  position: absolute;
  inset: clamp(.45rem, 1.1vw, .8rem);
  background: linear-gradient(115deg, rgba(255, 244, 222, 0) 35%, rgba(255, 244, 222, .2) 50%, rgba(255, 244, 222, 0) 65%);
  background-size: 260% 100%;
  background-position: 120% 0;
  transition: background-position .9s cubic-bezier(.3, .6, .2, 1);
}
@keyframes photo-drop {
  0% { opacity: 0; transform: translate(-3%, -16%) rotate(calc(var(--tilt-photo) - 10deg)) scale(1.16); }
  45% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--tilt-photo)); }
}

/* Карточка-записка: плотная бумага, красная линейка под заголовком — как у картотечной карточки */
.case__note {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: .65rem;
  padding: 1.5rem 1.5rem 1.3rem;
  margin: -1.6rem .9rem 0;
  background: var(--grain), radial-gradient(ellipse at 25% 15%, #F7EAD0, var(--paper-light) 45%, #E6CFA3);
  box-shadow:
    calc(var(--sx) * .2) calc(var(--sy) * .2) 2px rgba(var(--shadow-ink), .4),
    calc(var(--sx) * .8) calc(var(--sy) * .8) 22px rgba(var(--shadow-ink), .5);
  transform: rotate(var(--tilt-note));
  transition: box-shadow .5s cubic-bezier(.2, .7, .2, 1);
  animation: note-slide .7s cubic-bezier(.2, .8, .3, 1) backwards;
  animation-delay: calc(1.25s + var(--i, 0) * .18s);
}
.case:only-child .case__note { margin: 4.8rem 0 0 -3.6rem; }
@keyframes note-slide {
  0% { opacity: 0; transform: translate(-38%, -4%) rotate(-3deg); }
  30% { opacity: 1; }
  100% { opacity: 1; transform: rotate(var(--tilt-note)); }
}
/* Скрепка, держит записку */
.case__clip {
  position: absolute;
  top: -1.55rem;
  left: 1.6rem;
  width: 1.15rem;
  height: 3.4rem;
  filter: drop-shadow(1px 2px 1px rgba(var(--shadow-ink), .5));
}

.case__genre {
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.case__title {
  font-family: var(--font-sign);
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.12;
  color: var(--heading);
  padding-bottom: .55rem;
  border-bottom: 2px solid rgba(199, 82, 66, .6);
}
.case__tagline { font-size: 1.02rem; line-height: 1.55; max-width: 34ch; }
.case__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .9rem 1rem;
  margin-top: .35rem;
}
.case__more {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 600;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .22em;
  transition: color .2s;
}
.case__more svg { width: 1.1em; height: 1.1em; transition: transform .3s; }

/* Резиновый штамп статуса: двойная рамка, неровные чернила; у вышедшей игры под статусом дата */
.stamp {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: .32em .7em .26em;
  line-height: 1.25;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--link-hover);
  border: 3px double currentColor;
  border-radius: 5px;
  transform: rotate(-7deg);
  /* неровные чернила — маска-плитка (tools/prepare_assets.py) */
  -webkit-mask-image: url("../media/ui/stamp-mask.png");
  mask-image: url("../media/ui/stamp-mask.png");
  -webkit-mask-size: 140px;
  mask-size: 140px;
  animation: stamp-hit .5s cubic-bezier(.3, 1.6, .5, 1) backwards;
  animation-delay: calc(1.85s + var(--i, 0) * .18s);
}
.stamp__date {
  margin-top: .2em;
  padding-top: .15em;
  border-top: 1px solid currentColor;
  font-size: .86em;
  font-weight: 700;
  letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.stamp.is-again { animation-delay: .1s; }
@keyframes stamp-hit {
  0% { opacity: 0; transform: rotate(-22deg) scale(2.3); }
  55% { opacity: 1; }
  100% { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* Наведение: фото приподнимается к лампе, тень уходит дальше и мягче */
@media (hover: hover) and (pointer: fine) {
  .case__link:hover { transform: translate(calc(var(--sx) * -.35), calc(var(--sy) * -.35 - 6px)) rotate(-.5deg); }
  .case__link:hover .case__photo {
    box-shadow:
      calc(var(--sx) * .6) calc(var(--sy) * .6) 8px rgba(var(--shadow-ink), .35),
      calc(var(--sx) * 2.2) calc(var(--sy) * 2.2) 42px rgba(var(--shadow-ink), .5);
  }
  .case__link:hover .case__note {
    box-shadow:
      calc(var(--sx) * .5) calc(var(--sy) * .5) 6px rgba(var(--shadow-ink), .3),
      calc(var(--sx) * 1.8) calc(var(--sy) * 1.8) 34px rgba(var(--shadow-ink), .45);
  }
  .case__link:hover .case__gloss { background-position: -20% 0; }
  .case__link:hover .case__more { color: var(--link-hover); }
  .case__link:hover .case__more svg { transform: translateX(4px); }
}
.case__link:focus-visible { outline-offset: 10px; }

/* ---------- Узкие экраны ---------- */

@media (max-width: 760px) {
  .scene__photo { object-position: 7% 50%; }
  .case:only-child .case__link { display: block; }
  .case:only-child .case__note { margin: -1.6rem .9rem 0; }
  .case__clip { left: auto; right: 1.6rem; }
  .ribbon__cloth { min-width: 5.3rem; height: 4.9rem; padding-inline: .6rem; font-size: .88rem; padding-bottom: 1.45rem; }
  .bookmarks { gap: .3rem; }
}
@media (max-width: 380px) {
  .ribbon__cloth { min-width: 4.7rem; font-size: .82rem; }
}

@media (prefers-reduced-motion: reduce) {
  .scene__move { transform: none; }
}