/* Sign-in page — antiquarian manuscript title page */

.signin-screen {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: transparent;
  /* Anchors the scroll cue to the bottom of the first viewport without
     disturbing the centring of the title block. */
  position: relative;
}


.signin-box {
  border: none;
  background: transparent;
  padding: 3rem 3.5rem;
  max-width: 540px;
  width: 100%;
  text-align: center;
  position: relative;
  z-index: 1;
}

/* ── Ornamental top flourish ── */
.signin-ornament-top,
.signin-ornament-bottom {
  display: block;
  font-size: 1.6rem;
  color: #8a7354;
  letter-spacing: 0.3em;
  line-height: 1;
  opacity: 0.6;
  user-select: none;
}

.signin-ornament-top {
  margin-bottom: 2rem;
}

.signin-ornament-bottom {
  margin-top: 2rem;
}

/* ── Logo image ── */
.signin-logo {
  max-width: 420px;
  width: 100%;
  height: auto;
  margin-bottom: 0.3rem;
}

/* ── Title: the book name (fallback) ── */
.signin-title {
  font-family: 'Cinzel', 'Palatino Linotype', serif;
  font-size: 2.8rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #3a2a14;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow: 0 1px 0 rgba(255, 245, 220, 0.5);
}

/* ── Subtitle ── */
.signin-subtitle {
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: #7a6548;
  margin-bottom: 0;
  letter-spacing: 0.06em;
}

/* ── Scroll cue: the title screen stays clean, so it has to advertise that
      there is more below the fold. ── */
.signin-scroll-cue {
  position: absolute;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  /* .signin-box carries z-index: 1 and its bottom padding reaches over the
     cue, so without this the box wins hit-testing and swallows the click. */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  text-decoration: none;
  color: #8a7354;
  opacity: 0.75;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.signin-scroll-cue:hover {
  opacity: 1;
  color: #3a2a14;
}

.signin-scroll-label {
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}

.signin-scroll-arrow {
  font-size: 1.5rem;
  line-height: 0.6;
  animation: scrollNudge 2.4s ease-in-out infinite;
}

@keyframes scrollNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(0.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .signin-scroll-arrow { animation: none; }
}

/* ── Below the fold: what the product is, and where to go next ── */
/* Wider than the prose it holds so the five links sit on one row; the text
   keeps its own narrower measure below. */
.landing-more {
  max-width: 52rem;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
  text-align: center;
  scroll-margin-top: 2rem;
}

.landing-heading {
  font-family: 'Cinzel', serif;
  font-size: 1.1rem;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #3a2a14;
  margin-bottom: 1.4rem;
}

.landing-intro {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.75;
  color: #5a4a30;
  max-width: 36rem;
  margin: 0 auto 1.6rem;
}

.landing-features {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.86rem;
  line-height: 1.7;
  color: #6a5540;
  list-style: none;
  padding: 0;
  margin: 0 0 2.4rem;
  text-align: left;
  display: inline-block;
}

.landing-features li {
  margin-bottom: 0.5rem;
}

.landing-features li::before {
  content: "❦";
  color: #a0895e;
  margin-right: 0.6rem;
}

.landing-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Tight enough that all five fit one row at the section's 40rem width;
     they wrap on narrow viewports. */
  gap: 0.45rem;
}

.landing-link {
  font-family: 'Cinzel', serif;
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #6a5540;
  text-decoration: none;
  border: 1px solid rgba(138, 115, 84, 0.45);
  padding: 0.5rem 0.8rem;
  transition: background 0.3s ease, color 0.3s ease;
}

.landing-link:hover {
  background: rgba(138, 115, 84, 0.15);
  color: #3a2a14;
}

.landing-back-to-top {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  margin-top: 2.6rem;
  font-family: 'Cinzel', serif;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a7354;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s ease, color 0.3s ease;
}

.landing-back-to-top:hover {
  opacity: 1;
  color: #3a2a14;
}

.landing-back-arrow {
  font-size: 1.3rem;
  line-height: 0.7;
}

/* ── Decorative rule ── */
.signin-divider {
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent 0%,
    #a0895e 20%,
    #8a7354 50%,
    #a0895e 80%,
    transparent 100%
  );
  margin: 2rem auto;
  width: 70%;
  opacity: 0.5;
}

/* ── Volume / edition line ── */
.signin-edition {
  font-family: 'Cinzel', serif;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #9a8568;
  margin-bottom: 2.5rem;
}

.signin-android-link {
  color: #5a4226;
  text-decoration: none;
  transition: color 0.3s ease;
}
.signin-android-link:hover {
  color: #3a2a14;
}

