/* Tag 07 – gehoert dem zustaendigen web-bauer (KB-ADV-005). Nur Regeln unter .day-7. */

/* Briefing: Polaroid mit Bild aus der Referenz, Brieftext ohne Fettzeile */
.day-7 .world-label { display:none; }
.day-7 form>h2 { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip-path:inset(50%); }
.day-7 .letter-text br,.day-7 .letter-text strong:empty { display:none; }
.day-7 .lab-photo.polaroid { padding:10px; }
.day-7 .lab-photo.polaroid::before { left:13%; top:-22px; width:46px; height:48px; }
.day-7 .lab-photo figcaption { display:none; }

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

.mem-board { display:grid; justify-items:center; align-content:center; gap:18px; padding:10px 0 0; }
.mem-instruction { margin:0; font-size:clamp(20px,2.1vw,28px); font-weight:700; line-height:1.15; text-align:center; text-wrap:balance; }
.mem-stones { display:flex; justify-content:center; gap:clamp(10px,2.4vw,30px); width:100%; }

/* Dino-Stein: eigene Farbe UND eigenes Symbol, Zahl in der Ecke fuer die Tastatur */
.mem-stone { --c:#d8493f; --d:#8f2a23; position:relative; display:grid; place-items:center; width:clamp(72px,17vw,168px); aspect-ratio:1 / 1.04; padding:0; border:4px solid var(--d); border-radius:38% 42% 36% 44% / 42% 38% 46% 40%; background:radial-gradient(circle at 34% 28%,color-mix(in srgb,var(--c) 70%,#fff) 0,var(--c) 55%,var(--d) 160%); color:#fff; cursor:pointer; box-shadow:inset 0 -6px 0 #0003,0 5px 8px #3b270f66; }
.mem-stone-1 { --c:#3b78d6; --d:#1d4a96; border-radius:44% 36% 42% 38% / 38% 44% 36% 46%; }
.mem-stone-2 { --c:#2f9a5a; --d:#1a6535; border-radius:36% 44% 38% 42% / 46% 36% 44% 38%; }
.mem-stone-3 { --c:#f2b632; --d:#a67211; border-radius:42% 38% 44% 36% / 36% 46% 38% 44%; }
.mem-stone svg { width:56%; height:56%; fill:#fff; stroke:#1d140d; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; overflow:visible; }
.mem-stone kbd { position:absolute; left:8px; top:6px; display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#fff9; color:#1d140d; font:700 15px/1 inherit; }
.mem-stone[aria-disabled="true"] { cursor:default; }
.mem-stone:focus-visible,.mem-mute:focus-visible { outline:4px solid #123f67; outline-offset:4px; }
.mem-stone.is-lit { filter:brightness(1.5) saturate(1.2); box-shadow:inset 0 -6px 0 #0002,0 0 0 6px #fff,0 0 28px 8px var(--c); z-index:1; }

.mem-status { display:flex; align-items:center; justify-content:center; gap:clamp(14px,3vw,34px); flex-wrap:wrap; }
.mem-length { margin:0; font-size:24px; font-weight:700; }
.mem-length b { font-size:30px; }
.mem-slots { display:flex; gap:8px; min-height:20px; }
.mem-slots i { width:20px; height:20px; border:3px solid #7b5a33; border-radius:50%; background:#fff8; }
.mem-slots i.is-filled { border-color:#1d140d; background:#146c68; }
.mem-slots i[data-stone="0"] { background:#d8493f; } .mem-slots i[data-stone="1"] { background:#3b78d6; } .mem-slots i[data-stone="2"] { background:#2f9a5a; } .mem-slots i[data-stone="3"] { background:#f2b632; }
.mem-mute { min-width:120px; min-height:44px; padding:0 16px; border:2px solid #7b5a33; border-radius:12px; background:#fff3cf; color:#2a1a08; font:700 18px/1 inherit; cursor:pointer; }
.day-7 .check-answer:disabled { opacity:.55; cursor:not-allowed; }

@media (prefers-reduced-motion:no-preference) {
  .mem-stone { transition:filter 120ms ease,box-shadow 120ms ease,transform 120ms ease; }
  .mem-stone.is-lit { transform:scale(1.06); }
}

@media (min-width:1251px) {
  .mission-paper.chapter-later.day-7 { height:770px; grid-template-rows:220px minmax(0,1fr); }
  .day-7 .compact-briefing { height:220px; }
  .day-7 .compact-briefing .lab-photo.polaroid { height:216px; }
  .day-7 .compact-briefing .letter-text { font-size:24px; }
  .mission-paper.chapter-later.day-7 form { grid-template-columns:minmax(0,1fr) 500px; grid-template-rows:minmax(0,1fr) auto auto; align-content:start; gap:8px 20px; }
  .day-7 .quest-playfield { grid-column:1 / -1; grid-row:1; }
  .day-7 .chapter-tools { grid-column:1; grid-row:2; align-self:center; }
  .day-7 .check-answer { grid-column:2; grid-row:2; width:100%; margin:0; }
  .day-7 .feedback-space { grid-column:1 / -1; grid-row:3; }
}

@media (max-width:700px) {
  .day-7 .chapter-tools .tool-button { flex:1 1 140px; }
  .mem-stone kbd { display:none; }
}

/* Desktop: Steine groesser und Flaeche zentriert, damit unter der Reihe keine grosse leere Zone bleibt (nur Tag 7) */
@media (min-width:1251px) {
  .day-7 .mem-board { gap:30px; padding-top:22px; }
  .day-7 .mem-stone { width:212px; }
  .day-7 .mem-stones { gap:44px; }
  .day-7 .mem-instruction { font-size:30px; }
}

/* Runde 3: gemalte Dino-Steine auf Steinplatte in der Dino-Island-Lichtung. Nur Tag 7 (Tag 23 nutzt die alten .mem-stone-Regeln weiter). */
.day-7 .mem-board { position:relative; gap:10px; padding:10px 0 0; border-radius:18px; background:url(../../assets/daily/day-07/szene.webp) center bottom / cover no-repeat; box-shadow:inset 0 0 0 2px #5b3b207a,inset 0 0 40px #1d140d66; overflow:hidden; }
.day-7 .mem-instruction { padding:3px 16px; border-radius:10px; background:#fff3cfd9; font-size:clamp(17px,1.7vw,22px); }
.day-7 .mem-stones { position:relative; align-items:center; width:min(100%,900px); padding:clamp(14px,3vw,34px) clamp(18px,4vw,60px); gap:clamp(6px,1.6vw,22px); background:url(../../assets/daily/day-07/platte.webp) center / 100% 100% no-repeat; filter:drop-shadow(0 8px 8px #000a); }
.day-7 .mem-stone { width:clamp(64px,17vw,176px); aspect-ratio:1; border:0; border-radius:50%; background:none; box-shadow:none; overflow:visible; }
.day-7 .ms-img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; pointer-events:none; user-select:none; }
.day-7 .ms-on { opacity:0; }
.day-7 .mem-stone.is-lit { filter:drop-shadow(0 0 14px #fff8); box-shadow:none; transform:none; }
.day-7 .mem-stone.is-lit .ms-on { opacity:1; }
.day-7 .mem-stone.is-lit .ms-img:not(.ms-on) { opacity:0; }
.day-7 .mem-stone:focus-visible { outline:4px solid #fff; outline-offset:2px; box-shadow:0 0 0 7px #123f67; }
.day-7 .mem-stone kbd { z-index:1; left:50%; top:auto; bottom:2px; translate:-50% 0; width:22px; height:22px; font-size:13px; background:#fff8; }
/* Status dezent: kleine Schrift, Ton-Knopf als stiller Textknopf (Ziel bleibt 44 px) */
.day-7 .mem-status { gap:14px; padding:2px 14px; border-radius:10px; background:#1d140db0; color:#fff3cf; }
.day-7 .mem-length { font-size:16px; font-weight:400; }
.day-7 .mem-length b { font-size:18px; }
.day-7 .mem-slots i { width:14px; height:14px; border-width:2px; border-color:#fff3cf; background:#fff2; }
.day-7 .mem-slots i.is-filled { border-color:#fff; }
.day-7 .mem-mute { min-width:0; min-height:44px; padding:0 8px; border:0; background:none; color:#fff3cfcc; font:400 15px/1 inherit; text-decoration:underline; text-underline-offset:3px; }
.day-7 .mem-mute:focus-visible { outline-color:#fff; }
@media (prefers-reduced-motion:no-preference) { .day-7 .ms-img { transition:opacity 140ms ease; } }
@media (min-width:1251px) {
  .day-7 .mem-board { gap:14px; padding-top:16px; height:100%; align-content:center; }
  .day-7 .mem-stone { width:200px; }
  .day-7 .mem-stones { gap:20px; width:min(100%,1000px); }
  .day-7 .mem-instruction { font-size:24px; }
}

/* Runde 3b: nichts darf springen. Anweisung, Status und Rueckmeldung haben feste Masse, die Rueckmeldungszeile reserviert ihren Platz. */
.day-7 .mem-instruction { box-sizing:border-box; width:min(100%,640px); min-height:2.5em; display:grid; place-items:center; }
.day-7 .mem-status { box-sizing:border-box; width:min(100%,330px); justify-content:space-between; }
.day-7 .mem-length { min-width:6.5em; }
.day-7 .mem-slots { min-width:0; min-height:14px; }
.mission-paper.chapter-later.day-7 .feedback-space { min-height:28px; }
@media (min-width:1251px) { .day-7 .mem-instruction { min-height:34px; } }
@media (max-width:700px) { .mission-paper.chapter-later.day-7 .feedback-space { min-height:46px; } .day-7 .mem-instruction { min-height:3.6em; } }

/* KB-ADV-011: Steine duerfen auf Tablet nicht ueber das Papier laufen */
@media (max-width:1250px) { .day-7 .mem-board { grid-template-columns:minmax(0,1fr); } .day-7 .mem-stones { max-width:100%; } .day-7 .mem-stone { flex:0 1 auto; min-width:0; } }