/* ===========================================================
   Glasklar App – PWA-Shell (Spiel im Fokus, Fotos/Preis/Termin als Side-Features)
   Baut auf den Markenvariablen aus style.css auf (--brand, --ink, ...).
   Alle neuen Klassen sind mit "app-" prefixed, um nichts aus dem
   Hauptauftritt zu ueberschreiben.
   =========================================================== */

html, body.app-body{
  height:100%;
  background:var(--mist);
  overscroll-behavior-y:none;
}
body.app-body{
  -webkit-tap-highlight-color:transparent;
}

.app-frame{
  min-height:100vh;
  display:flex;
  justify-content:center;
  background:var(--mist);
}

.app-shell{
  width:100%;
  max-width:480px;
  min-height:100vh;
  background:var(--mist);
  display:flex;
  flex-direction:column;
  position:relative;
}

/* Auf breiten Bildschirmen (Desktop-Vorschau) wie ein Handy-Rahmen wirken */
@media (min-width:560px){
  .app-frame{padding:32px 0;}
  .app-shell{
    min-height:min(860px, calc(100vh - 64px));
    max-height:860px;
    border-radius:36px;
    overflow:hidden;
    box-shadow:0 30px 70px rgba(0,40,35,0.28);
    border:6px solid #0d1417;
  }
}

/* ---------- Topbar ---------- */
.app-topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:10px;
  padding:calc(14px + env(safe-area-inset-top)) 16px 14px;
  background:linear-gradient(135deg, var(--brand-dark), var(--brand));
  color:#fff;
  flex:none;
}
.app-back{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,0.16);
  color:#fff;font-size:18px;flex:none;
}
.app-topbar-title{flex:1;min-width:0;}
.app-topbar-title strong{display:block;font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-size:19px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;}
.app-topbar-title span{display:block;font-size:11px;opacity:.85;}
.app-points-pill{
  flex:none;
  display:flex;align-items:center;gap:5px;
  background:rgba(255,255,255,0.18);
  padding:7px 12px;border-radius:999px;
  font-weight:700;font-size:14px;
  white-space:nowrap;
  transition:transform .18s ease;
}
.app-points-pill.pulse{animation:appPointsPulse .5s ease;}
@keyframes appPointsPulse{0%{transform:scale(1);}35%{transform:scale(1.22);background:rgba(232,168,56,0.55);}100%{transform:scale(1);}}

/* ---------- Main / Screens ---------- */
.app-main{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:18px 16px calc(28px + env(safe-area-inset-bottom));
}
.app-screen[hidden]{display:none !important;}
.app-screen{animation:appFadeIn .22s ease;}
@keyframes appFadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
.app-game-sub[hidden]{display:none !important;}
.app-game-sub{animation:appFadeIn .2s ease;}

.app-h1{font-family:Georgia,serif;font-size:22px;margin:0 0 4px;color:var(--ink);}
.app-sub{color:var(--ink-soft);font-size:14px;margin:0 0 18px;}

