/* Tag 21: gehoert dem zustaendigen web-bauer (KB-ADV-005). Nur Regeln unter .day-21. */

/* Brief: Fettzeile leer, kein Zeilenumbruch davor */
.day-21 .letter-text br,.day-21 .letter-text strong:empty { display:none; }

/* Aufgabentitel bleibt fuer Screenreader, die Referenz zeigt ihn nicht */
.day-21 .world-label { display:none; }
.day-21 form>h2 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }

/* Spielflaeche ohne Kartenrahmen: Himmel und Figurenkarten liegen direkt auf dem Papier */
.mission-paper.chapter-later.day-21 .quest-panel { min-height:0; padding:0; background:none; }
.mission-paper.chapter-later.day-21 .quest-playfield,
.mission-paper.chapter-later.day-21 .later-playfield { min-height:0; padding:0; border:0; background:none; box-shadow:none; overflow:visible; }
.day-21.chapter-later .quest-playfield::before { content:none; }
.day-21 form { display:grid; grid-template-columns:minmax(0,1fr); gap:10px; }
.day-21 .chapter-tools { justify-content:flex-start; gap:12px; margin:0; }
.day-21 .chapter-tools .tool-button { white-space:nowrap; min-width:0; min-height:48px; padding-inline:16px; font-size:20px; }
.day-21 .feedback-space { min-height:0; }
.day-21 .check-answer { justify-self:center; width:min(480px,100%); }

.day-21 .star-task { display:grid; gap:12px; }