/* ── Sign-in button styled as an invitation ── */
.google-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  background: rgba(210, 190, 155, 0.12);
  border: 1px solid #a08058;
  box-shadow: inset 0 0 0 1px rgba(160, 128, 88, 0.15), 0 1px 3px rgba(90, 60, 20, 0.08);
  color: #5a4a30;
  padding: 0.65rem 1.6rem;
  cursor: pointer;
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  width: auto;
  justify-content: center;
  transition: all 0.4s ease;
  position: relative;
}

.google-btn::before,
.google-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24px;
  height: 1px;
  background: linear-gradient(to var(--dir, right), #b5a382, transparent);
  opacity: 0.5;
  transition: width 0.4s ease, opacity 0.4s ease;
}
.google-btn::before {
  --dir: left;
  right: calc(100% + 10px);
}
.google-btn::after {
  --dir: right;
  left: calc(100% + 10px);
}

.google-btn:hover {
  border-color: #7a5a30;
  color: #3a2a14;
  background: rgba(210, 190, 155, 0.22);
  box-shadow: inset 0 0 0 1px rgba(160, 128, 88, 0.25), 0 1px 4px rgba(90, 60, 20, 0.12);
}
.google-btn:hover::before,
.google-btn:hover::after {
  width: 36px;
  opacity: 0.8;
}

.google-btn svg {
  flex-shrink: 0;
  opacity: 0.8;
}

/* ── Entrance animation ── */
.signin-box {
  animation: pageReveal 1.2s ease-out both;
}