/* ---------- Putzfeen-Maskottchen ---------- */
.app-mascot-svg{width:100%;height:100%;display:block;}
.app-mascot-intro{
  display:flex;align-items:flex-end;gap:2px;margin-bottom:16px;
}
.app-mascot-duo{flex:none;width:118px;height:76px;position:relative;}
.app-mascot-duo .app-mascot-slot{position:absolute;bottom:0;width:62px;height:76px;animation:appMascotBob 3.2s ease-in-out infinite;}
.app-mascot-duo .app-mascot-slot.left{left:0;z-index:2;animation-delay:0s;}
.app-mascot-duo .app-mascot-slot.right{left:44px;z-index:1;opacity:.96;animation-delay:.5s;}
@keyframes appMascotBob{0%,100%{transform:translateY(0) rotate(0deg);}50%{transform:translateY(-6px) rotate(-2deg);}}
.app-mascot-bubble{
  flex:1;background:#fff;border:1px solid var(--line);border-radius:16px 16px 16px 4px;
  padding:12px 14px;box-shadow:var(--shadow);
}
.app-mascot-bubble strong{display:block;font-size:13.5px;color:var(--brand-dark);margin-bottom:3px;}
.app-mascot-bubble span{display:block;font-size:12px;color:var(--ink-soft);line-height:1.5;}
.app-mascot-mini{width:56px;height:70px;margin:0 auto 4px;animation:appMascotPop .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes appMascotPop{from{transform:scale(0) rotate(-15deg);opacity:0;}to{transform:scale(1) rotate(0);opacity:1;}}
.app-toast-avatar{width:26px;height:34px;flex:none;margin-right:2px;}
.app-empty-mascot{width:64px;height:80px;margin:0 auto 8px;}

/* ---------- Spielmodus-Auswahl ---------- */
.app-mode-card{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:16px;margin-bottom:12px;box-shadow:var(--shadow);cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  animation:appCardIn .3s ease backwards;
}
.app-mode-card:nth-child(2){animation-delay:.05s;}
.app-mode-card:nth-child(3){animation-delay:.1s;}
@keyframes appCardIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.app-mode-card:active{transform:scale(.97);}
.app-mode-icon{flex:none;font-size:32px;width:54px;height:54px;border-radius:16px;background:var(--mist-2);display:flex;align-items:center;justify-content:center;}
.app-mode-body{flex:1;min-width:0;}
.app-mode-title{display:block;font-weight:700;font-size:16px;color:var(--ink);}
.app-mode-desc{display:block;font-size:12.5px;color:var(--ink-soft);margin-top:2px;line-height:1.4;}
.app-mode-best{display:block;font-size:11.5px;color:var(--brand-dark);font-weight:700;margin-top:6px;}
.app-mode-arrow{flex:none;font-size:24px;color:var(--line);}
.app-mode-back{
  background:none;border:none;color:var(--brand-dark);font-weight:700;font-size:13px;
  padding:6px 0;margin-bottom:8px;cursor:pointer;
}

/* ---------- Schwierigkeitsauswahl ---------- */
.app-diff-picker{display:flex;gap:8px;margin-bottom:8px;}
.app-diff-chip{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:10px 4px;border-radius:14px;border:2px solid var(--line);background:#fff;
  font-size:12px;font-weight:700;color:var(--ink-soft);
}
.app-diff-chip .app-diff-icon{font-size:18px;}
.app-diff-chip.active{border-color:var(--brand);color:var(--brand-dark);background:var(--mist-2);}
.app-diff-picker.is-locked .app-diff-chip{opacity:.5;pointer-events:none;}
.app-diff-hint{font-size:12px;color:var(--ink-soft);margin:0 0 12px;text-align:center;}

/* ---------- Level- & Faehigkeitsauswahl (Rettungstrupp) ---------- */
.app-level-picker .app-diff-chip.is-locked-level{opacity:.45;}
.app-skill-picker{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px;}
.app-skill-chip{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 3px;border-radius:12px;border:2px solid var(--line);background:#fff;
  font-size:10.5px;font-weight:700;color:var(--ink-soft);position:relative;
}
.app-skill-chip .app-skill-icon{font-size:17px;line-height:1.1;}
.app-skill-chip .app-skill-label{line-height:1.1;}
.app-skill-count{
  position:absolute;top:-6px;right:-4px;min-width:19px;
  background:var(--brand);color:#fff;border-radius:999px;padding:1px 5px;
  font-size:10.5px;border:2px solid var(--mist);
}
.app-skill-chip.active{border-color:var(--gold);color:#8a5c04;background:#fff8ea;}
.app-skill-chip.active .app-skill-count{background:var(--gold);}
.app-skill-chip:disabled{opacity:.35;pointer-events:none;}
.app-skill-hint{font-size:11.5px;color:var(--ink-soft);margin:0 0 12px;text-align:center;}

/* ---------- Level / Dashboard card ---------- */
.app-level-card{
  background:linear-gradient(135deg, var(--brand), var(--brand-dark));
  color:#fff;border-radius:20px;padding:20px;
  box-shadow:var(--shadow-lg);
  margin-bottom:16px;
}
.app-level-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;}
.app-level-icon{font-size:32px;line-height:1;}
.app-level-name{font-family:Georgia,serif;font-size:19px;font-weight:700;}
.app-level-points{font-size:12.5px;opacity:.88;}
.app-progress-track{
  height:9px;border-radius:999px;background:rgba(255,255,255,0.25);overflow:hidden;
}
.app-progress-fill{
  height:100%;border-radius:999px;
  background:linear-gradient(90deg, var(--gold), #ffd875);
  transition:width .5s cubic-bezier(.22,1,.36,1);
}
.app-progress-label{font-size:11.5px;margin-top:6px;opacity:.85;}
.app-streak-row{
  display:flex;align-items:center;gap:6px;margin-top:12px;
  font-size:13px;font-weight:600;
}

/* ---------- Badge shelf ---------- */
.app-badge-shelf{
  display:flex;gap:10px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px;
  -webkit-overflow-scrolling:touch;
}
.app-badge{
  flex:none;width:64px;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.app-badge-icon{
  width:52px;height:52px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;font-size:24px;
  background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .2s ease;
}
.app-badge.locked .app-badge-icon{filter:grayscale(1);opacity:.35;background:var(--mist-2);}
.app-badge.just-earned .app-badge-icon{animation:appBadgePop .55s cubic-bezier(.34,1.56,.64,1);}
@keyframes appBadgePop{0%{transform:scale(.3) rotate(-20deg);}60%{transform:scale(1.2) rotate(8deg);}100%{transform:scale(1) rotate(0);}}
.app-badge span{font-size:10.5px;color:var(--ink-soft);line-height:1.2;}

.app-hint-box{
  margin-top:18px;padding:14px 16px;border-radius:14px;
  background:var(--mist-2);border:1px dashed var(--line);
  font-size:12.5px;color:var(--ink-soft);
}
.app-legal-links{margin-top:14px;text-align:center;font-size:11.5px;color:var(--ink-soft);}
.app-legal-links a{color:var(--ink-soft);text-decoration:underline;}

/* ---------- Mehr-Bildschirm (Side Features) ---------- */
.app-more-section{
  background:#fff;border:1px solid var(--line);border-radius:18px;
  padding:16px;margin-bottom:16px;box-shadow:var(--shadow);
}
.app-more-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.app-more-icon{font-size:20px;}
.app-more-head h2{font-family:Georgia,serif;font-size:16px;margin:0;color:var(--ink);}
.app-more-text{font-size:12.5px;color:var(--ink-soft);margin:0 0 12px;}
.app-more-link-card{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--mist-2);border-radius:12px;padding:12px 14px;
  font-weight:700;font-size:13.5px;color:var(--brand-dark);
}

.app-sender-form{display:flex;gap:10px;margin-bottom:12px;}
.app-sender-field{flex:1;}
.app-sender-field label{display:block;font-size:11px;font-weight:700;color:var(--ink-soft);margin-bottom:4px;}
.app-sender-field input{
  width:100%;padding:9px 10px;border-radius:10px;border:1px solid var(--line);
  font-size:13px;font-family:inherit;color:var(--ink);
}
.app-sender-field input:focus{outline:2px solid var(--brand-light);outline-offset:1px;}

.app-photo-capture-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:16px 8px;border-radius:16px;border:2px solid var(--brand);
  background:#fff;color:var(--brand-dark);font-weight:700;font-size:14px;cursor:pointer;
  margin-bottom:14px;transition:transform .15s ease;
}
.app-photo-capture-btn:active{transform:scale(.98);}
.app-photo-capture-btn .app-photo-btn-icon{font-size:22px;}

.app-gallery{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;
}
.app-photo-tile{
  position:relative;aspect-ratio:1/1;border-radius:12px;overflow:hidden;
  background:var(--mist-2);border:2px solid transparent;cursor:pointer;
  animation:appCardIn .25s ease;transition:border-color .15s ease;
}
.app-photo-tile.selected{border-color:var(--brand);}
.app-photo-tile img{width:100%;height:100%;object-fit:cover;display:block;}
.app-photo-del{
  position:absolute;top:4px;right:4px;width:20px;height:20px;border-radius:50%;
  background:rgba(0,0,0,0.55);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center;
}
.app-photo-sendstate{
  position:absolute;top:4px;left:4px;width:18px;height:18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:10px;
  background:rgba(255,255,255,0.92);box-shadow:0 2px 6px rgba(0,0,0,0.2);
}
.app-photo-check{
  position:absolute;bottom:4px;left:4px;width:22px;height:22px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;
  background:rgba(255,255,255,0.92);color:var(--ink-soft);box-shadow:0 2px 6px rgba(0,0,0,0.2);
  border:2px solid #fff;
}
.app-photo-tile.selected .app-photo-check{background:var(--brand);color:#fff;border-color:var(--brand);}
.app-photo-send-btn{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:13px 8px;border-radius:14px;border:none;
  background:var(--brand);color:#fff;font-weight:700;font-size:14px;cursor:pointer;
  margin-top:12px;box-shadow:0 8px 20px rgba(0,104,88,0.3);
  transition:transform .15s ease;
}
.app-photo-send-btn:active{transform:scale(.98);}
.app-empty-state{
  text-align:center;padding:24px 16px;color:var(--ink-soft);font-size:13px;
}

.app-photo-note{font-size:11.5px;color:var(--ink-soft);margin:14px 0 0;text-align:center;}
.app-clear-photos{
  display:block;margin:16px auto 0;background:none;border:none;color:#a4271f;font-size:12.5px;
  text-decoration:underline;cursor:pointer;
}

/* Foto-Vorschau-Overlay */
.app-overlay{
  position:fixed;inset:0;background:rgba(10,20,18,0.82);
  display:flex;align-items:center;justify-content:center;z-index:200;
  padding:20px;
}
.app-overlay[hidden]{display:none;}
.app-overlay-box{
  background:#fff;border-radius:18px;overflow:hidden;max-width:340px;width:100%;
}
.app-overlay-box img{width:100%;display:block;max-height:340px;object-fit:cover;}
.app-overlay-actions{display:flex;gap:8px;padding:14px;}
.app-overlay-actions .btn{flex:1;justify-content:center;font-size:13.5px;padding:11px 10px;}
.app-overlay-close{
  position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,0.16);color:#fff;display:flex;align-items:center;justify-content:center;
}

/* ---------- Game screen (gemeinsam) ---------- */
.app-game-stage{
  position:relative;
  width:100%;aspect-ratio:4/5;
  border-radius:18px;overflow:hidden;
  background:#dff0ea;
  box-shadow:var(--shadow-lg);
  border:10px solid #0d1417;
  /* Standard: vertikales Scrollen ueber der Spielflaeche bleibt moeglich.
     Nur das Wisch-Spiel braucht den Finger exklusiv und schaltet waehrend
     der laufenden Runde per .is-playing auf touch-action:none um. */
  touch-action:pan-y;
  user-select:none;
}
.app-game-stage.is-playing{touch-action:none;}
.app-game-stage.app-shake{animation:appStageShake .35s ease;}
@keyframes appStageShake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-8px) rotate(-.6deg);}
  40%{transform:translateX(7px) rotate(.6deg);}
  60%{transform:translateX(-5px);}
  80%{transform:translateX(4px);}
}
.app-game-stage canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}
.app-game-hud{
  position:absolute;top:10px;left:10px;right:10px;z-index:5;
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  pointer-events:none;
}
.app-game-badgehud{
  background:rgba(255,255,255,0.92);border-radius:999px;padding:5px 12px;
  font-size:12.5px;font-weight:700;color:var(--ink);box-shadow:0 4px 10px rgba(0,0,0,0.18);
}
.app-game-progress-wrap{
  position:absolute;left:10px;right:10px;bottom:10px;z-index:5;
  background:rgba(255,255,255,0.88);border-radius:999px;padding:4px;
  box-shadow:0 4px 10px rgba(0,0,0,0.18);
}
.app-game-progress-inner{height:10px;border-radius:999px;background:var(--mist-2);overflow:hidden;}
.app-game-progress-bar{height:100%;background:linear-gradient(90deg,var(--green),var(--brand));width:0%;transition:width .12s linear;}

