/* =========================================================
   Logikquadrate - Web-Kostprobe

   Vier Spielarten auf einem Brett. Die Optik ist bewusst nicht
   die der Sudoku-Seite: die trägt die Zeitungswelt von Sudoku
   Pro und gehört damit zu einem bestimmten Produkt. Hier ist es
   der karierte Block - Millimeterpapier, Bleistift, ein blauer
   Raster - also dieselbe Methode (Papier, Tinte, genau eine
   Signalfarbe), aber ein eigener Ton.

   Die Signalfarbe ist der Akzent der Website und keine fünfte
   eigene: Rot heißt auf dieser Seite überall dasselbe.
   ========================================================= */

.lq {
  /* --- Papier und Stift --- */
  --lq-paper:      #EDF0F4;  /* Blockpapier, kühles Weiß       */
  --lq-ink:        #14181F;  /* Druck, Vorgaben     15,1:1     */
  --lq-pencil:     #46536B;  /* eigene Eingaben      6,4:1     */
  --lq-note:       #1F5B7A;  /* Notizen, eigene Identität      */
  --lq-rule:       #94A3B8;  /* Raster-Haarlinie               */
  --lq-rule-soft:  #C3CCD8;  /* rein dekorativ                 */
  --lq-edge:       #14181F;  /* Brettkante, stärkste Linie     */
  --lq-signal:     #9A4324;  /* Fehler, Auswahl      5,9:1     */
  --lq-peer:       #DDE3EB;  /* Fadenkreuz                     */
  --lq-peer-veil:  rgba(20, 24, 31, .07);
  --lq-clue:       #46536B;  /* Randzahlen, Ungleichungen      */
  --lq-good:       #3F6B4A;  /* erfüllte Summe       5,2:1     */

  /* Käfigtöne des Rechenquadrats. Reihenfolge wie bei den
     Killer-Käfigen: die beiden gegensätzlichsten Töne vorn,
     weil die Färbung die Plätze 0 und 1 am häufigsten
     benachbart vergibt. */
  --lq-cage-0: rgba( 46,  99, 196, .16);
  --lq-cage-1: rgba(201, 151,  26, .26);
  --lq-cage-2: rgba( 29, 163,  94, .20);
  --lq-cage-3: rgba(154,  63, 196, .17);
  --lq-cage-4: rgba( 19, 145, 168, .20);
  --lq-cage-5: rgba(143, 168,  28, .26);

  --lq-same: rgba(20, 24, 31, .06);
}

/* Nachtausgabe: eigene Töne je Rolle statt Invertierung. */
[data-theme="dark"] .lq {
  --lq-paper:      #1D2128;
  --lq-ink:        #E8EDF4;
  --lq-pencil:     #A4B2C6;
  --lq-note:       #7FC0E3;
  --lq-rule:       #6B7789;
  --lq-rule-soft:  #3A424E;
  --lq-edge:       #C2CAD6;
  --lq-signal:     #E08458;
  --lq-peer:       #262C35;
  --lq-peer-veil:  rgba(232, 237, 244, .09);
  --lq-clue:       #A4B2C6;
  --lq-good:       #85B992;

  --lq-cage-0: rgba(127, 166, 238, .18);
  --lq-cage-1: rgba(232, 194,  90, .20);
  --lq-cage-2: rgba(111, 203, 155, .18);
  --lq-cage-3: rgba(196, 140, 228, .18);
  --lq-cage-4: rgba(108, 192, 210, .18);
  --lq-cage-5: rgba(195, 213, 102, .20);

  --lq-same: rgba(232, 237, 244, .07);
}

/* ============ Bühne ============ */

.lq {
  color: var(--lq-ink);
  font-family: var(--font-display);
}

.lq__stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 290px;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  padding: clamp(1rem, 2.5vw, 2rem);
  border: 2px solid var(--lq-rule);
  border-radius: var(--radius);
  background: var(--lq-paper);
  box-shadow: var(--shadow-float);
}

