/* Knobelbande Würfelbauten — Notizbuch-Look. Tokens aus 05-gemeinsam/design/knobelbande.css,
   Bedienung und Klassen: 03-spiele/wuerfel/CLAUDE.md
   Ohne JavaScript und im Druck stehen statt des Spiels die Ansichten .wuerfel-ansichten
   (SVG aus 02-webseite/anwendung/arten/wuerfel.py) und die Pläne .wuerfel-auswahl. */

/* --- Zeichnung: gemeinsam für Spiel, Blatt und Druck ---------------------------------- */
.wuerfelbau { display: block; width: 100%; height: auto; overflow: visible; }
.wuerfelbau polygon { stroke: var(--tinte); stroke-width: 1; stroke-linejoin: round; }
/* Holz: Deckel hell, Vorderseite in Kennfarbe, rechte Seite dunkler */
.wuerfelbau__oben { fill: color-mix(in srgb, var(--farbe-wuerfel) 45%, var(--papier-weiss)); }
.wuerfelbau__links { fill: var(--farbe-wuerfel); }
.wuerfelbau__rechts { fill: color-mix(in srgb, var(--farbe-wuerfel) 62%, var(--farbe-wuerfel-dunkel)); }
.wuerfelbau .wuerfelbau__feld { fill: var(--papier-alt); stroke: var(--bleistift-hell); stroke-width: .7; }
.wuerfelbau__vorn {
  fill: var(--rotstift);
  font-family: var(--schrift-hand);
  font-size: 9px;
  text-anchor: middle;
  dominant-baseline: middle;
  /* steht über den Würfeln: heller Rand, damit es auch vor Holz lesbar bleibt */
  stroke: var(--papier-weiss);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  paint-order: stroke;
}

/* --- Statische Ansichten (ohne JavaScript, Druck) -------------------------------------- */
.wuerfel { margin: var(--abstand-4) 0; }
.wuerfel-ansichten {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-4);
  margin: 0;
}
.wuerfel-ansichten__bild {
  flex: 1 1 9rem;
  max-width: 15rem;
  margin: 0;
  text-align: center;
}
.wuerfel-ansichten--1 .wuerfel-ansichten__bild { max-width: 18rem; }
.wuerfel-ansichten__bild figcaption { font-family: var(--schrift-hand); font-size: var(--groesse-gross); }
.wuerfel--aktiv > .wuerfel-ansichten,
.wuerfel--aktiv > .wuerfel__ohne-js,
.wuerfel-auswahl.wuerfel-auswahl--statisch { display: none; }
.wuerfel-frage { margin-bottom: 0; }

/* --- Bauplan-Raster ------------------------------------------------------------------- */
.wuerfelplan { display: inline-flex; flex-direction: column; align-items: center; gap: var(--abstand-1); margin: 0; }
.wuerfelplan__buchstabe { margin: 0; font-weight: 800; }
.wuerfelplan__raster {
  display: grid;
  grid-template-columns: repeat(var(--plan-n, 3), 2.5rem);
  border: 2px solid var(--tinte);
  background: var(--papier-weiss);
}
.wuerfelplan--2 { --plan-n: 2; }
.wuerfelplan--3 { --plan-n: 3; }
.wuerfelplan--4 { --plan-n: 4; }
.wuerfelplan__feld {
  display: grid;
  place-items: center;
  height: 2.5rem;
  border: 1px solid var(--bleistift-hell);
  font-size: var(--groesse-gross);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--farbe-wuerfel) 45%, var(--papier-weiss));
}
.wuerfelplan__feld.ist-leer { background: var(--papier-alt); }
.wuerfelplan__vorn { margin: 0; font-family: var(--schrift-hand); color: var(--rotstift); font-size: var(--groesse-klein); line-height: 1; }
.wuerfel-auswahl {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-5);
  margin: var(--abstand-4) 0;
}
.wuerfel-loesung .wuerfelplan { margin-top: var(--abstand-3); }

/* --- Spiel ---------------------------------------------------------------------------- */
.wuerfel__spiel { max-width: 30rem; margin: 0 auto; }
.wuerfel__buehne {
  position: relative;
  padding: var(--abstand-3);
  background-color: var(--papier-weiss);
  background-image:
    linear-gradient(var(--linie-karo) 1px, transparent 1px),
    linear-gradient(90deg, var(--linie-karo) 1px, transparent 1px);
  background-size: 12px 12px;
  border: 1px solid var(--papier-kante);
  border-radius: var(--radius-klein);
  box-shadow: var(--schatten-flach);
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.wuerfel__buehne:focus { outline: none; }
.wuerfel__buehne:focus-visible { box-shadow: var(--fokus); }
.wuerfel__bild { max-width: 18rem; margin: 0 auto; }
.wuerfel__bild.ist-gedreht { animation: wuerfel-dreh .25s ease-out; }
@keyframes wuerfel-dreh {
  from { opacity: .35; transform: scale(.96); }
  to { opacity: 1; transform: none; }
}

.wuerfel__drehen {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--abstand-2);
  margin-top: var(--abstand-3);
}
.wuerfel__dreh { min-width: 7rem; }
.wuerfel__ansicht { margin: 0; text-align: center; color: var(--tinte-weich); font-size: var(--groesse-klein); }