.app-game-controls{display:flex;gap:10px;margin-top:14px;}
.app-game-controls .btn{flex:1;justify-content:center;}

.app-game-result{
  position:absolute;inset:0;z-index:20;
  background:rgba(255,255,255,0.97);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:20px;gap:8px;
  animation:appFadeIn .25s ease;
}
.app-game-result[hidden]{display:none;}
.app-stars{font-size:30px;letter-spacing:4px;margin-bottom:2px;}
.app-result-title{font-family:Georgia,serif;font-size:20px;color:var(--brand-dark);}
.app-result-meta{font-size:13px;color:var(--ink-soft);margin-bottom:6px;}
.app-result-points{
  font-weight:700;color:#fff;background:var(--gold);padding:6px 14px;border-radius:999px;
  font-size:13.5px;margin-bottom:10px;
}
.app-result-actions{display:flex;flex-direction:column;gap:8px;width:100%;max-width:260px;}
.app-result-actions .btn{width:100%;justify-content:center;}
.app-subtle-cta{
  display:block;text-align:center;font-size:12px;color:var(--ink-soft);
  text-decoration:underline;margin-top:4px;
  opacity:0;animation:appSubtleIn .5s ease 1.1s forwards;
}
@keyframes appSubtleIn{to{opacity:1;}}