/* Anders als bei Sudoku wird die Seitenspalte untergeschoben statt
   ausgeblendet: die Bretter hier sind 3x3 bis 6x6, das spielt sich auch mit
   dem Daumen. Es gibt deshalb keine Touch-Weiche und keinen Ersatztext. */
@media (max-width: 1000px) {
  .lq__stage { grid-template-columns: minmax(0, 1fr); }
}

/* ============ Kopfleiste: Spielart, Stufe, Rätsel ============ */

.lq__picker {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--lq-rule-soft);
}

.lq__group { display: grid; gap: .4rem; }

.lq__group-label {
  font-family: var(--font-sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--lq-pencil);
}

.lq__tabs { display: flex; flex-wrap: wrap; gap: .35rem; }

.lq__tab {
  min-height: 38px;
  padding: .3rem .8rem;
  border: 1px solid var(--lq-rule);
  border-radius: 4px;
  background: transparent;
  color: var(--lq-ink);
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
  transition: background .12s var(--ease), color .12s var(--ease);
}

.lq__tab:hover { background: var(--lq-peer); }

.lq__tab[aria-pressed="true"] {
  border-color: var(--lq-signal);
  background: var(--lq-signal);
  color: #fff;
}

.lq__tab--num { min-width: 38px; padding: .3rem .55rem; }

/* ============ Brett ============ */

.lq__board-wrap { display: grid; justify-items: center; gap: 1rem; }

/* Spalten und Zeilen setzt das Skript: jede Spielart hat ihren eigenen
   Rahmen um das eigentliche Gitter - Lücken für die Ungleichungen, ein Ring
   für die Sichtzahlen, eine Zusatzreihe für die Summen. */
.lq__board {
  display: grid;
  width: min(100%, var(--lq-board-size, 520px));
  aspect-ratio: 1;
  user-select: none;
}

.lq__board:focus-visible {
  outline: 3px solid var(--lq-signal);
  outline-offset: 4px;
}

.lq__cell {
  position: relative;
  display: grid;
  place-items: center;
  background: var(--lq-paper);
  font-size: var(--lq-digit-size, 1.7rem);
  line-height: 1;
  cursor: pointer;
}

/* Das Raster liegt als Rahmen-Overlay über der Zelle, nicht als Rand an ihr:
   so verschiebt keine Linienstärke die Geometrie, und jede Linie wird genau
   einmal gezeichnet. */
.lq__edge {
  position: absolute;
  inset: 0;
  border-style: solid;
  border-width: 0;
  pointer-events: none;
}

.lq__value { font-variant-numeric: tabular-nums; }

/* Gedruckt gegen Bleistift: die Materialtrennung trägt der Schnitt mit,
   nicht die Farbe allein. */
.lq__cell--given .lq__value { color: var(--lq-ink); font-weight: 700; }
.lq__cell--filled .lq__value { color: var(--lq-pencil); font-weight: 400; }
.lq__cell--wrong .lq__value { color: var(--lq-signal); }
.lq__cell--revealed .lq__value { color: var(--lq-pencil); font-style: italic; }

.lq__cell--peer { background: var(--lq-peer); }
.lq__cell--same { box-shadow: inset 0 0 0 999px var(--lq-same); }

.lq__cell--selected {
  box-shadow: inset 0 0 0 3px var(--lq-signal);
  z-index: 2;
}

.lq__cell:not(.lq__cell--static):hover { background: var(--lq-peer); }

/* --- Notizen --- */

.lq__notes {
  position: absolute;
  inset: 10%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  font-family: var(--font-sans);
  font-size: var(--lq-note-size, .6rem);
  font-weight: 500;
  line-height: 1;
  color: var(--lq-note);
}

.lq__notes span { display: grid; place-items: center; }

/* ============ Beiwerk der einzelnen Spielarten ============ */

/* Alles, was zum Rahmen gehört und kein Spielfeld ist: Ungleichungen,
   Sichtzahlen, Summen. Kein Zeiger, kein Fokus, kein Hover. */
