/* Tag 15: Baustein-Waage (KB-ADV-010, Runde 3, Abnahme 07.11.). Nur Regeln unter .day-15. Sockel, Balken, Schalen, Paket, Steine und Vorratsfächer sind gemalte Bilder, Zahlen sind HTML.
   Die Bühne misst 1300 Einheiten in der Breite (--u = 1 Einheit); Balken und Schalen neigen sich per JS (rotate/translate), Glanz und Meldung bei Gleichgewicht sind reines Licht. */

.mission-paper.chapter-later.day-15 .quest-panel { min-height:0; padding:0; background:none; }
.mission-paper.chapter-later.day-15 .quest-playfield { min-height:0; padding:0; overflow:visible; border:0; background:none; box-shadow:none; }
.mission-paper.chapter-later.day-15 .quest-playfield::before { display:none; }
.day-15 .later-playfield { padding:0; border:0; }
.day-15 form > h2 { height:0; margin:0; padding:0; overflow:hidden; }
.day-15 #later-clear { display:none; }
.day-15 .tool-button { min-height:44px; }
/* Rückmeldung: feste Höhe für bis zu zwei Zeilen, damit nichts springt */
.day-15 .feedback-space { min-height:46px; height:46px; }
.day-15 .answer-feedback { margin:0 auto; line-height:1.2; }

