/* Mission 100 · v1.4R1: iOS safe-area + breites Desktop-Layout.
 * Separat gehalten, um das freigegebene Design aus v1.4 nicht zu überschreiben. */

/* Der Header muss ZUSÄTZLICH zur normalen Höhe Platz für die iPhone-Statusleiste
   bereitstellen; eine feste 70px-Höhe mit safe-area-Padding reicht nicht. */
.challenge-topbar {
  box-sizing: border-box;
  height: calc(70px + env(safe-area-inset-top, 0px));
  min-height: calc(70px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  padding-left: max(13px, env(safe-area-inset-left, 0px));
  padding-right: max(13px, env(safe-area-inset-right, 0px));
  flex-shrink: 0;
}
.challenge-progress { flex: 0 0 5px; }
/* Spielansicht: bei sehr langen Fragen dürfen Inhalte nicht verdeckt werden.
   Das Scrollen findet nur im Fragenblatt statt, Header/Timer bleiben fix. */
.challenge-page:not(.is-finished) {
  height: 100svh; min-height: 0; max-height: none; overflow: hidden;
}
.challenge-page .challenge-stage { min-height: 0; }
.challenge-paper:not(.is-concealed) { overflow-y: auto; overscroll-behavior: contain; }
.challenge-paper.is-concealed { overflow: hidden; }
/* Feedback und Ergebnis bleiben möglichst eine Ansicht; nur ungewöhnlich lange
   medizinische Erklärungen dürfen scrollen statt abgeschnitten zu werden. */
.feedback-paper { min-height: 0; }
.feedback-panel { overflow-y: auto; }
.challenge-page.is-finished {height:100svh;min-height:0;}
.finish-panel { overflow-y:auto; }

/* Auf schmalen Geräten bleiben alle Header-Schaltflächen sichtbar,
   auch bei Safari-Ersatzschrift und langen deutschen Bezeichnungen. */
@media(max-width:759px){
 .challenge-topbar{gap:2px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px));}
 .challenge-back,.challenge-menu{min-width:35px;width:35px;flex-shrink:0;}
 .challenge-top-title{font-size:clamp(23px,7vw,30px);min-width:0;}
 .challenge-count{font-size:clamp(18px,5vw,21px);margin-left:auto;}
}

