:root{--ink:#11100f;--paper:#fff9ea;--pink:#ff78b2;--yellow:#ffe15f;--mint:#85f5d1;--shadow:rgba(22,12,4,.18)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#fffaf0;color:var(--ink);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif}button,input{font:inherit}.sn-app{width:100%;overflow-x:hidden}.sn-header{width:min(1180px,94vw);margin:0 auto;padding:22px 0 8px;display:flex;justify-content:space-between;align-items:center;gap:18px}.sn-brand{display:flex;align-items:center;gap:10px;font-weight:950;letter-spacing:.06em}.sn-mark{width:28px;height:28px;border-radius:99px;background:#111;color:#fff;display:grid;place-items:center}.sn-nav{display:flex;gap:20px;font-size:13px;font-weight:850}.sn-nav a{color:#111;text-decoration:none;opacity:.7}.sn-intro{width:min(1180px,94vw);margin:16px auto 34px;display:grid;grid-template-columns:minmax(0,.95fr) minmax(360px,1.05fr);gap:28px;align-items:center}.sn-intro-copy{min-width:0}.sn-badge{display:inline-flex;border:2px solid #111;border-radius:999px;background:var(--yellow);padding:9px 14px;font-weight:950;box-shadow:0 5px 0 #111;transform:rotate(-2deg);margin-bottom:20px}.sn-intro h1{font-size:clamp(54px,7.5vw,104px);line-height:.84;letter-spacing:-.08em;margin:0 0 18px;font-weight:1000}.sn-intro h1 em{font-family:Georgia,serif;font-style:italic;font-weight:500;letter-spacing:-.06em;background:linear-gradient(transparent 55%,rgba(255,120,178,.72) 55%)}.sn-intro p{max-width:560px;font-size:clamp(17px,1.45vw,21px);line-height:1.35;font-weight:650;margin:0 0 18px}.sn-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:620px;margin:18px 0}.sn-step{border:2px solid rgba(17,16,15,.16);border-radius:18px;background:rgba(255,255,255,.72);padding:11px 12px;font-size:13px;font-weight:950}.sn-step.done{background:rgba(133,245,209,.45);border-color:rgba(17,16,15,.35)}.sn-intro-actions,.sn-exp-buttons{display:flex;flex-wrap:wrap;gap:10px}.sn-btn,.sn-exp-buttons button{border:2px solid #111;border-radius:999px;background:#fff;color:#111;padding:13px 18px;font-weight:950;box-shadow:0 6px 0 #111;cursor:pointer}.sn-primary{background:#111!important;color:#fff!important}.sn-yellow{background:var(--yellow)!important}.sn-pink{background:var(--pink)!important}.sn-btn:active,.sn-action:active,.sn-exp-buttons button:active{transform:translateY(4px);box-shadow:0 2px 0 #111}.sn-namebox{margin-top:16px;max-width:540px;padding:16px;border:2px solid rgba(17,16,15,.16);border-radius:24px;background:rgba(255,255,255,.78)}.sn-namebox label{display:block;margin:10px 0}.sn-namebox span{display:block;font-size:12px;font-weight:950;text-transform:uppercase;opacity:.65;margin-bottom:5px}.sn-namebox input{width:100%;border:2px solid #111;border-radius:18px;padding:13px 14px;font-size:17px;font-weight:850}.sn-room{position:relative;border:2px solid rgba(17,16,15,.14);border-radius:32px;overflow:hidden;min-height:500px;background:linear-gradient(90deg,transparent 0 49.7%,rgba(17,16,15,.08) 49.7% 50.3%,transparent 50.3%),linear-gradient(180deg,#fffdf6 0 57%,#e4c180 57% 100%);box-shadow:0 22px 60px var(--shadow),inset 0 0 0 2px rgba(255,255,255,.65)}.sn-floor{position:absolute;left:-12%;right:-12%;bottom:0;height:42%;background:repeating-linear-gradient(90deg,rgba(76,45,17,.16) 0 2px,transparent 2px 62px),linear-gradient(180deg,#e8cc91,#bd884c);transform:perspective(680px) rotateX(58deg);transform-origin:top center}.sn-cardboard{position:absolute;left:50%;bottom:76px;width:280px;height:210px;transform:translateX(-50%);z-index:3}.box-body{position:absolute;left:0;right:0;bottom:0;height:145px;border-radius:18px 18px 28px 28px;background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 30%),#c88f4a;border:3px solid rgba(79,47,18,.95);box-shadow:0 18px 34px rgba(40,20,0,.22),inset 0 0 0 2px rgba(255,255,255,.18)}.box-flap{position:absolute;top:18px;width:50%;height:62px;background:#d9a45e;border:3px solid rgba(79,47,18,.95);z-index:1}.box-flap.left{left:0;transform:skewY(-12deg);border-radius:16px 0 0 8px}.box-flap.right{right:0;transform:skewY(12deg);border-radius:0 16px 8px 0}.sn-cat-peek{position:absolute;left:50%;bottom:120px;width:180px;height:180px;transform:translateX(-50%) translateY(62px);transition:transform .45s ease;z-index:2}.sn-cat-peek.show{transform:translateX(-50%) translateY(0)}.sn-cat-face{position:relative;width:144px;height:128px;margin:34px auto 0;border-radius:48% 48% 42% 42%;background:radial-gradient(circle at 35% 70%,#fff1d5 0 18%,transparent 19%),radial-gradient(circle at 65% 70%,#fff1d5 0 18%,transparent 19%),repeating-linear-gradient(90deg,transparent 0 13px,rgba(53,33,18,.26) 13px 18px),linear-gradient(180deg,#d6a46a,#a06b38);border:3px solid rgba(62,38,20,.92);box-shadow:0 10px 24px rgba(44,24,8,.23)}.ear{position:absolute;top:-37px;width:56px;height:60px;background:#c98c54;border:3px solid rgba(62,38,20,.92);clip-path:polygon(50% 0,100% 100%,0 100%)}.ear.left{left:0;transform:rotate(-18deg)}.ear.right{right:0;transform:rotate(18deg)}.eye{position:absolute;top:46px;width:30px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 12%,transparent 13%),radial-gradient(circle at 48% 50%,#0b1110 0 34%,#6fddbc 35% 64%,#0b1110 65%);box-shadow:0 0 0 3px rgba(20,15,10,.9)}.eye.left{left:32px}.eye.right{right:32px}.nose{position:absolute;left:50%;top:79px;width:18px;height:13px;transform:translateX(-50%);border-radius:50% 50% 58% 58%;background:#ef8f8f;border:2px solid rgba(70,35,25,.8)}.mouth{position:absolute;left:50%;top:96px;transform:translateX(-50%);font-size:18px;font-weight:900}.whiskers{position:absolute;left:50%;top:88px;width:154px;height:34px;transform:translateX(-50%)}.whiskers:before,.whiskers:after{content:"";position:absolute;top:7px;width:58px;height:2px;background:rgba(40,30,20,.62);box-shadow:0 10px 0 rgba(40,30,20,.55),0 20px 0 rgba(40,30,20,.45)}.whiskers:before{left:0;transform:rotate(7deg)}.whiskers:after{right:0;transform:rotate(-7deg)}.sn-reaction{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:min(520px,88%);border-radius:999px;padding:11px 16px;background:rgba(255,255,255,.9);border:2px solid rgba(17,16,15,.14);box-shadow:0 10px 26px rgba(20,10,0,.13);font-weight:950;text-align:center;z-index:5}.sn-game{width:min(1180px,94vw);margin:18px auto 36px}.sn-gamegrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:stretch}.sn-game-room{min-height:520px}.sn-stage{position:absolute;inset:30px 20px 76px;display:grid;place-items:center;z-index:3}.sn-css-cat{position:relative;width:190px;height:310px}.sn-cat-face.full{margin:0 auto;width:150px;height:134px}.sn-cat-body{position:absolute;left:50%;top:112px;width:122px;height:178px;transform:translateX(-50%);border-radius:46% 46% 38% 38%;background:repeating-linear-gradient(90deg,transparent 0 14px,rgba(53,33,18,.22) 14px 19px),linear-gradient(180deg,#c9955b,#8e5b30);border:3px solid rgba(62,38,20,.88)}.room-slot{position:absolute;z-index:4;display:grid;place-items:center;min-width:58px;min-height:50px;border-radius:18px;background:rgba(255,255,255,.78);border:2px solid rgba(17,16,15,.14);font-size:28px;box-shadow:0 10px 24px rgba(20,10,0,.1)}.room-slot small{display:block;font-size:10px;font-weight:950}.room-slot.napf{left:5%;bottom:82px}.room-slot.toy{right:5%;bottom:90px}.room-slot.bag{left:6%;top:78px}.room-slot.find{right:6%;top:84px}.sn-side{display:grid;gap:14px}.sn-card{background:rgba(255,255,255,.82);border:2px solid rgba(17,16,15,.13);border-radius:24px;padding:14px;box-shadow:0 14px 38px rgba(20,10,0,.1)}.sn-card-head{display:flex;justify-content:space-between;gap:10px;align-items:center;margin-bottom:10px}.sn-paws{background:#111;color:#fff;border-radius:999px;padding:7px 11px;font-weight:950}.stat{display:grid;grid-template-columns:78px 1fr 34px;gap:8px;align-items:center;font-size:13px;font-weight:850;margin:8px 0}.stat i{height:12px;border-radius:999px;background:rgba(17,16,15,.09);overflow:hidden}.stat i b{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pink),var(--yellow),var(--mint));width:50%}.inventory{display:flex;flex-wrap:wrap;gap:7px}.inventory span{border-radius:999px;padding:7px 10px;background:rgba(255,225,95,.28);border:1px solid rgba(17,16,15,.12);font-size:12px;font-weight:850}.sn-kitty-tivi{border:3px solid #111;border-radius:24px;padding:11px;background:linear-gradient(145deg,#ffe36b,#ff7fae);box-shadow:0 12px 0 rgba(17,16,15,.12),0 20px 44px rgba(20,10,0,.18);transform:rotate(-1deg)}.tv-label{display:flex;justify-content:space-between;font-size:11px;font-weight:950;letter-spacing:.08em}.tv-label span{color:#0f7}.tv-screen{margin-top:8px;min-height:72px;border-radius:15px;padding:10px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.06) 0 1px,rgba(0,0,0,.06) 2px 4px),#18221d;color:#eaffdf;font-weight:900;text-shadow:0 0 7px rgba(173,255,190,.55)}.sn-actions{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:14px 0}.sn-action{border:2px solid #111;border-radius:22px;background:#fff;min-height:72px;font-weight:950;box-shadow:0 8px 0 #111;cursor:pointer}.sn-action span{display:block;font-size:22px}.sn-expedition{background:#111;color:#f8ffe9;border-radius:28px;padding:16px;margin-top:16px}.sn-exp-head{display:flex;justify-content:space-between;margin-bottom:10px}.sn-map{position:relative;min-height:150px;border-radius:22px;overflow:hidden;border:2px solid rgba(255,255,255,.14);background:radial-gradient(circle at 18% 25%,rgba(126,240,206,.25),transparent 14%),radial-gradient(circle at 78% 60%,rgba(255,122,174,.24),transparent 18%),linear-gradient(35deg,rgba(255,255,255,.1) 0 1px,transparent 1px 54px),#1c2623}.sn-map-dot{position:absolute;width:18px;height:18px;border-radius:99px;background:#ffdf5a;box-shadow:0 0 0 0 rgba(255,223,90,.68),0 0 20px rgba(255,223,90,.85);animation:pulse 1.35s infinite,travel 18s linear infinite}@keyframes pulse{100%{box-shadow:0 0 0 22px rgba(255,223,90,0),0 0 20px rgba(255,223,90,.85)}}@keyframes travel{0%{left:13%;top:72%}20%{left:36%;top:31%}45%{left:71%;top:43%}70%{left:58%;top:72%}100%{left:13%;top:72%}}.sn-exp-buttons{margin:12px 0}.sn-soundboard{position:fixed;left:50%;bottom:12px;z-index:80;transform:translateX(-50%);display:flex;gap:7px;padding:8px;border-radius:999px;background:rgba(255,255,255,.86);border:2px solid rgba(17,16,15,.14);box-shadow:0 12px 34px rgba(20,10,0,.16);backdrop-filter:blur(10px)}.sn-soundboard button{border:0;border-radius:99px;width:38px;height:38px;background:#111;color:#fff;font-weight:950}.sn-toast{position:fixed;left:50%;bottom:72px;transform:translateX(-50%) translateY(18px);opacity:0;z-index:90;width:min(520px,92vw);border-radius:24px;padding:14px 16px;background:#111;color:#fff;font-weight:900;pointer-events:none}.sn-toast.show{animation:toast 2.7s ease forwards}@keyframes toast{12%,82%{opacity:1;transform:translateX(-50%) translateY(0)}100%{opacity:0;transform:translateX(-50%) translateY(18px)}}.glitch{animation:glitch .35s steps(2,end) 3}@keyframes glitch{35%{filter:hue-rotate(120deg) contrast(1.4);transform:translateX(-2px)}70%{filter:hue-rotate(-80deg) contrast(1.3);transform:translateX(2px)}}[hidden]{display:none!important}
@media(max-width:1020px){.sn-intro{grid-template-columns:1fr;gap:18px}.sn-gamegrid{grid-template-columns:1fr}.sn-side{grid-template-columns:1fr 1fr}.sn-kitty-tivi{grid-column:1/-1}.sn-room{min-height:430px}.sn-intro h1{font-size:clamp(46px,10vw,78px)}}
@media(max-width:620px){.sn-header{width:calc(100vw - 22px);padding:14px 0 6px}.sn-nav{display:none}.sn-intro,.sn-game{width:calc(100vw - 18px);margin-top:8px}.sn-intro{display:flex;flex-direction:column}.sn-intro-copy{order:1}.sn-intro-room{order:2}.sn-badge{margin-bottom:12px}.sn-intro h1{font-size:clamp(42px,13vw,62px);margin-bottom:12px}.sn-intro p{font-size:15.5px}.sn-progress{grid-template-columns:1fr;gap:8px;margin:12px 0}.sn-step{padding:9px 10px}.sn-intro-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.sn-btn{padding:12px 12px;font-size:14px}.sn-room{border-radius:24px;min-height:360px}.sn-cardboard{width:220px;height:180px;bottom:62px}.box-body{height:122px}.box-flap{top:22px;height:52px}.sn-cat-peek{bottom:104px;transform:translateX(-50%) translateY(56px)}.sn-cat-face{width:124px;height:112px}.eye{top:40px;width:26px;height:30px}.eye.left{left:27px}.eye.right{right:27px}.nose{top:70px}.mouth{top:84px}.whiskers{top:80px;width:132px}.sn-reaction{bottom:14px;font-size:13px;border-radius:20px}.sn-gamegrid{display:block}.sn-side{display:block}.sn-card,.sn-kitty-tivi{margin-top:10px}.sn-actions{grid-template-columns:repeat(3,1fr);gap:8px}.sn-action{min-height:64px;font-size:12px;border-radius:18px}.sn-soundboard{bottom:8px}.sn-toast{bottom:66px}.room-slot{min-width:46px;min-height:40px;font-size:22px}.room-slot small{display:none}}


/* V23 FIX – Original Starttext + Katze sofort sichtbar */
.sn-intro h1{
  font-size:clamp(48px,7.2vw,96px);
}

/* ============================================================
   V23 FINAL FIX – Intro-Katze robust & unzerstörbar (Mobile zuerst)
   Überschreibt alle vorherigen, sich widersprechenden Regeln.
   Die Katze schaut klar über den Kartonrand, kann nicht zum Strich kollabieren.
   ============================================================ */
.sn-intro-room{
  position:relative !important;
  min-height:360px !important;
  height:360px !important;
  overflow:hidden !important;
}
/* Karton: klar sichtbar, mittig unten */
.sn-cardboard{
  position:absolute !important;
  left:50% !important;
  bottom:34px !important;
  transform:translateX(-50%) !important;
  width:240px !important;
  height:170px !important;
  z-index:3 !important;
}
.box-body{
  position:absolute !important; left:0 !important; right:0 !important; bottom:0 !important;
  height:120px !important; z-index:7 !important;
  border-radius:14px 14px 22px 22px !important;
  background:linear-gradient(135deg,rgba(255,255,255,.18),transparent 30%),#c88f4a !important;
  border:3px solid rgba(79,47,18,.95) !important;
}
.box-flap{ position:absolute !important; top:6px !important; height:44px !important; z-index:6 !important; }
.box-flap.left{ left:0 !important; }
.box-flap.right{ right:0 !important; }

/* Katze: feste Größe, sitzt ÜBER dem Karton, schaut heraus */
.sn-cat-peek{
  position:absolute !important;
  left:50% !important;
  bottom:96px !important;             /* Kopf ragt über den Kartonrand */
  width:170px !important;
  height:160px !important;
  transform:translateX(-50%) translateY(0) !important;
  opacity:1 !important;
  z-index:9 !important;
  transition:transform .4s ease !important;
}
.sn-cat-peek.retreat{ transform:translateX(-50%) translateY(34px) !important; }

.sn-cat-face{
  position:relative !important;
  width:150px !important;
  height:132px !important;
  margin:30px auto 0 !important;
}
.ear{ top:-32px !important; width:54px !important; height:58px !important; }
.eye{ top:48px !important; width:30px !important; height:34px !important; }
.eye.left{ left:30px !important; }
.eye.right{ right:30px !important; }
.nose{ top:80px !important; }
.mouth{ top:98px !important; }
.whiskers{ top:90px !important; width:150px !important; }

@media(max-width:620px){
  .sn-intro-room{ min-height:320px !important; height:320px !important; }
  .sn-cardboard{ width:210px !important; height:150px !important; bottom:30px !important; }
  .box-body{ height:104px !important; }
  .sn-cat-peek{ width:150px !important; height:142px !important; bottom:84px !important; }
  .sn-cat-face{ width:132px !important; height:118px !important; }
}

.sn-intro h1 em{
  color:#2b2a2a;
  background:linear-gradient(transparent 55%,rgba(255,120,178,.78) 55%);
}

.sn-intro-room{
  min-height:540px;
}

.sn-cardboard{
  bottom:58px;
  width:310px;
  height:235px;
}

.sn-cat-peek{
  bottom:150px;
  width:220px;
  height:215px;
  transform:translateX(-50%) translateY(0) !important;
  opacity:1 !important;
  z-index:8; /* über box-body(7)/box-flap(6): Katze schaut sichtbar aus dem Karton */
}

.sn-cat-face{
  width:168px;
  height:150px;
  margin-top:22px;
  border-width:3px;
  box-shadow:0 16px 34px rgba(44,24,8,.28);
}

.ear{
  top:-44px;
  width:66px;
  height:70px;
}

.eye{
  top:54px;
  width:36px;
  height:40px;
}

.eye.left{left:38px}
.eye.right{right:38px}

.nose{
  top:92px;
  width:21px;
  height:15px;
}

.mouth{
  top:110px;
}

.whiskers{
  top:102px;
  width:176px;
}

.box-flap{
  z-index:6;
}

.box-body{
  z-index:7;
}

.sn-reaction{
  z-index:9;
}

/* On first two interactions she dips lower, but never vanishes fully */
.sn-cat-peek.retreat{
  transform:translateX(-50%) translateY(40px) !important;
}

@media(max-width:620px){
  .sn-intro h1{
    font-size:clamp(40px,11.8vw,58px);
  }
  .sn-intro-room{
    min-height:390px;
  }
  .sn-cardboard{
    width:230px;
    height:188px;
    bottom:52px;
  }
  .sn-cat-peek{
    bottom:112px;
    width:168px;
    height:165px;
  }
  .sn-cat-face{
    width:132px;
    height:118px;
  }
  .ear{
    top:-36px;
    width:54px;
    height:58px;
  }
  .eye{
    top:42px;
    width:28px;
    height:32px;
  }
  .eye.left{left:30px}
  .eye.right{right:30px}
  .nose{top:74px}
  .mouth{top:90px}
  .whiskers{top:84px;width:144px}
}

/* ============================================================
   V23 PORTRAIT FIX – Hochformat unzerstörbar.
   Greift bei schmalen UND hohen Screens (Handy senkrecht).
   Erzwingt 1 Spalte, volle Breite, sichtbaren Raum + Katze.
   ============================================================ */
@media (max-width: 820px), (orientation: portrait){
  .sn-intro{
    display:flex !important;
    flex-direction:column !important;
    width:calc(100vw - 18px) !important;
    max-width:100% !important;
    grid-template-columns:none !important;
    gap:16px !important;
    align-items:stretch !important;
  }
  /* Zuerst die süße Katze (Raum oben), dann Text + Buttons darunter */
  .sn-intro-copy{ order:2 !important; width:100% !important; min-width:0 !important; }
  .sn-intro-room{
    order:1 !important;
    width:100% !important;
    min-width:0 !important;
    min-height:420px !important;
    height:420px !important;
    display:block !important;
  }
  /* Karton + Katze garantiert sichtbar und zentriert */
  .sn-cardboard{ left:50% !important; transform:translateX(-50%) !important; }
  .sn-cat-peek{ left:50% !important; transform:translateX(-50%) translateY(0) !important; opacity:1 !important; z-index:9 !important; }

  .sn-gamegrid{ display:block !important; }
  .sn-side{ display:block !important; }
  .sn-game-room{ width:100% !important; min-height:360px !important; }
}

/* ===== Vertrauens-Leiste + fliegende Items (Einzug) ===== */
.sn-trust{ margin:6px 0 14px; max-width:560px; }
.sn-trust-head{ display:flex; justify-content:space-between; align-items:baseline; font-weight:950; font-size:13px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.sn-trust-head b{ font-size:16px; }
.sn-trust-bar{ height:16px; border-radius:999px; background:rgba(17,16,15,.1); border:2px solid #111; overflow:hidden; box-shadow:0 4px 0 #111; }
.sn-trust-bar i{ display:block; height:100%; width:0; border-radius:999px; background:linear-gradient(90deg,var(--pink),var(--yellow),var(--mint)); transition:width .5s cubic-bezier(.22,1,.36,1); }
.sn-trust small{ display:block; margin-top:7px; font-size:12px; font-weight:650; opacity:.7; }
.sn-btn .ico{ margin-right:6px; }
.sn-intro-actions{ transition:opacity .4s ease; }

/* Item fliegt von unten zur Katze und verblasst */
.sn-fly-item{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%) translateY(0) scale(.6);
  font-size:44px; z-index:12; pointer-events:none; opacity:0; filter:drop-shadow(0 6px 10px rgba(0,0,0,.3));
  transition:transform .9s cubic-bezier(.22,1,.36,1), opacity .9s ease;
}
.sn-fly-item.go{ transform:translateX(-50%) translateY(-120px) scale(1.25); opacity:1; }
.sn-cat-peek.scared{ animation:catScare .5s ease; }
@keyframes catScare{ 30%{ transform:translateX(-50%) translateY(28px) !important; } 60%{ transform:translateX(-54%) translateY(20px) !important; } }

/* ===== Exkursions-Karte (Leaflet) ===== */
.sn-realmap{ height:300px; width:100%; border-radius:22px; overflow:hidden; border:2px solid rgba(255,255,255,.18); margin-bottom:12px; background:#1c2623; }
.sn-realmap .leaflet-control-attribution{ font-size:9px; }
.sn-cat-marker .sn-cat-pin{
  font-size:30px; line-height:1; text-align:center;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
  animation:catBob 1.1s ease-in-out infinite;
}
@keyframes catBob{ 50%{ transform:translateY(-4px); } }
.sn-map-controls{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.sn-map-controls .sn-btn{ flex:1; min-width:140px; }
@media(max-width:620px){ .sn-realmap{ height:240px; } .sn-map-controls .sn-btn{ min-width:0; } }

/* ===== Schmuso-Modulator + Sprechen ===== */
.sn-modulator{ background:#111; color:#f8ffe9; border-radius:28px; padding:18px; margin-top:16px; }
.sn-mod-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:8px; }
.sn-mod-head strong{ font-size:18px; letter-spacing:.02em; }
.sn-mod-head span{ background:#ffdf5a; color:#111; font-weight:950; border-radius:999px; padding:4px 12px; }
.sn-mod-intro{ font-size:14px; line-height:1.45; opacity:.85; margin:0 0 14px; max-width:640px; }
.sn-mod-device{ border:2px solid rgba(255,255,255,.15); border-radius:16px; padding:10px; margin-bottom:12px; background:#0c1410; }
.sn-mod-screen{ font-family:ui-monospace,monospace; color:#9effc4; text-shadow:0 0 8px rgba(120,255,180,.5); min-height:22px; }
.sn-mod-parts{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.mod-part{ border:2px solid rgba(255,255,255,.14); border-radius:16px; padding:10px; text-align:center; opacity:.5; transition:.3s; }
.mod-part.have{ opacity:1; border-color:#9effc4; background:rgba(120,255,180,.08); box-shadow:0 0 0 1px rgba(120,255,180,.3) inset; }
.mp-emoji{ display:block; font-size:28px; }
.mp-name{ display:block; font-size:11px; font-weight:850; margin:4px 0 2px; }
.mp-state{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:.05em; opacity:.7; }
.sn-talk-lock{ border:2px dashed rgba(255,255,255,.2); border-radius:16px; padding:14px; text-align:center; font-weight:700; font-size:13px; opacity:.8; }
.sn-talk-box{ }
.sn-talk-log{ max-height:260px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.sn-talk-msg{ max-width:85%; padding:10px 14px; border-radius:16px; font-size:14px; line-height:1.4; }
.sn-talk-msg.cat{ align-self:flex-start; background:#1f2a24; border:1px solid rgba(158,255,196,.25); }
.sn-talk-msg.me{ align-self:flex-end; background:#ffdf5a; color:#111; font-weight:600; }
.sn-talk-msg.typing{ opacity:.6; font-style:italic; }
.sn-talk-form{ display:flex; gap:8px; }
.sn-talk-form input{ flex:1; border:2px solid rgba(255,255,255,.2); border-radius:999px; padding:12px 16px; background:#0c1410; color:#fff; font-size:15px; }
.sn-talk-form input:focus{ outline:none; border-color:#9effc4; }
@media(max-width:620px){ .sn-mod-parts{ gap:6px; } .mp-name{ font-size:10px; } }

/* ===== Symbolische Unterstützung (dezent) ===== */
.sn-support{ margin-top:14px; }
.sn-support-inner{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; background:rgba(255,255,255,.7); border:2px solid rgba(17,16,15,.12); border-radius:24px; padding:14px 16px; box-shadow:0 10px 30px rgba(20,10,0,.08); }
.sn-support-emoji{ font-size:34px; }
.sn-support-text{ flex:1; min-width:200px; }
.sn-support-text strong{ display:block; font-size:15px; }
.sn-support-text small{ display:block; font-size:12.5px; opacity:.72; line-height:1.4; margin-top:3px; }
.sn-support-btn{ white-space:nowrap; }
@media(max-width:620px){ .sn-support-inner{ gap:10px; } .sn-support-btn{ flex:1; text-align:center; } }

/* Schnurr-Geste beim Einzug */
.sn-cat-peek.purring{ animation:catPurr 1.6s ease-in-out 2; }
@keyframes catPurr{ 0%,100%{ transform:translateX(-50%) translateY(0) !important; } 25%{ transform:translateX(-50%) translateY(-3px) rotate(-1.5deg) !important; } 75%{ transform:translateX(-50%) translateY(2px) rotate(1.5deg) !important; } }

/* ════════ V24 — Lebende Katze: Feedback & Stimmung ════════ */
@keyframes snFloat{0%{opacity:0;transform:translateY(6px)}20%{opacity:1}100%{opacity:0;transform:translateY(-20px)}}
.stat{position:relative}
.stat.warn i b{background:#ff4d6d!important}
.stat.warn{animation:snWarn 1.5s ease-in-out infinite}
@keyframes snWarn{50%{filter:brightness(1.18)}}
/* Stimmungs-Reaktion der CSS-Katze (wenn 3D nicht aktiv) */
[data-css-cat]{transition:filter .4s ease,transform .25s ease}
[data-css-cat][data-mood="happy"]{filter:saturate(1.15) brightness(1.05)}
[data-css-cat][data-mood="hungry"]{filter:saturate(.85)}
[data-css-cat][data-mood="tired"]{filter:brightness(.92) saturate(.8)}
[data-css-cat][data-mood="tired"] .eye{height:8px!important;border-radius:6px}
[data-css-cat][data-mood="wary"] .ear{transform:rotate(-30deg)}
[data-css-cat][data-mood="wary"] .ear.right{transform:rotate(30deg)}

/* ════════ V24b — Raum-Items klickbar + Sound-Feedback ════════ */
button.room-slot{cursor:pointer;border:2px solid rgba(17,16,15,.14);transition:transform .12s ease,box-shadow .12s ease,background .2s ease;font-family:inherit}
button.room-slot:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 14px 28px rgba(20,10,0,.18);background:rgba(255,255,255,.95)}
button.room-slot:active{transform:translateY(1px) scale(.97)}
button.room-slot.tapped{animation:slotTap .5s ease}
@keyframes slotTap{0%{transform:scale(1)}40%{transform:scale(1.18);box-shadow:0 0 0 6px rgba(255,225,95,.4)}100%{transform:scale(1)}}
/* kleiner "echt passiert"-Funke, wenn man ein Item antippt */
.sn-spark{position:absolute;font-size:20px;pointer-events:none;animation:snFloat 1s ease forwards;z-index:8}

/* ════════ V24c — Hochwertiges Karten-Katzen-Icon + flüssige Bewegung ════════ */
.sn-cat-marker{background:none!important;border:none!important}
.sn-cat-pin{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:42px;height:42px;border-radius:50% 50% 50% 4px;
  background:linear-gradient(150deg,#ffe36b,#ff7fae);border:3px solid #111;
  box-shadow:0 6px 0 rgba(17,16,15,.22),0 10px 20px rgba(20,10,0,.3);
  display:grid;place-items:center;rotate:45deg;animation:snCatBob 1.1s ease-in-out infinite}
.sn-cat-emoji{rotate:-45deg;font-size:22px;line-height:1;filter:drop-shadow(0 1px 0 rgba(0,0,0,.25));transition:transform .25s ease}
.sn-cat-pulse{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);width:20px;height:20px;border-radius:50%;
  background:rgba(255,223,90,.55);animation:snCatPulse 1.6s ease-out infinite}
@keyframes snCatPulse{0%{box-shadow:0 0 0 0 rgba(255,223,90,.5);opacity:.9}100%{box-shadow:0 0 0 20px rgba(255,223,90,0);opacity:0}}
@keyframes snCatBob{50%{transform:translateX(-50%) translateY(-3px)}}

/* ════════ V24d — Kompakte Icon-Aktionsleiste + schöneres Soundboard ════════ */
/* Aktionen als kompakte Icon-Buttons (Icon groß, Label klein) — mobil platzsparend */
.sn-actions-icons{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
.sn-actions-icons .sn-action{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:64px;padding:8px 4px;border-radius:18px;font-weight:900}
.sn-actions-icons .sn-action .ai{font-size:26px;line-height:1}
.sn-actions-icons .sn-action small{font-size:11px;font-weight:850;opacity:.8}
.sn-actions-icons .sn-action.tapped{animation:slotTap .5s ease}
/* Schöneres Soundboard: mit Label, größere klare Emoji-Buttons */
.sn-soundboard{gap:8px;padding:8px 12px;align-items:center}
.sn-soundboard .sb-label{font-size:11px;font-weight:950;letter-spacing:.05em;opacity:.6;margin-right:2px;text-transform:uppercase}
.sn-soundboard button{width:42px;height:42px;font-size:20px;background:#fff;color:#111;border:2px solid #111;box-shadow:0 4px 0 rgba(17,16,15,.18);transition:transform .12s ease}
.sn-soundboard button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(17,16,15,.18)}
.sn-soundboard .sb-mod{background:linear-gradient(150deg,#b478ff,#7e4ae8)!important;color:#fff!important;border-color:#111!important;animation:sbModGlow 2.4s ease-in-out infinite}
@keyframes sbModGlow{50%{box-shadow:0 4px 0 rgba(17,16,15,.18),0 0 18px rgba(180,120,255,.7)}}
@media(max-width:620px){
  .sn-actions-icons{grid-template-columns:repeat(6,1fr);gap:5px}
  .sn-actions-icons .sn-action{min-height:58px;border-radius:14px;padding:6px 2px}
  .sn-actions-icons .sn-action .ai{font-size:23px}
  .sn-actions-icons .sn-action small{font-size:9.5px}
  .sn-soundboard .sb-label{display:none}
  .sn-soundboard button{width:38px;height:38px;font-size:18px}
}

/* ════════ V24e — EINE konsolidierte runde Aktionsleiste (Dock) ════════ */
.sn-dock{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;
  margin:14px auto 8px;padding:10px 14px;width:fit-content;max-width:100%;
  background:rgba(255,255,255,.9);border:2px solid rgba(17,16,15,.14);border-radius:999px;
  box-shadow:0 14px 38px rgba(20,10,0,.14);backdrop-filter:blur(10px)}
.sn-dock-group{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.sn-dock-sep{width:2px;height:34px;background:rgba(17,16,15,.12);border-radius:2px;margin:0 2px}
.sn-circle{width:52px;height:52px;border-radius:50%;border:2px solid #111;background:#fff;
  display:grid;place-items:center;cursor:pointer;font-size:24px;line-height:1;
  box-shadow:0 5px 0 rgba(17,16,15,.18);transition:transform .12s ease,box-shadow .12s ease,background .2s}
.sn-circle span{pointer-events:none}
.sn-circle:hover{transform:translateY(-3px);box-shadow:0 9px 0 rgba(17,16,15,.18)}
.sn-circle:active,.sn-circle.tapped{transform:translateY(3px) scale(.96);box-shadow:0 1px 0 rgba(17,16,15,.18)}
.sn-circle.tapped{animation:slotTap .5s ease}
.sn-circle.sc-mod{background:linear-gradient(150deg,#b478ff,#7e4ae8);color:#fff;border-color:#111;animation:sbModGlow 2.4s ease-in-out infinite}
/* Inventar IMMER sichtbar (auch mobil) */
.sn-side .sn-card:nth-child(2){display:block!important}
@media(max-width:1020px){
  /* Seitenleiste bleibt sichtbar, Inventar nie verstecken */
  .sn-side{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .sn-kitty-tivi{grid-column:1/-1}
}
@media(max-width:620px){
  .sn-dock{gap:7px;padding:8px 10px;border-radius:26px}
  .sn-dock-group{gap:6px}
  .sn-circle{width:46px;height:46px;font-size:21px}
  .sn-side{grid-template-columns:1fr}
}
/* alte Leisten neutralisieren falls noch Reste cachen */
.sn-soundboard{display:none!important}

/* ════════ V24f — Echter 3D-HDR-Hintergrund (Comic-Raum aus) ════════ */
/* Wenn die HDR-Szene aktiv ist, den gemalten CSS-Raum entfernen — die Three.js-
   Szene rendert Hintergrund+Licht selbst. Canvas füllt den Raum komplett. */
.sn-room.sn-room-3d{background:#0c0e14!important;box-shadow:0 22px 60px var(--shadow),inset 0 0 0 2px rgba(255,255,255,.06)}
.sn-room.sn-room-3d .sn-wall,
.sn-room.sn-room-3d .sn-floor{display:none!important}
.sn-room.sn-room-3d canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:30px}
/* Reaktions-Sprechblase über dem 3D-Bild gut lesbar halten */
.sn-room.sn-room-3d .sn-reaction{background:rgba(12,12,18,.78);color:#fff;border-color:rgba(255,255,255,.14)}

/* ════════ V24g — HDR-Umschalter ════════ */
#snHdrToggle{position:fixed;right:14px;bottom:14px;z-index:85;border:2px solid #111;border-radius:999px;
  background:rgba(255,255,255,.92);color:#111;padding:9px 14px;font:950 13px/1 "Helvetica Neue",Arial,sans-serif;
  letter-spacing:.02em;cursor:pointer;box-shadow:0 6px 0 rgba(17,16,15,.18);backdrop-filter:blur(8px);transition:transform .12s ease}
#snHdrToggle:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(17,16,15,.18)}
@media(max-width:620px){#snHdrToggle{bottom:auto;top:12px;right:12px;padding:7px 11px;font-size:12px}}

/* ════════ V24h — 3D-Raum FIX: HDR-Hintergrund füllt den ganzen Raum sichtbar ════════ */
.sn-room.sn-room-3d{background:#0c0e14!important;overflow:hidden}
.sn-room.sn-room-3d canvas{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;border-radius:30px;z-index:0!important}
/* Bühne (Katze-Slot) transparent lassen, damit das Canvas/der Raum dahinter sichtbar ist */
.sn-room.sn-room-3d .sn-stage{background:transparent!important}
/* Reaktions-Box über dem Raum schwebt */
.sn-room.sn-room-3d .sn-reaction{z-index:5}

/* ════════ V25 — Game-Layout: Tivi oben, Raum mitte, feste Aktionsleiste unten ════════ */
/* Kitty-Tivi ganz oben im Spiel (Anleitung immer sichtbar) */
.sn-tivi-top{margin:0 auto 14px;width:100%;max-width:none;position:sticky;top:8px;z-index:40}
.sn-tivi-top .tv-screen{min-height:auto}
/* Spielraum bekommt mehr Höhe (Bühne im Fokus) */
.sn-game-room{min-height:min(56vh,520px)}
/* FESTE Aktionsleiste unten — echte UI, scrollt nicht mit */
.sn-dock-fixed{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:90;margin:0;
  width:auto;max-width:96vw}
/* Platz unten, damit nichts hinter der festen Leiste verschwindet */
.sn-game{padding-bottom:96px}
/* Kunststück-Karte */
.sn-tricks{display:flex;flex-direction:column;gap:8px}
.sn-trick-row{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border-radius:14px;
  background:rgba(255,255,255,.6);border:1px solid rgba(17,16,15,.1);font-weight:850;font-size:13px}
.sn-trick-row button{border:2px solid #111;border-radius:999px;background:var(--yellow);font-weight:950;padding:7px 12px;cursor:pointer;box-shadow:0 4px 0 #111;font-size:12px}
.sn-trick-row.learned{background:rgba(133,245,209,.35)}
.sn-trick-row.learned button{background:#111;color:#fff}
/* Stat-Legende: erklärt wofür die Werte gut sind */
.sn-stat-legend{margin-top:10px;padding-top:9px;border-top:1px solid rgba(17,16,15,.1);font-size:11.5px;line-height:1.5;font-weight:700;color:rgba(17,16,15,.7)}
.sn-stat-legend b{font-weight:950;color:#111}
@media(max-width:620px){
  .sn-tivi-top{position:sticky;top:6px;margin-bottom:10px}
  .sn-game{padding-bottom:86px}
  .sn-dock-fixed{bottom:8px}
}

/* ════════ V25b — Exkursion: Karte ersetzt das Zimmer ════════ */
/* Während der Exkursion: Raum + Stats-Bühne aus, Karte groß an ihrer Stelle. */
html.expedition-active .sn-game-room{display:none!important}
html.expedition-active .sn-expedition[data-expedition-panel]{display:block!important;margin-top:0}
html.expedition-active .sn-realmap{min-height:min(56vh,520px)!important;border-radius:24px;overflow:hidden}
.sn-recall{width:100%;margin-top:10px}
/* Exkursions-Panel sitzt im Grid an Stelle des Raums */
html.expedition-active .sn-gamegrid{grid-template-columns:minmax(0,1fr) 340px}
@media(max-width:1020px){html.expedition-active .sn-gamegrid{grid-template-columns:1fr}}