/* Tag 22: Satellitenbild-Puzzle (KB-ADV-010, Runde 3). Nur Regeln unter .day-22. Die Teile sind Ausschnitte des gemalten Satellitenbilds. */

.mission-paper.chapter-later.day-22 .quest-panel { min-height:0; padding:0; background:none; }
.mission-paper.chapter-later.day-22 .quest-playfield { min-height:0; padding:0; overflow:visible; border:0; background:none; box-shadow:none; }
.mission-paper.chapter-later.day-22 .quest-playfield::before { display:none; }
.day-22 .later-playfield { padding:0; border:0; }
.day-22 form > h2 { height:0; margin:0; padding:0; overflow:hidden; }
.day-22 #later-clear { display:none; }
.day-22 .tool-button { min-height:44px; }

.day-22 .sl-wrap { display:grid; grid-template-columns:minmax(0,380px) 200px; justify-content:center; align-items:center; gap:20px; width:100%; }
.day-22 .sl-board { --b:min(100%,380px); display:grid; grid-template:repeat(var(--n),1fr) / repeat(var(--n),1fr); gap:3px; width:var(--b); aspect-ratio:1; padding:7px; border:3px solid #26364a; border-radius:12px; background:#0c1828; box-shadow:0 6px 14px #0008,inset 0 0 0 2px #7fa6c755; }
.day-22 .sl-gap { border-radius:6px; background:#0a1220; box-shadow:inset 0 2px 8px #000; }
.day-22 .sl-tile { position:relative; min-width:0; min-height:0; margin:0; padding:0; border:0; border-radius:6px; cursor:default; color:#fff;
  background:url('../../assets/daily/day-22/satellit.webp') calc(var(--tc)*100%/(var(--n) - 1)) calc(var(--tr)*100%/(var(--n) - 1))/calc(var(--n)*100%) calc(var(--n)*100%); box-shadow:inset 0 0 0 2px #ffffff40,inset 0 -3px 5px #0006,0 1px 3px #000a; }
.day-22 .sl-tile span { position:absolute; left:4px; top:3px; min-width:1.5em; padding:0 4px; border-radius:6px; background:#0c1828b0; font:700 13px/1.4 'Roboto Condensed',sans-serif; pointer-events:none; }
.day-22 .sl-tile.is-movable { cursor:pointer; }
.day-22 .sl-tile.is-movable:hover { filter:brightness(1.18); }
.day-22 .sl-tile.is-home { box-shadow:inset 0 0 0 2px #7ed6a2aa,0 1px 3px #000a; }
.day-22 .sl-tile:focus-visible { outline:4px solid #fff; outline-offset:-3px; box-shadow:0 0 0 4px #123f67; z-index:2; }
.day-22 .sl-tile.hint-target { box-shadow:inset 0 0 0 4px #ffd54a,0 0 14px 2px #ffb300; z-index:1; }

.day-22 .sl-side { display:grid; gap:8px; justify-items:start; color:#3b2a14; font:600 clamp(16px,1.5vw,20px)/1.2 'Roboto Condensed',sans-serif; }
.day-22 .sl-side p { margin:0; }
.day-22 .sl-target { margin:0; padding:5px 5px 4px; border-radius:6px; background:#f4ead0; box-shadow:0 3px 8px #0005; rotate:-1.5deg; }
.day-22 .sl-target img { display:block; width:150px; height:150px; border-radius:3px; object-fit:cover; }
.day-22 .sl-target figcaption { margin-top:3px; text-align:center; font:700 15px/1.1 'Roboto Condensed',sans-serif; color:#3a2410; }
.day-22 .sl-moves b { font-size:1.5em; }

@media (min-width:1251px) {
  .day-22 .quest-playfield { container-type:size; display:grid; place-items:center; }
  .day-22 .sl-wrap { height:100cqh; }
  .day-22 .sl-wrap { grid-template-columns:auto 200px; }
  .day-22 .sl-board { --b:min(100cqh,100%); height:var(--b); width:auto; }
}
@media (max-width:760px) {
  .day-22 .sl-wrap { grid-template-columns:minmax(0,1fr); justify-items:center; }
  .day-22 .sl-side { grid-template-columns:auto 1fr; align-items:center; gap:4px 14px; width:100%; max-width:340px; }
  .day-22 .sl-target { grid-row:1/3; }
  .day-22 .sl-target img { width:96px; height:96px; }
}