/* Breitbildschirm: dieselbe App, andere Anordnung – keine separate Version. */
@media (min-width: 760px) {
  html, body { min-height:100%; }
  body { background: radial-gradient(ellipse at 50% 25%,#2a628e 0%,#112e4e 60%,#071c33 100%); }
  .home, .challenge-page {
    max-width: 1120px; width: min(100%,1120px);
    height: 100svh; min-height: 670px; max-height: none;
    box-shadow:0 0 0 3px #112e4b, 0 16px 38px #06142691;
  }
  /* Desktop Startseite: Figur und Merkzettel links, Titel/Aktion rechts. */
  .home {
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:78px 1fr auto 106px;
    grid-template-areas:
      'mast mast'
      'scene intro'
      'scene start'
      'nav nav';
    background-position:center;
  }
  .masthead {grid-area:mast;align-items:center;}
  .mission {font-size:39px;}
  .intro {
    grid-area:intro; z-index:2; align-self:center;
    padding:10px 22px 0 0;
  }
  .intro h1 {font-size:clamp(43px,5.2vw,60px);margin-bottom:19px;}
  .tagline {font-size:clamp(21px,2.6vw,29px);line-height:1.2;}
  .scene {grid-area:scene;min-height:0;margin:0;align-self:stretch;}
  .scene .jule {left:0;bottom:-13px;width:90%;max-height:100%;object-position:left bottom;}
  .scene .sticky {
    top: min(36%,190px); right:-14px; width:48%;
    padding:15px 14px 16px;
  }
  .scene .sticky ul{font-size:clamp(18px,1.9vw,24px);}
  .start-area {grid-area:start;align-self:center;justify-self:stretch;padding:12px 34px 38px 10px;}
  .start-button {min-height:72px;}
  .bottom-nav {grid-area:nav;padding:12px 22px;}
  .bottom-nav button {font-size:22px;}

  /* Frage auf der linken Seite, interaktive Antworten rechts. */
  .challenge-page:not(.is-finished) {height:100svh;min-height:670px;max-height:none;}
  .challenge-topbar{height:80px;min-height:80px;padding:7px 28px 7px;}
  .challenge-top-title{font-size:43px;}
  .challenge-count{font-size:28px;}
  .challenge-status {padding:12px 30px;min-height:73px;}
  .category-pill{font-size:27px;}
  .challenge-paper {padding:30px 32px 24px;border-radius:24px 24px 0 0;}
  .challenge-paper:not(.is-concealed) {
    display:grid;
    grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
    grid-template-rows:auto auto minmax(0,1fr);
    column-gap:36px;row-gap:13px;overflow-y:auto;
    align-items:start;
  }
  .challenge-paper:not(.is-concealed) .challenge-lead {grid-column:1;grid-row:1;margin:0;}
  .challenge-paper:not(.is-concealed) .challenge-lead h1 {font-size:clamp(34px,4.4vw,56px);line-height:1.05;margin-bottom:16px;}
  .challenge-paper:not(.is-concealed) .challenge-lead p {font-size:clamp(22px,2.5vw,30px);}
  .challenge-paper:not(.is-concealed) .challenge-instruction{grid-column:1;grid-row:2;font-size:clamp(22px,2.5vw,30px);}
  .challenge-paper:not(.is-concealed) .mechanic-area {grid-column:2;grid-row:1 / -1;flex:initial;min-width:0;gap:16px;justify-content:start;}
  .challenge-paper:not(.is-concealed) .challenge-footer {
    grid-column:1;grid-row:3;margin:0;min-height:160px;height:100%;max-height:310px;
    align-self:end;justify-content:start;
  }
  .challenge-paper:not(.is-concealed) .challenge-figure {right:8px;bottom:0;width:45%;max-width:215px;max-height:300px;}
  .challenge-paper:not(.is-concealed) .question-sticky {max-width:60%;margin-top:20px;font-size:27px;}
  .answer-card{min-height:84px;padding:18px 16px;}
  .answer-text,.fault-row strong{font-size:27px;}
  .fault-row{min-height:78px;}
  .lab-sample{min-height:120px;}
  .lab-sample .sample-copy p{font-size:23px;}
  .piece{font-size:25px;min-height:65px;}
  .circuit-diagram{min-height:165px;}
  .circuit-node{font-size:21px;}
  .kind-circuit.challenge-paper .challenge-footer,.kind-glitch.challenge-paper .challenge-footer{min-height:160px;max-height:260px;}
  .kind-circuit.challenge-paper .challenge-figure,.kind-glitch.challenge-paper .challenge-figure {max-height:260px;width:45%;max-width:215px;}
  .kind-circuit.challenge-paper .question-sticky,.kind-glitch.challenge-paper .question-sticky{font-size:26px;}
  .challenge-dev-strip{grid-column:2;grid-row:4;align-self:end;}
  .challenge-start-overlay{background:#08233ae8;justify-content:center;}
  .challenge-start-overlay h2{font-size:62px;}
  .challenge-start-overlay p{font-size:30px;}
  .concealed-mockup{max-width:720px;margin:40px auto;}

  /* Feedback: Schildfigur links, Erklärung + Punkte rechts. */
  .feedback-paper,.feedback-paper.feedback-compact,.feedback-paper.feedback-very-compact,.feedback-paper.feedback-extreme {
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    grid-template-rows:minmax(0,1fr) auto auto;
    min-height:0;overflow:hidden;
  }
  .feedback-hero{grid-column:1;grid-row:1 / 4;min-height:0;}
  .feedback-figure,.feedback-figure.is-happy,.feedback-figure.is-think {object-position:center center;}
  .feedback-panel{grid-column:2;grid-row:1;overflow-y:auto;padding:23px 24px 12px;gap:16px;}
  .feedback-card{padding:16px 20px;}
  .feedback-card h1{font-size:clamp(29px,3.7vw,43px);}
  .feedback-card p{font-size:23px;}
  .feedback-card.explanation p{font-size:clamp(20px,2.4vw,26px);}
  .feedback-summary-row{grid-column:2;grid-row:2;margin:8px 24px 16px;padding:13px 16px;}
  .feedback-score-note,.feedback-points-note{font-size:21px;}
  .feedback-next{grid-column:2;grid-row:3;margin:0 25px 25px;width:calc(100% - 50px);min-height:65px;font-size:29px;}

  /* Abschluss: Feier-Illustration links, Punkte und Screenshot rechts. */
  .challenge-page.is-finished{height:100svh;min-height:670px;max-height:none;}
  .finish-screen{flex-direction:row;min-height:0;}
  .finish-hero,.is-finished .finish-hero{flex:0 0 48%;height:auto;min-height:0;}
  .finish-heading{top:32px;}
  .finish-heading h1{font-size:clamp(44px,5vw,66px);}
  .finish-jule,.is-finished .finish-jule{height:76%;max-height:80%;}
  .finish-panel{flex:1;min-width:0;justify-content:center;gap:22px;padding:28px 32px;overflow-y:auto;}
  .finish-result-card{padding:20px 18px;}
  .finish-screenshot-note p{font-size:20px;}
}

/* Auf Tablets im Querformat genug Platz zum Lesen ohne zweispaltige Überfüllung. */
@media (min-width:760px) and (max-width:900px) {
  .home .sticky{right:0;width:52%;}
  .challenge-paper:not(.is-concealed){column-gap:18px;padding-left:20px;padding-right:20px;}
  .challenge-paper:not(.is-concealed) .challenge-lead h1{font-size:34px;}
  .challenge-paper:not(.is-concealed) .challenge-lead p{font-size:22px;}
  .challenge-paper:not(.is-concealed) .challenge-figure{width:43%;}
}

/* v1.5R2: Smartphone-Startseite: Jule bleibt unverändert, der Merkzettel
   rückt etwas nach rechts und wird moderat schmaler. */
@media (max-width: 759px) {
  .home .scene .sticky {
    width: 44%;
    right: 7px;
    top: 74px;
    padding: 15px 8px 17px 10px;
  }
  .home .scene .sticky ul {
    font-size: clamp(17px, 4.45vw, 21px);
    line-height: 1.11;
  }
  .home .scene .sticky li {
    padding-left: 19px;
    margin-bottom: 9px;
  }
  .home .scene .sticky li::before {font-size: 21px;}
}

/* v1.5R2: Nur Desktop: Startseite mit freier Jule links und Merkzettel
   rechts unter dem Titel. Die DOM-Struktur bleibt erhalten. */
@media (min-width: 760px) {
  .home .intro {
    align-self: start;
    padding: clamp(30px, 7vh, 74px) 25px 0 5px;
  }
  .home .scene .jule {
    left: 0;
    bottom: -10px;
    width: 92%;
    max-height: 100%;
    object-position: left bottom;
  }
  .home .scene .sticky {
    z-index: 3;
    top: clamp(220px, 31vh, 280px);
    right: -86%;
    width: 76%;
    max-width: 415px;
    padding: 18px 20px 20px;
    transform: rotate(-3deg);
  }
  .home .scene .sticky ul {
    font-size: clamp(19px, 1.8vw, 24px);
    line-height: 1.13;
  }
  .home .start-area {
    padding: 12px 32px 35px 16px;
  }
  /* Figur innerhalb des weißen Fragebogens rechts unten verankern,
     unabhängig davon, in welcher Grid-Spalte der Hinweiszettel steht. */
  .challenge-paper:not(.is-concealed) .challenge-footer {
    position: static;
  }
  .challenge-paper:not(.is-concealed) .challenge-figure,
  .kind-circuit.challenge-paper:not(.is-concealed) .challenge-figure,
  .kind-glitch.challenge-paper:not(.is-concealed) .challenge-figure {
    position: absolute;
    top: auto;
    left: auto;
    right: 20px;
    bottom: 12px;
    width: clamp(160px, 19%, 215px);
    max-width: 215px;
    max-height: min(32vh, 265px);
    height: auto;
    object-fit: contain;
    object-position: right bottom;
  }
}

@media (min-width: 760px) and (max-width: 900px) {
  .home .scene .sticky {
    right: -90%;
    width: 79%;
    top: clamp(220px, 31vh, 270px);
    padding: 14px;
  }
  .home .scene .sticky ul {font-size: 19px;}
}

/* v1.5R3 – Desktop-Titel im bestehenden Zweispaltenlayout */
@media (min-width: 760px) {
  .home .intro h1 {
    font-size: clamp(43px, 4.6vw, 58px);
    line-height: 1.02;
    -webkit-text-stroke: 7px var(--ink);
  }
  .challenge-top-title {
    font-size: clamp(29px, 3.2vw, 38px);
    white-space: nowrap;
  }
}
/* Lange Überschrift in der Spielleiste auf schmalen Handys */
@media (max-width: 759px) {
  .challenge-top-title {
    font-size: clamp(17px, 4.35vw, 25px);
    line-height: .98;
    letter-spacing: 0;
    white-space: normal;
    max-width: 54vw;
  }
}

/* v1.5R4 – Zierstrahlen folgen der neuen zweizeiligen Überschrift.
   Desktop bleibt unverändert. */
@media(max-width:759px){
  .home .intro .rays{top:31px;left:4px;transform:rotate(-20deg) scale(.82);}
  .home .intro .rays-right{left:auto;right:4px;transform:rotate(23deg) scale(.82);}
}