/* ---------- Contact / Termin ---------- */
.app-contact-grid{display:flex;gap:10px;margin-bottom:20px;}
.app-contact-btn{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:14px 6px;border-radius:14px;background:var(--mist-2);border:1px solid var(--line);
  font-size:12px;font-weight:700;color:var(--ink);
}
.app-contact-btn .app-contact-icon{font-size:20px;}
.app-section-divider{
  display:flex;align-items:center;gap:10px;margin:8px 0 16px;
  color:var(--ink-soft);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
}
.app-section-divider::before,.app-section-divider::after{content:'';flex:1;height:1px;background:var(--line);}

/* ---------- Tabbar ---------- */
.app-tabbar{
  flex:none;display:flex;gap:4px;
  background:#fff;border-bottom:1px solid var(--line);
  padding:8px 8px;
  box-shadow:0 6px 16px rgba(0,40,35,0.06);
  position:relative;z-index:30;
}
.app-tab{
  flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px;
  padding:9px 4px;border-radius:12px;color:var(--ink-soft);font-size:12px;font-weight:700;
  background:none;border:none;transition:background .15s ease,color .15s ease,transform .1s ease;
}
.app-tab:active{transform:scale(.95);}
.app-tab .app-tab-icon{font-size:17px;line-height:1;}
.app-tab.active{color:var(--brand-dark);background:var(--mist-2);}