.lq__cell--static {
  background: transparent;
  cursor: default;
  font-family: var(--font-sans);
  color: var(--lq-clue);
}

/* --- Futoshiki: die Zeichen sitzen in eigenen, schmalen Rasterspuren --- */

.lq__sign {
  font-size: var(--lq-sign-size, 1rem);
  font-weight: 700;
  color: var(--lq-clue);
  line-height: 1;
}

/* Das senkrechte Paar braucht dasselbe Zeichen um 90 Grad gedreht. Ein
   eigenes Schriftzeichen (∧/∨) sähe je nach Schrift anders aus als < und >
   nebenan; gedreht ist es dieselbe Form und liest sich als dieselbe Regel. */
.lq__sign--v { transform: rotate(90deg); }

/* --- Wolkenkratzer: Sichtzahlen auf dem Ring um das Gitter --- */

.lq__clue {
  font-size: var(--lq-clue-size, 1rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lq-clue);
}

/* --- Magisches Quadrat: laufende Summen an Zeile und Spalte --- */

.lq__sum {
  font-size: var(--lq-sum-size, .85rem);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--lq-pencil);
}

/* Eine erreichte Summe wird grün, eine überschrittene rot. Beides trägt
   zusätzlich ein Zeichen (✓ bzw. ✗) im Text, damit die Aussage nicht allein
   an der Farbe hängt - dieselbe Regel wie überall sonst auf der Seite. */
.lq__sum--hit { color: var(--lq-good); font-weight: 700; }
.lq__sum--over { color: var(--lq-signal); font-weight: 700; }

.lq__sum--target {
  color: var(--lq-ink);
  font-weight: 700;
  font-size: var(--lq-sum-size, .85rem);
}

/* --- Rechenquadrat: Käfige --- */

.lq__cell--cage { background-color: var(--lq-cage-tint, transparent); }

/* Fadenkreuz und Zeiger löschen den Käfigton nicht, sie legen einen Schleier
   darüber - sonst reissen die kräftigeren Lasuren Löcher ins Käfigbild. */
.lq__cell.lq__cell--cage.lq__cell--peer,
.lq__cell.lq__cell--cage:not(.lq__cell--static):hover {
  background-color: var(--lq-cage-tint, transparent);
  background-image: linear-gradient(var(--lq-peer-veil), var(--lq-peer-veil));
}

.lq__cage-edge {
  position: absolute;
  inset: 3px;
  pointer-events: none;
  border: 0 dashed var(--lq-ink);
}

.lq__cage-edge--t { border-top-width: 1.5px; }
.lq__cage-edge--r { border-right-width: 1.5px; }
.lq__cage-edge--b { border-bottom-width: 1.5px; }
.lq__cage-edge--l { border-left-width: 1.5px; }

.lq__cage-target {
  position: absolute;
  top: 5px;
  left: 7px;
  font-family: var(--font-sans);
  font-size: var(--lq-target-size, .68rem);
  font-weight: 700;
  line-height: 1;
  color: var(--lq-ink);
}

/* ============ Zifferblock ============ */

/* Nicht nur für den Finger gedacht: er zeigt nebenbei, welche Ziffern die
   Spielart überhaupt kennt. Beim 6x6 sind das sechs, beim magischen 4x4
   sechzehn - das aus dem Brett zu erraten, wäre unnötige Arbeit. */
.lq__pad {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .35rem;
  width: min(100%, var(--lq-board-size, 520px));
}

.lq__key {
  min-width: 44px;
  min-height: 44px;
  padding: .35rem .5rem;
  border: 1px solid var(--lq-rule);
  border-radius: 6px;
  background: var(--lq-paper);
  color: var(--lq-ink);
  font: inherit;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background .12s var(--ease);
}

.lq__key:hover { background: var(--lq-peer); }
.lq__key--wide { min-width: 64px; font-family: var(--font-sans); font-size: .85rem; }

.lq__key[aria-pressed="true"] {
  border-color: var(--lq-signal);
  color: var(--lq-signal);
  font-weight: 700;
}