/* Nachthimmel: 596x360, Sterne und Linien in denselben Einheiten */
.day-21 .star-sky { position:relative; aspect-ratio:596/360; width:100%; overflow:hidden; border:2px solid #0b1a30; border-radius:14px; background:#0c1d3d; box-shadow:0 0 0 3px #d9bd88,0 6px 14px #3a250c66; }
.day-21 .star-sky>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.day-21 .star-sky svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.day-21 .star-edge { stroke:#ffd77a; stroke-width:3; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px #ffb02e); }
.day-21 .star-edge.is-wrong { stroke:#ff8a7a; stroke-dasharray:6 6; }
.day-21 .star-edge-hit { stroke:transparent; stroke-width:30; stroke-linecap:round; vector-effect:non-scaling-stroke; pointer-events:stroke; cursor:pointer; }

.day-21 .star-dot { position:absolute; width:48px; height:48px; margin:-24px 0 0 -24px; padding:0; border:0; border-radius:50%; background:none; color:#fff6dc; cursor:pointer; }
.day-21 .star-dot i { position:absolute; left:50%; top:50%; width:13px; height:13px; margin:-6.5px 0 0 -6.5px; border-radius:50%; background:radial-gradient(#fff 0 35%,#ffd070 60%,#f59a1f 100%); box-shadow:0 0 8px 3px #ffb347b3,0 0 18px 6px #ff9a2c55; }
.day-21 .star-dot i::before,.day-21 .star-dot i::after { content:''; position:absolute; left:50%; top:50%; background:linear-gradient(90deg,transparent,#ffd98a,transparent); translate:-50% -50%; pointer-events:none; }
.day-21 .star-dot i::before { width:38px; height:2px; }
.day-21 .star-dot i::after { width:2px; height:38px; background:linear-gradient(transparent,#ffd98a,transparent); }
.day-21 .star-dot.is-done i { box-shadow:0 0 10px 4px #ffc861,0 0 24px 9px #ff9a2c80; }
.day-21 .star-dot.is-on::after { content:''; position:absolute; inset:6px; border:3px solid #fff; border-radius:50%; box-shadow:0 0 10px #fff; }
.day-21 .star-dot:not(.is-done):hover i { box-shadow:0 0 12px 5px #ffd070,0 0 24px 8px #ff9a2c80; }
.day-21 .star-dot:focus-visible { outline:3px solid #fff; outline-offset:-3px; box-shadow:0 0 0 3px #123f67; }
.day-21 .star-dot.hint-target::before { content:''; position:absolute; inset:2px; border:3px dashed #ffe08a; border-radius:50%; }

/* Seite: Vorlage und Fortschritt */
.day-21 .star-side { display:grid; gap:10px; align-content:start; }
.day-21 .star-card { margin:0; display:grid; gap:4px; padding:8px 10px 10px; border:2px solid #c9a566; border-radius:10px; color:#17110a; background:linear-gradient(#f8ebc9,#e9d199); box-shadow:inset 0 0 0 2px #fff6df99,0 4px 8px #3a250c55; }
.day-21 .star-card figcaption { font:800 19px/1.15 'Roboto Condensed','Arial Narrow',sans-serif; text-align:center; }
.day-21 .star-card svg { display:block; width:auto; height:clamp(150px,24vh,230px); max-width:100%; margin-inline:auto; aspect-ratio:1; border-radius:6px; background:linear-gradient(#10264d,#0a1834); }
.day-21 .card-lines line { stroke:#ffd77a; stroke-width:2.200; stroke-linecap:round; }
.day-21 .card-dots circle { fill:#fff3c9; }
.day-21 .star-lines { margin:0; font:700 17px/1.2 'Roboto Condensed','Arial Narrow',sans-serif; text-align:center; color:#17110a; }
.day-21 .star-progress { display:flex; justify-content:center; gap:8px; margin:0; padding:0; list-style:none; }
.day-21 .star-progress li { display:flex; align-items:center; gap:6px; min-height:34px; padding:2px 10px 2px 3px; border-radius:99px; background:#d6c39b; color:#4b3a1c; font:700 16px/1 'Roboto Condensed','Arial Narrow',sans-serif; }
.day-21 .star-progress b { display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#fff6dc; font-size:15px; }
.day-21 .star-progress .is-current { background:#f2c230; color:#17110a; box-shadow:0 0 0 3px #17394c; }
.day-21 .star-progress .is-done { background:#2f9e5b; color:#fff; }
.day-21 .star-progress .is-done b { color:#1d6b3d; }

@media (prefers-reduced-motion:no-preference) {
  .day-21 .star-edge { animation:star-draw 300ms ease-out both; stroke-dasharray:1200; }
  .day-21 .star-edge.is-wrong { animation:none; stroke-dasharray:6 6; }
  @keyframes star-draw { from { stroke-dashoffset:1200; } to { stroke-dashoffset:0; } }
}

@media (min-width:1251px) {
  .day-21 form { grid-template-columns:560px minmax(0,1fr); grid-template-rows:auto auto auto; align-content:start; gap:8px 22px; }
  .day-21 .quest-playfield { grid-column:1 / -1; grid-row:1; }
  .day-21 .star-task { grid-template-columns:560px minmax(0,1fr); gap:0 22px; align-items:start; }
  .day-21 .star-sky { width:560px; }
  .day-21 .chapter-tools { grid-column:1; grid-row:2; align-self:center; }
  .day-21 .check-answer { grid-column:2; grid-row:2; width:min(480px,100%); margin:0; }
  .day-21 .feedback-space { grid-column:1 / -1; grid-row:3; }
}

@media (min-width:701px) and (max-width:1250px) {
  .day-21 .star-task { grid-template-columns:minmax(0,1fr) 230px; gap:0 16px; align-items:start; }
}

@media (max-width:700px) {
  .day-21 .star-side { grid-template-columns:minmax(0,150px) minmax(0,1fr); align-items:center; }
  .day-21 .star-card figcaption { font-size:15px; }
  .day-21 .star-card svg { width:100%; height:auto; }
  .day-21 .star-progress { flex-direction:column; align-items:stretch; }
  .day-21 .star-lines { grid-column:1 / -1; order:3; }
  .day-21 .chapter-tools .tool-button { flex:1 1 140px; }
}