/* ---------- Toasts ---------- */
.app-toast-root{
  position:fixed;top:calc(12px + env(safe-area-inset-top));left:0;right:0;
  display:flex;flex-direction:column;align-items:center;gap:8px;z-index:300;pointer-events:none;
}
.app-toast{
  display:flex;align-items:center;gap:8px;
  background:var(--ink);color:#fff;padding:8px 16px 8px 8px;border-radius:999px;
  font-size:13px;font-weight:600;box-shadow:0 10px 24px rgba(0,0,0,0.28);
  animation:appToastIn .25s ease, appToastOut .25s ease 2.2s forwards;
  max-width:88%;text-align:left;
}
.app-toast.badge{background:linear-gradient(135deg,var(--gold),#c9861b);}
@keyframes appToastIn{from{opacity:0;transform:translateY(-10px);}to{opacity:1;transform:none;}}
@keyframes appToastOut{to{opacity:0;transform:translateY(-10px);}}

/* ---------- Confetti canvas ---------- */
#app-confetti-canvas{
  position:fixed;inset:0;z-index:250;pointer-events:none;
}

/* ---------- Install hint ---------- */
.app-install-hint{
  background:#fff;border:1px dashed var(--brand);border-radius:14px;
  padding:12px 14px;font-size:12px;color:var(--ink-soft);margin-bottom:16px;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}
.app-install-hint > span:nth-child(2){flex:1 1 180px;}
.app-install-hint strong{color:var(--ink);}