/* Ziffer bereits vollständig gesetzt: der Knopf bleibt bedienbar, tritt aber
   zurück. Ausgrauen wäre falsch - eine Ziffer kann nach einer Korrektur
   wieder gebraucht werden. */
.lq__key--done { color: var(--lq-rule); }

/* ============ Seitenspalte ============ */

.lq__side {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  font-family: var(--font-sans);
}

.lq__meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem 1rem;
  margin: 0;
  font-size: .9rem;
}

.lq__meta dt { color: var(--lq-pencil); }
.lq__meta dd {
  margin: 0;
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--lq-ink);
}

.lq__rule {
  margin: 0;
  padding: .7rem .8rem;
  border: 1px solid var(--lq-rule-soft);
  border-radius: 6px;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--lq-pencil);
}

.lq__rule strong { display: block; color: var(--lq-ink); font-size: .92rem; }

.lq__status {
  min-height: 3em;
  margin: 0;
  padding: .6rem .75rem;
  border-left: 2px solid var(--lq-rule-soft);
  font-size: .9rem;
  color: var(--lq-ink);
}

.lq__status--win { border-left-color: var(--lq-signal); font-weight: 600; }

.lq__actions { display: grid; gap: .5rem; }

.lq__btn {
  min-height: 42px;
  padding: .45rem .9rem;
  border: 1px solid var(--lq-rule);
  border-radius: 4px;
  background: transparent;
  color: var(--lq-ink);
  font: inherit;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
  transition: background .12s var(--ease);
}

.lq__btn:hover { background: var(--lq-peer); }
.lq__btn[aria-pressed="true"] {
  border-color: var(--lq-signal);
  color: var(--lq-signal);
  font-weight: 600;
}

.lq__btn kbd {
  float: right;
  padding: .05rem .3rem;
  border: 1px solid var(--lq-rule-soft);
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: .72rem;
  color: var(--lq-pencil);
}

.lq__keys {
  margin: 0;
  font-size: .82rem;
  line-height: 1.7;
  color: var(--lq-pencil);
}

.lq__keys dt {
  display: inline-block;
  min-width: 7.5em;
  font-family: var(--font-mono);
  color: var(--lq-ink);
}

.lq__keys dd { display: inline; margin: 0; }
.lq__keys dd::after { content: ""; display: block; }

.lq__promo {
  padding: .9rem 1rem;
  border: 1px solid var(--lq-rule-soft);
  border-radius: 4px;
  font-size: .86rem;
  line-height: 1.55;
  color: var(--lq-pencil);
}

.lq__promo strong { display: block; color: var(--lq-ink); font-size: .95rem; }

@media (prefers-reduced-motion: reduce) {
  .lq__tab, .lq__btn, .lq__cell, .lq__key { transition: none; }
}

/* ============ Fließtext der Seite ============ */

/* Der Reset setzt margin: 0 auf alles, und eine allgemeine Regel für
   Überschriften und Absätze gibt es nicht - die steht überall dort, wo Prosa
   vorkommt, am jeweiligen Kontext (.legal, .article__body, .area). Ohne einen
   solchen Kontext kleben Überschrift und Absatz aneinander.

   Die Maße sind die von .article__body, damit die Regelabschnitte hier sich
   lesen wie ein Blogbeitrag. Bewusst seitenlokal und nicht als Ergänzung an
   .prose: die Klasse tragen auch Maker- und Produktseiten, und deren Abstände
   ohne Auftrag zu verschieben, gehört nicht in diese Änderung. */
.lq-prose h2 { font-size: 1.6rem; margin-bottom: .5rem; }
.lq-prose h3 { font-size: 1.2rem; margin: 1.9rem 0 .35rem; }
.lq-prose h2 + h3 { margin-top: 1.2rem; }
.lq-prose p { max-width: var(--maxw-prose); color: var(--text-soft); }
.lq-prose p + p { margin-top: 1.1rem; }
.lq-prose strong { color: var(--text); }