/* Memory Französisch — cahier Seyès
   Ein Heftblatt auf dem Tisch: feine Linierung, rote Randlinie, Tintenblau.
   Die Akzentfarben leben in den SVG-Bildern (rouge, jaune, vert, bleu, rose). */

:root {
  --desk:         #E9E7DE;
  --paper:        #FCFCF7;
  --card:         #FFFFFF;
  --rule-fine:    #E7ECF7;
  --rule-strong:  #D2DCEF;
  --rule-vert:    #EDF1FA;
  --edge:         #BAC7E1;
  --marge:        #D9463F;
  --encre:        #1E2B57;
  --encre-soft:   #6A769E;
  --juste:        #2E7D5B;

  --unit:  8px;    /* Seyès Feinlinie */
  --major: 32px;   /* Seyès Hauptlinie */

  --font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-hand: "Caveat", "Segoe Script", cursive;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; background: var(--desk); }

body {
  margin: 0;
  padding: clamp(0px, 3vw, 40px);
  color: var(--encre);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  background: var(--desk);
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ---------- Das Blatt ---------- */

.sheet {
  position: relative;
  display: block;
  max-width: 940px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 52px) clamp(18px, 4vw, 44px) clamp(36px, 5vw, 60px);
  padding-left: clamp(44px, 8vw, 92px);
  background-color: var(--paper);
  /* Hauptlinien liegen über den Feinlinien, Senkrechte bleiben sehr blass */
  background-image:
    repeating-linear-gradient(to right,  var(--rule-vert)   0 1px, transparent 1px var(--major)),
    repeating-linear-gradient(to bottom, var(--rule-strong) 0 1px, transparent 1px var(--major)),
    repeating-linear-gradient(to bottom, var(--rule-fine)   0 1px, transparent 1px var(--unit));
  box-shadow: 0 1px 2px rgba(30, 43, 87, .12), 0 18px 40px -24px rgba(30, 43, 87, .45);
}

.sheet::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: clamp(26px, 5vw, 58px);
  width: 2px;
  background: var(--marge);
  opacity: .5;
}

/* ---------- Kopf ---------- */

.masthead { position: relative; margin-bottom: clamp(22px, 3.5vw, 36px); }

.eyebrow {
  margin: 0 0 6px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--encre-soft);
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.4rem, 9vw, 4.2rem);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.035em;
}

.lede {
  margin: 8px 0 0;
  max-width: 34ch;
  font-size: clamp(.98rem, 2.2vw, 1.08rem);
  color: var(--encre-soft);
}

.marginalia {
  position: absolute;
  top: -2px; right: 0;
  margin: 0;
  transform: rotate(-7deg);
  font-family: var(--font-hand);
  font-size: 1.7rem;
  color: var(--marge);
  opacity: .85;
}

/* ---------- Zwei Spalten: Spielfeld und Vokabelheft ---------- */

.layout { display: grid; gap: clamp(24px, 4vw, 40px); }

@media (min-width: 800px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 262px;
    align-items: start;
  }
  .side {
    padding-left: clamp(16px, 2.5vw, 26px);
    border-left: 1px solid var(--rule-strong);
  }
}

.play { min-width: 0; }

.side { display: grid; gap: clamp(22px, 3.5vw, 30px); align-content: start; }

/* ---------- Spielfeld ---------- */

.board {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(6px, 1.4vw, 10px);
  max-width: 480px;
}

.card {
  position: relative;
  aspect-ratio: 4 / 5;
  padding: 0;
  border: 0;
  background: none;
  border-radius: 7px;
  cursor: pointer;
  perspective: 700px;
  animation: deal .4s both cubic-bezier(.2, .7, .3, 1);
  animation-delay: calc(var(--i, 0) * 26ms);
}

.card:disabled { cursor: default; }

.card:focus-visible { outline: 3px solid var(--encre); outline-offset: 3px; }

@keyframes deal {
  from { opacity: 0; transform: translateY(10px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.card__inner {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.4, .1, .2, 1);
}

.card.is-up .card__inner,
.card.is-matched .card__inner { transform: rotateY(180deg); }

.card__face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 5px;
  border: 1px solid var(--edge);
  border-radius: 7px;
  background: var(--card);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 0 1px 0 rgba(30, 43, 87, .07), 0 5px 12px -9px rgba(30, 43, 87, .5);
  overflow: hidden;
}

/* Verdeckt: ein Heftkästchen, deutlich abgesetzt vom Blatt */
.card__face--back {
  border-color: #93A6CE;
  background-color: #EFF3FC;
  background-image:
    repeating-linear-gradient(to right,  #DAE2F3 0 1px, transparent 1px 12px),
    repeating-linear-gradient(to bottom, #DAE2F3 0 1px, transparent 1px 12px);
  box-shadow: 0 1px 0 rgba(30, 43, 87, .12), 0 6px 14px -10px rgba(30, 43, 87, .6);
}

.card__face--back::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 24%;
  width: 1.5px;
  background: var(--marge);
  opacity: .65;
}

.card__face--front { transform: rotateY(180deg); }

.card__art { width: 82%; height: 82%; color: var(--encre); }
.card__art svg { display: block; width: 100%; height: 100%; }

.card__word {
  font-family: var(--font-display);
  font-size: clamp(.7rem, 2.3vw, .95rem);
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  text-wrap: balance;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--edge);
}

.card.is-matched .card__face--front {
  border-color: var(--juste);
  background: #F4FAF6;
  box-shadow: none;
}

.card.is-matched .card__word { color: var(--juste); border-bottom-color: var(--juste); }
.card.is-wrong .card__face--front { border-color: var(--marge); }

/* ---------- Punktestand ---------- */

.scorebar {
  display: flex;
  align-items: baseline;
  gap: clamp(14px, 3vw, 26px);
  max-width: 480px;
  margin-top: clamp(16px, 3vw, 24px);
  padding-top: 12px;
  border-top: 1px solid var(--rule-strong);
}

.stat {
  margin: 0;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--encre-soft);
}