.day-15 .sc-wrap { position:relative; display:grid; grid-template-columns:288px minmax(0,1fr); grid-template-areas:"tray stage"; gap:0 10px; align-items:stretch; width:100%; padding:10px 12px 10px 12px; border:3px solid #3e2a14; border-radius:16px; --shelf:30px; padding-bottom:var(--shelf); background:url('../../assets/daily/day-15/wand.webp') center top/cover; box-shadow:inset 0 0 0 2px #f0c46a55,0 4px 12px #0006; overflow:hidden; }
/* Frontalansicht: Bauplatte hängt als Wand, Waage und Fächer stehen bzw. hängen frontal davor; unten die Holzkante des Regalbretts */
.day-15 .sc-wrap::after { content:''; position:absolute; left:0; right:0; bottom:0; height:var(--shelf); background:url('../../assets/daily/day-15/brett.webp') center/100% 100% no-repeat; box-shadow:0 -4px 8px #0006; pointer-events:none; z-index:0; }
.day-15 .sc-tray,.day-15 .sc-stage { z-index:1; }
.day-15 .sc-round { position:absolute; left:14px; top:6px; z-index:3; display:flex; flex-wrap:wrap; gap:4px 14px; align-items:center; margin:0; padding:3px 10px; border-radius:8px; background:#2a1a0ccc; color:#fff3d0; font:600 15px/1.2 'Roboto Condensed',sans-serif; text-shadow:0 1px 3px #000; }
.day-15 .sc-uses i { display:inline-block; width:12px; height:12px; margin-left:4px; border:2px solid #f0c46a; border-radius:50%; vertical-align:-2px; }
.day-15 .sc-uses i.is-used { background:#f0c46a; }
.day-15 .sc-status { position:absolute; right:14px; top:6px; z-index:3; margin:0; padding:3px 10px; border-radius:8px; background:#2a1a0ccc; color:#fff3d0; font:600 15px/1.2 'Roboto Condensed',sans-serif; text-align:right; }

/* Vorrat: vier Holzfächer mit je einem gemalten Stein und dem Rest als Zahl */
.day-15 .sc-tray { grid-area:tray; position:relative; display:grid; grid-template-columns:1fr 1fr; align-content:center; gap:4px; margin-top:22px; }
.day-15 .sc-stone { position:relative; display:grid; place-items:center; min-width:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:12px; background:none; aspect-ratio:3/2; cursor:pointer; color:#fff; }
.day-15 .sc-fach { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; filter:drop-shadow(0 3px 3px #0008); }
.day-15 .sc-stone-img { position:relative; display:block; width:64%; margin-top:-2%; height:auto; pointer-events:none; user-select:none; -webkit-user-drag:none; filter:drop-shadow(0 3px 2px #0009); transition:translate .15s; }
.day-15 .sc-stone b,.day-15 .sc-placed b { position:absolute; left:50%; top:68%; translate:-50% -50%; color:#1a1a1a; font:800 24px/1 'Roboto Condensed',sans-serif; text-shadow:0 1px 0 #fff9,0 0 4px #fff6; pointer-events:none; }
.day-15 .sc-stone i { position:absolute; left:50%; top:76%; translate:-50% 0; padding:0 8px; border-radius:999px; background:#2a1a0ce6; color:#fff3d0; font:700 14px/1.4 'Roboto Condensed',sans-serif; font-style:normal; box-shadow:0 0 0 1px #f0c46a88; }
.day-15 .sc-stone.is-off { cursor:default; }
.day-15 .sc-stone.is-off .sc-stone-img { opacity:.3; filter:grayscale(1); }
.day-15 .sc-stone b { top:50%; color:#fff; text-shadow:0 0 3px #000,0 1px 2px #000,0 0 6px #0008; }
.day-15 .sc-stone.is-off b { opacity:.4; }
.day-15 .sc-stone:not(.is-off):hover .sc-stone-img { filter:drop-shadow(0 0 6px #ffe08a) drop-shadow(0 3px 2px #0009); }
.day-15 .sc-stone:focus-visible,.day-15 .sc-placed:focus-visible { outline:4px solid #fff; outline-offset:2px; box-shadow:0 0 0 7px #123f67; }
.day-15 .sc-stone.hint-target { box-shadow:0 0 0 3px #ffd54a,0 0 16px 3px #ffb300; }

/* Bühne */
.day-15 .sc-stage { --u:calc(100cqw / 1300); grid-area:stage; container-type:inline-size; position:relative; align-self:end; justify-self:center; width:100%; aspect-ratio:1300/560; }
.day-15 .sc-stage img { pointer-events:none; user-select:none; -webkit-user-drag:none; }
.day-15 .sc-glow { position:absolute; left:calc(650 * var(--u)); top:calc(270 * var(--u)); width:calc(1180 * var(--u)); height:calc(440 * var(--u)); translate:-50% -50%; border-radius:50%; background:radial-gradient(closest-side,#ffe9a0cc,#ffc94d66 45%,transparent 72%); opacity:0; pointer-events:none; }
.day-15 .sc-sockel { position:absolute; left:calc(458 * var(--u)); top:calc(141 * var(--u)); width:calc(385 * var(--u)); height:auto; filter:drop-shadow(0 calc(10 * var(--u)) calc(10 * var(--u)) #0009); }
.day-15 .sc-beam { position:absolute; left:calc(136 * var(--u)); top:calc(115 * var(--u)); width:calc(1027 * var(--u)); height:calc(163 * var(--u)); transform-origin:50% 46.3%; filter:drop-shadow(0 calc(6 * var(--u)) calc(6 * var(--u)) #0007); }
.day-15 .sc-beam img { display:block; width:100%; height:100%; }
.day-15 .sc-shine { position:absolute; inset:0; opacity:0; pointer-events:none; -webkit-mask:url('../../assets/daily/day-15/balken.webp') center/100% 100% no-repeat; mask:url('../../assets/daily/day-15/balken.webp') center/100% 100% no-repeat; background:linear-gradient(100deg,transparent 35%,#fffbe8cc 50%,transparent 65%) -60% 0/60% 100% no-repeat; mix-blend-mode:screen; }
.day-15 .sc-pan { position:absolute; width:calc(378 * var(--u)); height:calc(270 * var(--u)); }
.day-15 .sc-bowl { display:block; width:100%; height:100%; filter:drop-shadow(0 calc(10 * var(--u)) calc(8 * var(--u)) #0008); }
.day-15 .sc-paket { position:absolute; left:calc(109 * var(--u)); top:calc(50 * var(--u)); width:calc(160 * var(--u)); height:auto; filter:drop-shadow(0 calc(5 * var(--u)) calc(4 * var(--u)) #0008); }
.day-15 .sc-pile { position:absolute; inset:0; }

/* Steine im Stapel: selbst die Knöpfe zum Zurücknehmen */
.day-15 .sc-placed { position:absolute; display:block; width:calc(128 * var(--u)); height:calc(85 * var(--u)); min-width:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:8px; background:none; cursor:pointer; }
.day-15 .sc-placed img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 calc(3 * var(--u)) calc(3 * var(--u)) #0009); }
.day-15 .sc-placed b { font-size:clamp(14px,calc(30 * var(--u)),30px); }
.day-15 .sc-placed:hover img { filter:drop-shadow(0 0 6px #ffe08a) drop-shadow(0 3px 3px #0009); }
.day-15 .sc-placed.hint-target { box-shadow:0 0 0 3px #ffd54a,0 0 16px 3px #ffb300; }

.day-15 .sc-label { position:absolute; bottom:0; margin:0; padding:3px 14px 4px; border:2px solid #5a3b1d; border-radius:10px; background:linear-gradient(#fff6dc,#f0d9a2); color:#3a2410; text-align:center; font-family:'Roboto Condensed',sans-serif; line-height:1.05; box-shadow:0 3px 6px #0006; }
.day-15 .sc-label span { display:block; font-size:15px; font-weight:600; }
.day-15 .sc-label b { font-size:36px; font-weight:800; }
.day-15 .sc-label-l { left:0; }
.day-15 .sc-label-r { right:0; }

/* Erfolg: die Waage steht gerade. Glanz, Lichthof und große Meldung mitten im Spielfeld */
.day-15 .sc-banner { position:absolute; left:50%; top:calc(4 * var(--u)); z-index:4; margin:0; padding:calc(2 * var(--u)) calc(44 * var(--u)) calc(8 * var(--u)); translate:-50% 0; border:3px solid #fff3b0; border-radius:16px; background:linear-gradient(#ffe27a,#f5a81c); color:#3a1d00; text-align:center; font-family:'Roboto Condensed',sans-serif; line-height:1.05; box-shadow:0 0 0 3px #7a4a0e,0 8px 20px #000a,0 0 36px #ffd54acc; opacity:0; visibility:hidden; pointer-events:none; white-space:nowrap; }
.day-15 .sc-banner b { display:block; font-size:clamp(26px,calc(76 * var(--u)),64px); font-weight:800; text-shadow:0 1px 0 #fff8; }
.day-15 .sc-banner span { display:block; font-size:clamp(14px,calc(30 * var(--u)),24px); font-weight:600; }
.day-15 .is-balanced .sc-banner { opacity:1; visibility:visible; animation:sc-pop .6s cubic-bezier(.3,1.5,.5,1) both; }
.day-15 .is-balanced .sc-glow { opacity:1; animation:sc-glow 1.8s ease-in-out infinite; }
.day-15 .is-balanced .sc-shine { opacity:1; animation:sc-shine 1.4s ease-out .2s 2 both; }
.day-15 .is-balanced .sc-sockel,.day-15 .is-balanced .sc-beam { filter:drop-shadow(0 0 calc(14 * var(--u)) #ffd54a) drop-shadow(0 calc(6 * var(--u)) calc(6 * var(--u)) #0007); }
@keyframes sc-pop { from { opacity:0; scale:.7; } to { opacity:1; scale:1; } }
@keyframes sc-glow { 0%,100% { opacity:.65; } 50% { opacity:1; } }
@keyframes sc-shine { from { background-position:-60% 0; } to { background-position:160% 0; } }
@media (prefers-reduced-motion: reduce) {
  .day-15 .is-balanced .sc-banner,.day-15 .is-balanced .sc-glow,.day-15 .is-balanced .sc-shine { animation:none; }
  .day-15 .is-balanced .sc-shine { opacity:0; }
  .day-15 .sc-stone-img { transition:none; }
}

@media (min-width:1251px) {
  .day-15 .quest-playfield { container-type:size; display:block; }
  .day-15 .sc-wrap { height:100cqh; }
}
@media (max-width:1250px) {
  .day-15 .sc-wrap { grid-template-columns:minmax(0,1fr); grid-template-areas:"stage" "tray"; padding:36px 10px 12px; gap:8px 0; }
  .day-15 .sc-tray { grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:0; }
  .day-15 .sc-stage { max-width:860px; }
  .day-15 .sc-label span { font-size:12px; }
  .day-15 .sc-label b { font-size:24px; }
}
@media (max-width:700px) {
  .day-15 .sc-label { padding:1px 8px 2px; border-width:1px; bottom:-4px; }
  .day-15 .sc-label span { font-size:10px; }
  .day-15 .sc-label b { font-size:18px; }
  .day-15 .sc-banner { top:-4px; padding:0 18px 4px; border-width:2px; }
  .day-15 .sc-banner b { font-size:22px; }
  .day-15 .sc-onscale { display:flex; flex-wrap:wrap; align-content:flex-start; gap:4px; justify-content:center; min-height:96px; }
  .day-15 .sc-take { position:relative; width:46px; height:46px; min-width:44px; margin:0; padding:2px; border:2px solid #f0c46a88; border-radius:10px; background:#0a1a3acc; cursor:pointer; }
  .day-15 .sc-take img { display:block; width:100%; height:100%; object-fit:contain; pointer-events:none; }
  .day-15 .sc-take b { position:absolute; left:50%; top:62%; translate:-50% -50%; color:#1a1a1a; font:800 18px/1 'Roboto Condensed',sans-serif; text-shadow:0 1px 0 #fff9; pointer-events:none; }
  .day-15 .sc-take:focus-visible { outline:4px solid #fff; outline-offset:2px; }
  .day-15 .sc-take.hint-target { border-color:#ffd54a; box-shadow:0 0 0 3px #ffd54a,0 0 12px 2px #ffb300; }
  .day-15 .sc-wrap { grid-template-areas:"stage" "tray" "onscale"; }
  .day-15 .sc-onscale { grid-area:onscale; }
  .day-15 .sc-stone b { font-size:20px; }
  .day-15 .sc-stone i { font-size:12px; padding:0 5px; }
  .day-15 .sc-status { position:static; min-height:36px; margin:0 0 6px; text-align:center; }
  .day-15 .feedback-space { min-height:52px; height:52px; }
  .day-15 .sc-wrap { padding-top:30px; }
}