/* Tag 20: Die Nummer im Archiv. Nur Regeln unter .day-20. Darstellung der Fassung 8056891 (Papierstreifen, eine Gleichung pro Zeile), neu: 3 Runden mit 3 bis 5 Zeilen. Referenz: docs/entwuerfe/tage-02-24/tag-20-die-nummer-im-archiv.v2.png */

/* Spielfeld ohne Kasten: die Papierstreifen liegen frei auf dem Brief */
.mission-paper.chapter-later.day-20 .quest-panel { min-height:0; padding:0; background:none; }
.mission-paper.chapter-later.day-20 .quest-playfield { min-height:0; padding:0; overflow:visible; border:0; background:none; box-shadow:none; display:flex; align-items:center; justify-content:center; justify-self:stretch; }
.mission-paper.chapter-later.day-20 .quest-playfield::before { display:none; }
.day-20 form > h2 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.mission-paper.chapter-later.day-20 form { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr) auto auto auto; justify-items:center; }
.mission-paper.chapter-later.day-20 .chapter-tools { grid-column:1; justify-self:center; justify-content:center; gap:34px; margin:4px 0 0; }
.mission-paper.chapter-later.day-20 .check-answer { grid-column:1; justify-self:center; width:min(600px,100%); min-height:66px; margin:8px 0 0; font-size:40px; }
.mission-paper.chapter-later.day-20 .feedback-space { justify-self:stretch; text-align:center; }