.stat b {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--encre);
}

.stat__of { color: var(--encre-soft); }

.btn {
  margin-left: auto;
  padding: 8px 17px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: var(--card);
  background: var(--encre);
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}

.btn:hover { background: #2C3C74; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: 3px solid var(--marge); outline-offset: 3px; }

.status {
  max-width: 480px;
  margin: 12px 0 0;
  min-height: 1.5em;
  font-size: .92rem;
  color: var(--encre-soft);
}

.win {
  margin: 2px 0 0;
  font-family: var(--font-hand);
  font-size: 1.9rem;
  line-height: 1.15;
  color: var(--juste);
  transform: rotate(-1.5deg);
}

/* ---------- Eintragen ---------- */

.entry {
  max-width: 480px;
  margin: 14px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--rule-strong);
}

.entry__label {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--encre-soft);
}

.entry__hint { margin: 3px 0 9px; font-size: .86rem; color: var(--encre-soft); }

.entry__row { display: flex; flex-wrap: wrap; gap: 9px; }

.entry__input {
  flex: 1 1 9ch;
  min-width: 0;
  padding: 7px 11px;
  font: inherit;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--encre);
  background: var(--card);
  border: 1px solid var(--edge);
  border-radius: 7px;
}

.entry__input:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }

.entry .btn { margin-left: 0; flex: 0 0 auto; }

.entry__msg { margin: 9px 0 0; min-height: 1.4em; font-size: .88rem; color: var(--encre-soft); }

/* ---------- Vokabelheft ---------- */

.cahier__h {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--encre-soft);
}

.cahier__empty { margin: 0; color: var(--encre-soft); font-size: .92rem; }

.cahier__list { margin: 0; padding: 0; list-style: none; }

.cahier__row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule-strong);
  animation: write .35s both ease-out;
}

@keyframes write {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: none; }
}

.cahier__art { flex: 0 0 24px; height: 24px; color: var(--encre); }
.cahier__art svg { display: block; width: 100%; height: 100%; }

.cahier__fr { font-family: var(--font-display); font-weight: 600; font-size: .98rem; }

.cahier__de {
  margin-left: auto;
  font-family: var(--font-hand);
  font-size: 1.1rem;
  color: var(--encre-soft);
}

/* ---------- Rangliste ---------- */

.rank__h {
  margin: 0 0 10px;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--encre-soft);
}

.rank__note { margin: 0; color: var(--encre-soft); font-size: .92rem; }

.rank__list { margin: 0; padding: 0; list-style: none; counter-reset: none; }

.rank__row {
  display: grid;
  grid-template-columns: 2.4ch minmax(0, 1fr) auto auto;
  align-items: baseline;
  column-gap: 7px;
  padding: 5px 0;
  border-bottom: 1px solid var(--rule-strong);
}

.rank__pos {
  font-family: var(--font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--encre-soft);
}

.rank__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: .96rem;
  overflow-wrap: anywhere;
}

.rank__time {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .96rem;
  font-variant-numeric: tabular-nums;
}

.rank__tries {
  font-family: var(--font-hand);
  font-size: 1rem;
  white-space: nowrap;
  color: var(--encre-soft);
}

/* Der eigene Eintrag: rote Randmarke wie eine Korrektur im Heft */
.rank__row.is-mine {
  margin-left: -9px;
  padding-left: 6px;
  border-left: 3px solid var(--marge);
}

.rank__row.is-mine .rank__time { color: var(--juste); }

/* ---------- Enge Schirme ---------- */

@media (max-width: 799px) {
  .board, .scorebar, .status { max-width: 100%; }
  .cahier__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    column-gap: clamp(16px, 4vw, 32px);
  }
}

@media (max-width: 420px) {
  .board { gap: 5px; }
  .marginalia { font-size: 1.3rem; }
  .scorebar { flex-wrap: wrap; row-gap: 10px; }
  .btn { margin-left: 0; width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .card, .cahier__row { animation: none; }
  .card__inner, .btn { transition: none; }
}