/* Antwort: „Es sind [ ? ] Würfel.“ */
.wuerfel__antwort { margin-top: var(--abstand-4); }
.wuerfel__eingabe {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--abstand-2);
  font-size: var(--groesse-gross);
  font-weight: 700;
}
.wuerfel__feld {
  display: inline-grid;
  place-items: center;
  min-width: 4rem;
  min-height: 3.25rem;
  padding: 0 var(--abstand-2);
  border: 2px dashed var(--tinte);
  border-radius: 4px;
  background: var(--papier-weiss);
  color: var(--blaustift);
  font-family: var(--schrift-hand);
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}
.wuerfel__feld.ist-leer { color: var(--tinte-weich); }
.wuerfel--geloest .wuerfel__feld { border-style: solid; border-color: var(--erfolg); }

.wuerfel__tasten {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: var(--abstand-2);
  max-width: 24rem;
  margin: var(--abstand-4) auto 0;
}
.wuerfel__taste {
  grid-column: span 2;
  min-height: 3.25rem;
  padding: 0;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}
.wuerfel__taste--breit {
  grid-column: span 5;
  gap: var(--abstand-1);
  padding: var(--abstand-1);
  font-size: var(--groesse-klein);
}
.wuerfel__taste--breit .icon { width: 1.3rem; height: 1.3rem; }

/* Auswahl der Pläne: jeder Plan ist ein Knopf */
.wuerfel__auswahl-titel { margin: 0 0 var(--abstand-2); text-align: center; font-weight: 700; }
.wuerfel__plaene {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--abstand-3);
}
.wuerfel__plan {
  padding: var(--abstand-2);
  border: 2px solid var(--tinte);
  border-radius: var(--radius-krakel);
  background: var(--papier-weiss);
  color: var(--tinte);
  font: inherit;
  cursor: pointer;
  box-shadow: var(--schatten-knopf);
  -webkit-tap-highlight-color: transparent;
}
.wuerfel__plan .wuerfelplan__raster { grid-template-columns: repeat(var(--plan-n, 3), 1.9rem); }
.wuerfel__plan .wuerfelplan__feld { height: 1.9rem; font-size: var(--groesse-text); }
.wuerfel__plan:hover { background: var(--papier-alt); }
.wuerfel__plan:focus { outline: none; }
.wuerfel__plan:focus-visible { box-shadow: var(--fokus); }
.wuerfel__plan.ist-falsch {
  cursor: default;
  opacity: .55;
  border-style: dashed;
  box-shadow: none;
  text-decoration: line-through var(--rotstift) 2px;
}
.wuerfel__plan.ist-richtig { border-color: var(--erfolg); border-width: 3px; background: var(--erfolg-hell); }

.wuerfel__meldung {
  min-height: 1.5em;
  margin: var(--abstand-3) 0 0;
  text-align: center;
  font-weight: 700;
}
.wuerfel__meldung--gut { color: var(--erfolg); }
.wuerfel__meldung--fehler { color: var(--fehler); }

.wuerfel__hilfe { margin-top: var(--abstand-3); text-align: center; }
.wuerfel__hilfeplan:focus { outline: none; }
.wuerfel__hilfe-text { margin: 0 0 var(--abstand-2); }
.wuerfel__neu { display: flex; margin: var(--abstand-3) auto 0; }
.wuerfel__neu[hidden] { display: none; }

/* Gelöst: Stempel über dem Bau, Ziffernfeld weg */
.wuerfel__stempelplatz {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
}
.wuerfel__stempel {
  font-size: clamp(1.8rem, 9vw, 3.25rem);
  background: color-mix(in srgb, var(--papier-weiss) 85%, transparent);
  --stempel-drehung: -12deg;
}
.wuerfel--geloest .wuerfel__tasten { display: none; }

@media (prefers-reduced-motion: reduce) {
  .wuerfel__bild.ist-gedreht { animation: none; }
}

/* --- Druck: Ansichten nebeneinander, Pläne darunter, Lösung klein auf dem Kopf ---------- */
@media print {
  .raetsel__geloest { display: none !important; }
  .wuerfel__spiel, .wuerfel__ohne-js { display: none !important; }
  .wuerfel--aktiv > .wuerfel-ansichten { display: flex; }
  .wuerfel-auswahl.wuerfel-auswahl--statisch { display: flex; }
  .wuerfel { margin: 4mm 0; break-inside: avoid; }
  .wuerfel-ansichten { gap: 6mm; flex-wrap: nowrap; }
  .wuerfel-ansichten__bild { flex: 0 1 45mm; max-width: 60mm; }
  .wuerfel-ansichten--1 .wuerfel-ansichten__bild { flex-basis: 70mm; max-width: 70mm; }
  .wuerfel-ansichten__bild figcaption { font-size: 11pt; }
  .wuerfelbau polygon { stroke: #000; }
  .wuerfelbau__oben { fill: #fff; }
  .wuerfelbau__links { fill: #d9d9d9; }
  .wuerfelbau__rechts { fill: #a6a6a6; }
  .wuerfelbau .wuerfelbau__feld { fill: #fff; stroke: #999; }
  .wuerfelbau__vorn { fill: #000; stroke: #fff; }
  .wuerfelplan__raster { border-color: #000; }
  .wuerfelplan__feld { background: #fff !important; border-color: #666; color: #000; }
  .wuerfelplan__vorn { color: #000; }
  .wuerfel-auswahl { gap: 10mm; margin: 3mm 0; }
  .wuerfelplan--klein .wuerfelplan__raster { grid-template-columns: repeat(var(--plan-n, 3), 6mm); }
  .wuerfelplan--klein .wuerfelplan__feld { height: 6mm; font-size: 9pt; }
  .wuerfel-druckloesung { display: flex; align-items: center; gap: 4mm; }
  .wuerfel-druckloesung p { margin: 0; }
  .druckblatt__loesung:has(.wuerfel-druckloesung) { width: fit-content; margin-left: auto; }
}