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

/* At least one viewport, and taller when the title block needs it: fixed at
   100dvh, a short window (a 1366x768 laptop, a phone with its toolbars) ran
   the block under the scroll cue, which then took the demo button's taps.
   The bottom padding keeps the cue's own room below the block. */
.signin-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 2rem 5rem;
  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;
}

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

/* ── 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;
}

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

.signin-scroll-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  /* Centred on the screen from a left: 50% anchor, it gets half the width
     to wrap in, and "Dowiedz się więcej" broke in two at 320px. */
  white-space: nowrap;
}

.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.7rem;
  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;
}

@media (hover: hover) {
  .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.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a7354;
  text-decoration: none;
  opacity: 0.8;
  transition: opacity 0.3s ease, color 0.3s ease;
}

@media (hover: hover) {
  .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.7rem;
  font-weight: 400;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-bottom: 2.5rem;
}

.signin-android-link {
  color: #5a4226;
  text-decoration: none;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .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;
}
/* One line on the landing: the Polish and German labels broke in two on a
   320px phone. They fit there with the narrower padding and tracking below
   480px. The demo wall's box is narrower and its labels longer, so there the
   button still wraps. */
.signin-box .google-btn { white-space: nowrap; }

.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);
}

@media (hover: hover) {
  .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;
}

/* ── The demo, under the sign-in: the same framed plate, lighter, with a
   line saying what it costs (nothing) ── */
.signin-demo-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  width: fit-content;
  margin: 1.4rem auto 0;
  padding: 0.55rem 1.6rem;
  border: 1px dashed #a08058;
  color: #5a4a30;
  text-decoration: none;
  transition: all 0.4s ease;
}
@media (hover: hover) {
  .signin-demo-btn:hover {
    border-style: solid;
    border-color: #7a5a30;
    color: #3a2a14;
    background: rgba(210, 190, 155, 0.16);
  }
}
.signin-demo-label {
  font-family: 'Cinzel', serif;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.signin-demo-note {
  font-family: 'Lora', serif;
  font-style: italic;
  font-size: 0.78rem;
  color: #65523a;
}

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

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

/* A short stagger: the buttons used to arrive 2.2s after the page, and a
   visitor deciding whether to stay was looking at an empty title card. The
   buttons have no stagger of their own now: they arrive with the box, since
   they are what the visitor came to press. */
.signin-logo { animation: fadeIn 0.8s ease-out 0.1s both; }
.signin-subtitle { animation: fadeIn 0.8s ease-out 0.2s both; }
.signin-divider { animation: fadeIn 0.8s ease-out 0.25s both; }
.signin-scroll-cue { animation: fadeIn 0.8s ease-out 0.5s both; }
.signin-edition { animation: fadeIn 0.8s ease-out 0.3s both; }
.signin-version { font-size: 0.55rem; opacity: 0.5; }

@media (prefers-reduced-motion: reduce) {
  .signin-box, .signin-box *, .signin-scroll-cue { animation: none !important; }
}

@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. A visit to another page turns it off as it goes
   (application.js), or its jump to the top of that page glided too. */
html:has(.signin-screen) { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html:has(.signin-screen) { scroll-behavior: auto; }
}

/* ── Legal pages and the demo hub: the parchment is pages/parchment.css ── */

.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;
}
/* German titles are one long word ("Datenschutzerklärung"), and at this
   size and tracking they ran 200px past a 320px phone, which then scrolled
   sideways. Smaller there, and broken with a hyphen if still too long. */
@media (max-width: 480px) {
  .legal-content h1 {
    font-size: 1.25rem;
    letter-spacing: 0.1em;
    hyphens: auto;
    overflow-wrap: break-word;
  }
}

.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;
}
@media (hover: hover) {
  .legal-content a:hover { text-decoration-color: rgba(106, 90, 58, 0.8); }
}

.legal-back {
  display: block;
  text-align: center;
  margin-top: 3rem;
  font-family: 'Lora', Georgia, serif;
  font-style: italic;
  font-size: 0.8rem;
  /* Was #9a8568 at 0.6 opacity, about 1.6:1. */
  color: var(--ink-muted);
  text-decoration: none;
  transition: color 0.3s ease;
}
@media (hover: hover) {
  .legal-back:hover { color: #3a2a14; 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 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;
}
@media (hover: hover) {
  .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) {
  /* 2rem of screen and 3.5rem of box padding a side left a 320px phone 214px
     for the buttons, and the Google one broke over four lines. */
  .signin-screen { padding-left: 1rem; padding-right: 1rem; }
  .signin-box { padding-left: 0.75rem; padding-right: 0.75rem; }
  .signin-box .google-btn { padding-inline: 1rem; letter-spacing: 0.1em; }

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

/* A short window (a 768-pixel laptop, a phone with its toolbars up) keeps
   both buttons above the fold by giving up air, not content. */
@media (max-height: 760px) {
  .signin-screen { padding-top: 1rem; }
  .signin-box { padding-top: 0.5rem; padding-bottom: 0.5rem; }
  .signin-logo { max-width: 280px; }
  .signin-divider { margin: 1.1rem auto; }
  .signin-edition { margin-bottom: 1.4rem; }
  .signin-demo-btn { margin-top: 1rem; }
}