@keyframes pageReveal {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.signin-ornament-top { animation: fadeIn 1.6s ease-out 0.2s both; }
.signin-logo { animation: fadeIn 1.2s ease-out 0.4s both; }
.signin-subtitle { animation: fadeIn 1.2s ease-out 0.6s both; }
.signin-divider { animation: fadeIn 1.2s ease-out 0.7s both; }
.signin-scroll-cue { animation: fadeIn 1.2s ease-out 1.4s both; }
.signin-edition { animation: fadeIn 1.2s ease-out 0.8s both; }
.signin-version { font-size: 0.55rem; opacity: 0.5; }
.google-btn { animation: fadeIn 1.2s ease-out 1.0s both; }
.signin-ornament-bottom { animation: fadeIn 1.6s ease-out 1.1s both; }

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Override container for sign-in page. Without this the container's 1rem
   gutter pushes the 100dvh title screen past the viewport, leaving a dead
   scroll gap below it. (The old selector was `body.sessions-page`, a class
   nothing ever sets, so this never actually applied.) */
body:has(.signin-screen) > .container { padding: 0; max-width: 100%; }

/* Only the horizontal axis may be clipped. `overflow: hidden` here used to
   disable the mouse wheel outright while still allowing anchor jumps — which
   left a visitor stranded at the bottom with no way to scroll back up. */
body:has(.signin-screen),
body:has(.signin-screen) .container {
  overflow-x: hidden;
}

/* Anchor jumps between the title screen and the section below it glide
   instead of teleporting. */
html:has(.signin-screen) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.signin-screen) { scroll-behavior: auto; }
}
body:has(.signin-screen) {
  background:
    repeating-conic-gradient(
      rgba(120, 90, 50, 0.03) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px,
    radial-gradient(ellipse at 0% 0%, rgba(90, 60, 30, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(100, 65, 25, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 0% 100%, rgba(95, 60, 30, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(90, 55, 25, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 40%, #efe3cd 0%, #e2d3b8 40%, #d4c4a4 80%);
}

/* ── Legal pages and the demo hub — same parchment surface ── */
body:has(.legal-page),
body:has(.demo-hub),
body:has(.demo-wall-screen) {
  background:
    repeating-conic-gradient(
      rgba(120, 90, 50, 0.03) 0% 25%,
      transparent 0% 50%
    ) 0 0 / 4px 4px,
    radial-gradient(ellipse at 0% 0%, rgba(90, 60, 30, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 100% 0%, rgba(100, 65, 25, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 0% 100%, rgba(95, 60, 30, 0.12) 0%, transparent 45%),
    radial-gradient(ellipse at 100% 100%, rgba(90, 55, 25, 0.18) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 40%, #efe3cd 0%, #e2d3b8 40%, #d4c4a4 80%);
}

.legal-page {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 4rem 2rem;
}

.legal-content {
  max-width: 640px;
  width: 100%;
  animation: pageReveal 0.8s ease-out both;
}

.legal-content h1 {
  font-family: 'Cinzel', serif;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #3a2a14;
  margin-bottom: 2rem;
  text-align: center;
}

.legal-content h2 {
  font-family: 'Cinzel', serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5a4a30;
  margin: 2rem 0 0.8rem;
}

.legal-content p,
.legal-content li {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.85rem;
  line-height: 1.75;
  color: #5a4a30;
}

.legal-content ul {
  padding-left: 1.2em;
  list-style-type: '— ';
}

.legal-content li { margin-bottom: 0.3rem; }

.legal-content a {
  color: #6a5a3a;
  text-decoration: underline;
  text-decoration-color: rgba(106, 90, 58, 0.3);
  text-underline-offset: 0.15em;
  transition: text-decoration-color 0.3s ease;
}
.legal-content a:hover { text-decoration-color: rgba(106, 90, 58, 0.8); }

.legal-placeholder {
  text-align: center;
  font-style: italic;
  opacity: 0.6;
}

.legal-back {
  display: block;
  text-align: center;
  margin-top: 3rem;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.8rem;
  color: #9a8568;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.3s ease;
}
.legal-back:hover { opacity: 1; text-decoration: none; }

/* ── Cancellation page (§ 312k BGB) ──
   The body carries the game theme's monospace font and pale text, meant for
   the dark game screens, and the legal pages only restyle headings,
   paragraphs, lists and links. Everything a form adds (legends, labels,
   fields, table cells, the button) is put on the parchment palette here. */
.cancellation { color: #3a2a14; }
.cancellation-form fieldset {
  border: 1px solid rgba(90, 74, 48, 0.3);
  border-radius: 6px;
  margin: 0 0 1.25rem;
  padding: 0.75rem 1rem 1rem;
}
.cancellation-form legend {
  font-family: 'Cinzel', serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5a4a30;
  padding: 0 0.4rem;
}
.cancellation-form label,
.cancellation-receipt th,
.cancellation-receipt td {
  font-family: 'Lora', Georgia, serif;
  font-size: 0.85rem;
  line-height: 1.6;
  color: #3a2a14;
}
.cancellation-form label { display: block; margin: 0.6rem 0 0.25rem; }
.cancellation-form .cancellation-choice {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
  margin: 0.35rem 0;
}
.cancellation-form input[type="radio"] { accent-color: #5a4a30; }
.cancellation-form input[type="text"],
.cancellation-form input[type="email"],
.cancellation-form input[type="date"],
.cancellation-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: 'Lora', Georgia, serif;
  font-size: 0.85rem;
  color: #3a2a14;
  background: rgba(255, 252, 244, 0.6);
  border: 1px solid rgba(90, 74, 48, 0.35);
  border-radius: 4px;
  padding: 0.45rem 0.55rem;
}
.cancellation-form input:focus,
.cancellation-form textarea:focus {
  outline: 2px solid rgba(90, 74, 48, 0.45);
  outline-offset: 1px;
}
.cancellation code { font-size: 0.8rem; color: #3a2a14; }
.cancellation-hint p,
.cancellation-hint li,
p.cancellation-hint { font-size: 0.8rem; opacity: 0.85; }
.cancellation-errors { margin: 0 0 1rem; }
.cancellation-errors li { color: #8a2c20; }
.cancellation .btn {
  font-family: 'Cinzel', serif;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #3a2a14;
  border-color: #5a4a30;
  background: transparent;
}
.cancellation .btn:hover { background: #3a2a14; color: #efe3cd; }
.cancellation-submit { margin-top: 0.5rem; }
.cancellation-form + .cancellation-hint { margin-top: 1.25rem; }
.cancellation-receipt { border-collapse: collapse; width: 100%; margin: 0.5rem 0 1rem; }
.cancellation-receipt th,
.cancellation-receipt td {
  text-align: left;
  vertical-align: top;
  padding: 0.4rem 0.6rem 0.4rem 0;
  border-bottom: 1px solid rgba(90, 74, 48, 0.2);
}
.cancellation-receipt th { width: 40%; font-weight: 600; }

/* Printing restarts .legal-content's pageReveal animation, which begins at
   opacity 0, so every legal page, the cancellation receipt included, printed
   as an invisible text layer. The parchment background and the vignette
   overlay are screen decoration, and cost ink. */
@media print {
  body::before,
  body::after { display: none; }
  body:has(.legal-page) { background: #fff; }
  .legal-page { min-height: 0; padding: 0; }
  .legal-content { animation: none; opacity: 1; transform: none; }
  .cancellation button,
  .legal-back,
  .site-footer,
  .app-nav { display: none; }
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .signin-title {
    font-size: 2rem;
    letter-spacing: 0.16em;
  }

  body:has(.signin-screen) .site-footer {
    font-size: 0.58rem;
    bottom: 1.2rem;
  }
}