.day-20 .arch { --bh:290px; --rh:54px; --gap:5px; display:grid; grid-template-columns:minmax(0,1fr); justify-items:center; gap:4px; width:100%; }
.day-20 .arch-round-0 { --rh:86px; --gap:9px; }
.day-20 .arch-round-1 { --rh:66px; }
.day-20 .arch-head { display:flex; align-items:center; justify-content:space-between; width:100%; max-width:782px; padding:0 4px; box-sizing:border-box; }
.day-20 .arch-round { margin:0; font:800 18px/1.1 'Roboto Condensed','Arial Narrow',sans-serif; color:#3a2a14; }
/* drei kleine Vorhaengeschloesser, ohne Kasten */
.day-20 .arch-locks { display:flex; gap:12px; margin:0; padding:0; list-style:none; }
.day-20 .arch-locks li { width:26px; aspect-ratio:160/192; }
.day-20 .arch-locks img { display:block; width:100%; height:100%; object-fit:contain; filter:grayscale(.25) brightness(.92) drop-shadow(0 2px 2px #3b260f55); }
.day-20 .arch-locks .is-current img { filter:drop-shadow(0 0 4px #ffcf4acc) drop-shadow(0 2px 2px #3b260f55); }
.day-20 .arch-locks .is-open img { filter:drop-shadow(0 0 5px #6fe08faa) drop-shadow(0 2px 2px #3b260f55); }

/* Feste Hoehe fuer fuenf Streifen: kein Springen beim Rundenwechsel; weniger Zeilen stehen mittig */
.day-20 .arch-body { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--gap); width:100%; height:var(--bh); }

/* Papierstreifen: Symbole gleichmaessig verteilt, Groessen in Prozent der Streifenbreite */
.day-20 .arch-row { position:relative; display:flex; align-items:center; justify-content:space-evenly; margin:0; padding:0 1.5%; box-sizing:border-box; width:100%; max-width:672px; height:var(--rh); flex:none; container-type:inline-size; }
.day-20 .arch-row::before { content:''; position:absolute; inset:0; z-index:0; background:url(../../assets/daily/day-20/streifen-kurz.png) center/100% 100% no-repeat; filter:saturate(.78) brightness(1.04) drop-shadow(0 2px 2px #5b3f1a40); pointer-events:none; }
.day-20 .arch-row > * { position:relative; z-index:1; }
.day-20 .arch-row:is(.arch-syms-3,.arch-syms-4)::before { background-image:url(../../assets/daily/day-20/streifen-lang.png); }
.day-20 .arch-ask { max-width:782px; cursor:text; }
.day-20 .arch-star, .day-20 .arch-sun, .day-20 .arch-moon { display:block; flex:none; width:auto; filter:drop-shadow(0 2px 2px #5b3f1a55); }
.day-20 .arch-star { height:min(calc(var(--rh) - 10px),11cqw); }
.day-20 .arch-sun { height:min(calc(var(--rh) - 6px),12.4cqw); }
.day-20 .arch-moon { height:min(calc(var(--rh) - 14px),10cqw); }
.day-20 .arch-ask .arch-star { height:min(calc(var(--rh) - 10px),9.4cqw); }
.day-20 .arch-ask .arch-sun { height:min(calc(var(--rh) - 6px),10.6cqw); }
.day-20 .arch-ask .arch-moon { height:min(calc(var(--rh) - 14px),8.6cqw); }
.day-20 .arch-ask.arch-syms-4 .arch-star { height:min(calc(var(--rh) - 10px),7.8cqw); }
.day-20 .arch-ask.arch-syms-4 .arch-sun { height:min(calc(var(--rh) - 6px),8.8cqw); }
.day-20 .arch-ask.arch-syms-4 .arch-moon { height:min(calc(var(--rh) - 14px),7.2cqw); }
.day-20 .arch-op { flex:none; color:#14110c; font:900 min(calc(var(--rh) - 6px),9.2cqw)/1 'Roboto Condensed',sans-serif; -webkit-text-stroke:max(.6px,.45cqw) #14110c; }
.day-20 .arch-ask .arch-op { font-size:min(calc(var(--rh) - 6px),7.8cqw); }
.day-20 .arch-row.hint-target { outline:3px dashed #e2a62d; outline-offset:3px; }

/* Zahlenfeld: Pergamentschnipsel mit echter Ziffer; Eingabe gleich gross */
.day-20 .arch-chip, .day-20 .arch-input { flex:none; display:grid; place-items:center; box-sizing:border-box; width:17.9cqw; height:min(calc(var(--rh) - 10px),64px); min-height:44px; padding:0; margin:0; background:url(../../assets/daily/day-20/zahl-schnipsel.png) center/100% 100% no-repeat; color:#14110c; font:800 min(48px,8cqw)/1 'Times New Roman',Times,Georgia,serif; font-variant-numeric:lining-nums; text-align:center; }
.day-20 .arch-chip { border:0; filter:saturate(.7) brightness(1.08); }
.day-20 .arch-input { width:20.5cqw; border:0; border-radius:14px; background:url(../../assets/daily/day-20/eingabe-papier.png) center/100% 100% no-repeat; filter:saturate(.75) brightness(1.08); caret-color:#7a5328; }
.day-20 .arch-input:focus-visible { outline:4px solid #10213f; outline-offset:3px; border-color:#f2a516; filter:saturate(.75) brightness(1.18); }
.day-20 .arch-input::placeholder { color:#b99a5f; }

@media (max-width:700px) {
  .day-20 .arch { --bh:280px; --rh:52px; --gap:5px; }
  .day-20 .arch-round-0 { --rh:66px; }
  .day-20 .arch-round-1 { --rh:58px; }
  .day-20 .arch-round { font-size:16px; }
  .day-20 .arch-locks li { width:22px; }
  .day-20 .arch-chip, .day-20 .arch-input { min-height:44px; height:44px; font-size:28px; }
  .day-20 .arch-row { padding:0 1%; }
  .day-20 .arch-ask .arch-op { font-size:min(calc(var(--rh) - 14px),6.4cqw); }
  .day-20 .arch-ask .arch-input { width:18cqw; }
  .day-20 .arch-ask.arch-syms-4 .arch-star { height:min(calc(var(--rh) - 10px),9.6cqw); }
  .day-20 .arch-ask.arch-syms-4 .arch-sun { height:min(calc(var(--rh) - 6px),10.8cqw); }
  .day-20 .arch-ask.arch-syms-4 .arch-moon { height:min(calc(var(--rh) - 14px),8.8cqw); }
  .mission-paper.chapter-later.day-20 .chapter-tools { gap:16px; }
  .mission-paper.chapter-later.day-20 .check-answer { min-height:58px; font-size:28px; }
}