/* ============================================================
   SCHNURRIA v82 — Clean Rebuild (Entry-Stage)
   Frische Klassen s-*  ·  KEINE sn-v72/73/80-Altlasten.
   Layout nach Skizze: Katze=Vollbild-Mittelpunkt, Stats oben links
   (nur Vertrauen aktiv), Item-Trichter rechts (ausfahrbar),
   untere Leiste IMMER sichtbar (Tipp-Ticker + Aktionen mit Bestand).
   Harte Regel: Aktionen IMMER im Viewport — Desktop UND Mobil.
   ============================================================ */

:root{
  --s-bg:#1d1712;
  --s-panel:rgba(28,20,14,.82);
  --s-cream:#fff7ef;
  --s-ink:#3a2a1e;
  --s-accent:#e8853a;
  --s-accent2:#7a5a3e;
  --s-good:#3aa05a;
  --s-bad:#b14b3a;
  --s-trust:#e8853a;
  --s-radius:18px;
  --s-dock-h:84px;
  --s-shadow:0 12px 40px rgba(0,0,0,.38);
  --s-safe-b:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  background:var(--s-bg);color:var(--s-cream);
  -webkit-font-smoothing:antialiased;overflow:hidden;
}

/* ---- Vollbild-Bühne: Katze/Raum füllt das Fenster ---- */
.s-stage-wrap{
  position:fixed;inset:0;
  display:flex;flex-direction:column;
  overflow:hidden;
}
.s-claim{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:12px 16px 18px;
  max-height:62vh;overflow:visible;
  background:linear-gradient(to bottom,rgba(12,8,5,.82),rgba(12,8,5,.5) 55%,rgba(12,8,5,0));
  pointer-events:none;
  /* erscheint erst nach kurzer Verzögerung — User-Auge zuerst zum Raum */
  opacity:0;transform:translateY(-8px);transition:opacity 1.1s ease,transform 1.1s ease;
}
.s-claim.s-show{opacity:1;transform:translateY(0)}
.s-claim small{display:block;font-size:.82rem;letter-spacing:.04em;opacity:.9;font-weight:600}
.s-claim h1{margin:.1em 0 .28em;font-size:clamp(1.15rem,4.2vw,1.95rem);line-height:1.05;font-weight:800}
/* Textmarker-Schwung: pink-gelber Highlight unter dem em-Teil (Auflockerung) */
.s-claim h1 em{
  font-style:italic;font-weight:600;color:#fff;position:relative;
  background:linear-gradient(120deg,transparent 0 6%,rgba(255,120,178,.78) 6% 94%,transparent 94%);
  background-repeat:no-repeat;background-position:0 78%;background-size:100% 46%;
  padding:0 .12em;border-radius:2px;
}
/* Fließtext unter dem Titel: lesbar auf hellem Raum durch dunklen Glas-Layer */
.s-claim p{
  margin:.2em 0 0;max-width:26em;
  font-size:clamp(.8rem,2.2vw,.92rem);line-height:1.38;color:#fff;
  display:inline-block;
  background:rgba(20,14,10,.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  padding:7px 11px;border-radius:12px;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}
.s-claim.tight p,.s-claim.tight{pointer-events:none}

/* 3D-Mount: füllt alles, Katze ist Mittelpunkt.
   WICHTIG: messbare Höhe erzwingen (sonst rendert WebGL ins Nichts = schwarz). */
.s-cat-canvas{position:absolute;inset:0;z-index:1;min-height:100%}
.s-cat-canvas.sn-room-3d{background:#15110c}     /* warmer Raumton statt knallschwarz */
.s-cat-canvas .sn-webgl-wrap{position:absolute;inset:0}
.s-cat-canvas canvas{display:block;width:100%!important;height:100%!important}
/* Ladehinweis bis die Katze da ist (verschwindet sobald Canvas drin) */
.s-cat-canvas:empty::after,
.s-cat-canvas:not(.sn-room-3d)::after{
  content:"🐾 Katze kommt …";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);color:rgba(255,247,239,.5);font-size:.9rem;
}

/* ---------- STATS oben links (nur Vertrauen aktiv) — kompakt ---------- */
.s-stats{
  position:absolute;left:12px;top:auto;bottom:calc(var(--s-dock-h) + 16px);z-index:6;
  width:min(40vw,168px);
  display:flex;flex-direction:column;gap:5px;
  padding:7px 9px;border-radius:12px;
  background:rgba(20,14,10,.40);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.07);
}
.s-stat{display:flex;flex-direction:column;gap:2px}
.s-stat-head{display:flex;justify-content:space-between;font-size:.64rem;font-weight:700;letter-spacing:.02em}
.s-stat-head b{color:var(--s-trust)}
.s-bar{height:7px;border-radius:5px;background:rgba(255,255,255,.13);overflow:hidden}
.s-bar i{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,#e8853a,#f0a85e);transition:width .5s ease}
/* die noch-nicht-aktiven Stats: transparent angedeutet = "es gibt noch mehr" */
.s-stat.dim{opacity:.34;filter:saturate(.4)}
.s-stat.dim .s-stat-head b{color:rgba(255,255,255,.5)}
.s-stat.dim .s-bar i{background:rgba(255,255,255,.28)}
.s-stats-more{font-size:.56rem;opacity:.5;text-align:center;margin-top:1px;letter-spacing:.03em;line-height:1.15}

/* ---------- ITEM-TRICHTER rechts (ausfahrbar, Apple-Stil) ---------- */
.s-funnel{
  position:absolute;right:0;top:18%;bottom:calc(var(--s-dock-h) + 14px);z-index:7;
  width:30px;display:flex;align-items:center;justify-content:flex-end;
  cursor:pointer;transition:width .28s cubic-bezier(.22,1,.36,1);
}
/* sichtbare Lasche, die rausguckt + Hinweis "hier antippen" */
.s-funnel-hint{
  position:relative;
  width:22px;height:64px;border-radius:12px 0 0 12px;
  background:linear-gradient(to left,var(--s-accent),#f0a85e);
  box-shadow:-3px 0 14px rgba(232,133,58,.5);
  display:flex;align-items:center;justify-content:center;
  animation:s-lasche 1.8s ease-in-out infinite;
}
.s-funnel-hint::before{content:"🐾";font-size:1rem}
.s-funnel-hint::after{
  content:"Sachen ›";position:absolute;right:26px;top:50%;transform:translateY(-50%);
  white-space:nowrap;font-size:.66rem;font-weight:700;color:#fff;
  background:rgba(20,14,10,.7);padding:3px 8px;border-radius:10px;
  pointer-events:none;
}
@keyframes s-lasche{0%,100%{transform:translateX(0)}50%{transform:translateX(-4px)}}
.s-funnel.open .s-funnel-hint::after{opacity:0}
/* ---------- RONDELL: Halbkreis, der nach links ausfährt ---------- */
/* Pivot liegt rechts außerhalb des Bildschirms → Items sitzen auf einem Bogen,
   das waagerechte (3-Uhr-)Element ragt am weitesten nach links in den Raum. */
.s-rondell{
  position:absolute;
  right:-340px;                 /* eingefahren: ganz raus */
  top:50%;
  width:300px;height:300px;     /* Bogenradius-Box */
  transform:translateY(-50%);
  transition:right .34s cubic-bezier(.22,1,.36,1);
  touch-action:none;            /* eigenes Drehen, kein Scrollen */
  pointer-events:none;          /* nur die Items fangen Klicks */
}
.s-funnel.open{width:300px}
.s-funnel.open .s-rondell{right:-150px}  /* ausgefahren: Bogenmitte am Rand */
.s-funnel.open .s-funnel-hint{opacity:0}

.s-item{
  position:absolute;
  left:50%;top:50%;
  width:62px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:8px 4px;border-radius:16px;cursor:grab;
  background:rgba(255,247,239,.12);border:1px solid rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  pointer-events:auto;
  /* Position + Skalierung setzt das JS via CSS-Variablen (Trichter-Effekt) */
  transform:translate(-50%,-50%)
            translate(var(--rx,0px),var(--ry,0px))
            scale(var(--rs,1));
  opacity:var(--ro,1);
  transition:transform .12s linear,opacity .12s linear,background .2s;
  z-index:var(--rz,1);
}
.s-item:active{cursor:grabbing}
.s-item .ico{font-size:1.7rem;line-height:1}
.s-item small{font-size:.58rem;opacity:.85;text-align:center;white-space:nowrap}
/* bereits platziert: halbtransparent + nicht mehr auslösbar */
.s-item.s-placed{opacity:.32 !important;pointer-events:none;filter:grayscale(.55);cursor:default}
.s-item.s-placed::after{content:"✓";position:absolute;top:2px;right:8px;color:#7fe39a;font-weight:800;font-size:.7rem}

/* ---------- PLÜSCHBERTS SEIFENBLASEN (Vorfreude-Ansprache) ---------- */
#pbBubbleField{pointer-events:none}
.pb-soap{
  position:relative;
  /* ECHTE runde Seifenblase: gleiche Breite/Höhe, Vollkreis */
  width:200px;height:200px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;padding:24px;
  /* schimmernder, irisierender Seifenhaut-Look */
  background:
    radial-gradient(120% 120% at 30% 24%, rgba(255,255,255,.9), rgba(255,255,255,0) 34%),
    radial-gradient(50% 50% at 76% 78%, rgba(170,235,255,.55), rgba(170,235,255,0) 60%),
    conic-gradient(from 200deg at 50% 50%,
      rgba(255,182,193,.40), rgba(173,216,230,.40), rgba(221,160,221,.40),
      rgba(176,255,224,.40), rgba(255,236,179,.40), rgba(255,182,193,.40));
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    0 6px 24px rgba(80,120,160,.30),
    inset 0 0 26px rgba(255,255,255,.55),
    inset 10px -12px 30px rgba(150,210,255,.38),
    inset -12px 10px 26px rgba(255,190,220,.32);
  -webkit-backdrop-filter:blur(3px) saturate(1.3);
          backdrop-filter:blur(3px) saturate(1.3);
  background-size:200% 200%;
  /* Start klein/unsichtbar → pb-in lässt sie wachsen */
  transform:scale(.2);opacity:0;
  transition:transform .5s cubic-bezier(.34,1.56,.64,1),opacity .4s ease;
  /* nur Schimmer solange sie noch nicht „lebt" */
  animation:pb-shimmer 4.5s ease-in-out infinite;
  will-change:transform;
}
/* eingeblendet → SEIFENBLASEN-BEWEGUNG: schweben/steigen, driften, wobbeln.
   transition aus, damit die Float-Animation die Transform voll kontrolliert. */
.pb-soap.pb-in{
  opacity:1;transition:opacity .4s ease;
  animation:pb-shimmer 4.5s ease-in-out infinite, pb-float 6s ease-in-out infinite;
}
.pb-soap.pb-pop{ animation:pb-burst .42s ease-out forwards; }
.pb-soap-txt{
  display:block;text-align:center;
  font:700 .82rem/1.28 system-ui;
  color:#243a4d;
  /* leicht konvexe Schrift: heller Oberlicht-Schein + weicher Tiefenschatten */
  text-shadow:0 1px 0 rgba(255,255,255,.9), 0 -1px 1px rgba(120,160,190,.5), 0 2px 3px rgba(60,100,140,.25);
  letter-spacing:.2px;
}
@keyframes pb-shimmer{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}
/* echtes Seifenblasen-Schweben: leichtes Steigen, seitliches Driften,
   minimales Stauchen/Wobbeln (wie schwingende Seifenhaut) */
@keyframes pb-float{
  0%  {transform:translate(0,0) scale(1,1)}
  20% {transform:translate(6px,-10px) scale(1.015,.985)}
  40% {transform:translate(-5px,-18px) scale(.985,1.015)}
  60% {transform:translate(7px,-12px) scale(1.02,.98)}
  80% {transform:translate(-4px,-6px) scale(.99,1.01)}
  100%{transform:translate(0,0) scale(1,1)}
}
@keyframes pb-burst{
  0%{transform:scale(1);opacity:1;filter:blur(0)}
  40%{transform:scale(1.18);opacity:.9}
  100%{transform:scale(1.5);opacity:0;filter:blur(2px)}
}
@media(max-width:560px){
  .pb-soap{width:168px;height:168px;padding:20px}
  .pb-soap-txt{font-size:.74rem;line-height:1.24}
}

/* ---------- UNTERE LEISTE: IMMER DA (Tipp-Ticker + Aktionen) ---------- */
.s-dock{
  position:absolute;left:0;right:0;bottom:0;z-index:8;
  min-height:var(--s-dock-h);
  display:flex;align-items:center;gap:10px;
  padding:10px 12px calc(10px + var(--s-safe-b));
  background:linear-gradient(to top,rgba(12,8,5,.92),rgba(12,8,5,.55) 70%,transparent);
}
/* TV / Tipp-Ticker links — fix */
.s-tv{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;
  max-width:38vw;
}
.s-tv-box{
  width:46px;height:40px;border-radius:9px;flex:0 0 auto;
  background:#2a1d13;border:2px solid #4a3422;
  display:flex;align-items:center;justify-content:center;
  position:relative;font-size:0;            /* kein Emoji-Text -> kein Doppel-TV */
  overflow:visible;
}
/* CSS-Bildschirm (grün leuchtend) statt Emoji */
.s-tv-box::after{
  content:"";position:absolute;inset:7px 6px;border-radius:4px;
  background:radial-gradient(circle at 40% 35%,#7fe39a,#2a8c5a 70%,#175c3a);
  box-shadow:inset 0 0 6px rgba(0,0,0,.4);font-size:0;
}
/* zwei Antennen oben */
.s-tv-box::before{
  content:"";position:absolute;top:-9px;left:50%;width:14px;height:9px;
  transform:translateX(-50%);
  background:
    linear-gradient(#4a3422,#4a3422) 3px 0/2px 9px no-repeat,
    linear-gradient(#4a3422,#4a3422) 9px 0/2px 9px no-repeat;
}
.s-tv-text{
  font-size:.74rem;line-height:1.18;opacity:.95;
  max-width:24vw;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.s-tv-label{font-size:.58rem;letter-spacing:.08em;color:var(--s-accent);font-weight:800;display:block}

/* Aktions-Reihe: 4 Kern fix sichtbar, Rest horizontal scrollbar.
   touch-action:pan-x → nur horizontal wischen, kein vertikales "Schwimmen". */
.s-actions{
  flex:1 1 auto;display:flex;align-items:center;gap:10px;
  overflow-x:auto;overflow-y:hidden;
  padding:4px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  touch-action:pan-x;
}
.s-actions::-webkit-scrollbar{display:none}
/* Apple Liquid-Glass (verfeinert): echtes Glas mit Tiefe, weichem Rand,
   doppeltem inneren Schein und sanftem Spekular-Highlight. */
.s-act{
  position:relative;flex:0 0 auto;scroll-snap-align:start;
  width:54px;height:54px;border-radius:50%;cursor:pointer;border:0;
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.22), rgba(255,255,255,.06) 46%, rgba(255,255,255,.02) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(1.6) brightness(1.05);
          backdrop-filter:blur(16px) saturate(1.6) brightness(1.05);
  box-shadow:
    0 6px 18px rgba(0,0,0,.30),
    inset 0 1px 1.5px rgba(255,255,255,.7),
    inset 0 -6px 12px rgba(255,255,255,.06),
    inset 0 0 0 .5px rgba(255,255,255,.25);
  display:flex;align-items:center;justify-content:center;font-size:1.42rem;
  transition:transform .16s cubic-bezier(.3,1.4,.5,1),box-shadow .2s;
}
/* feiner Glanz oben (specular) + weicher unterer Rand */
.s-act::before{
  content:"";position:absolute;inset:1px;border-radius:50%;pointer-events:none;
  background:
    radial-gradient(70% 40% at 50% 12%, rgba(255,255,255,.55), transparent 70%);
}
.s-act::after{
  content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;
  box-shadow:inset 0 -3px 8px rgba(120,80,40,.10);
}
.s-act:active{transform:scale(.88)}
.s-act.sec{width:54px;height:54px;font-size:1.42rem}
/* Ansprechen: dunkles, edles Glas */
.s-act-speak{
  background:
    radial-gradient(120% 120% at 30% 22%, rgba(80,60,44,.55), rgba(28,20,13,.55) 60%);
  box-shadow:
    0 6px 18px rgba(0,0,0,.42),
    inset 0 1px 1.5px rgba(255,255,255,.30),
    inset 0 0 0 .5px rgba(255,255,255,.14);
}
.s-act-speak::before{background:radial-gradient(70% 40% at 50% 12%, rgba(255,255,255,.28), transparent 70%)}
/* Bestands-Badge oben rechts am Icon */
.s-act .s-badge{
  position:absolute;top:-3px;right:-3px;min-width:19px;height:19px;padding:0 4px;
  border-radius:11px;background:var(--s-accent);color:#fff;
  font-size:.64rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  border:2px solid #1d1712;
}
.s-act .s-label{
  position:absolute;bottom:-15px;left:50%;transform:translateX(-50%);
  font-size:.56rem;white-space:nowrap;opacity:.8;color:#fff7ef;
}

/* ---------- Reaktions-Bubble (Katze antwortet sichtbar) ---------- */
.s-reaction{
  position:absolute;left:50%;top:62%;transform:translateX(-50%);
  z-index:6;max-width:74vw;text-align:center;
  padding:9px 16px;border-radius:16px;
  background:rgba(255,247,239,.94);color:var(--s-ink);
  font-size:.92rem;font-weight:600;box-shadow:var(--s-shadow);
  opacity:0;pointer-events:none;transition:opacity .35s,transform .35s;
}
.s-reaction.show{opacity:1;transform:translateX(-50%) translateY(-6px)}

/* ---------- Toast (Vertrauen +/-) ---------- */
.s-toast{
  position:fixed;left:50%;bottom:calc(var(--s-dock-h) + 18px);transform:translateX(-50%);
  z-index:20;padding:8px 16px;border-radius:20px;
  background:rgba(20,14,10,.92);color:#fff;font-weight:700;font-size:.86rem;
  opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
}
.s-toast.show{opacity:1;transform:translateX(-50%) translateY(-4px)}

/* fliegendes Item-Emoji bei Aktion */
.s-fly{position:fixed;z-index:30;font-size:1.8rem;pointer-events:none;
  animation:s-fly 1s ease forwards}
@keyframes s-fly{0%{opacity:0;transform:translateY(20px) scale(.6)}
  25%{opacity:1}100%{opacity:0;transform:translateY(-120px) scale(1.3)}}

/* ---------- Namebox (Einzug bei 100% Vertrauen) ---------- */
.s-namebox{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:12;width:min(88vw,360px);text-align:center;
  padding:22px;border-radius:var(--s-radius);
  background:var(--s-cream);color:var(--s-ink);box-shadow:var(--s-shadow);
}
.s-namebox[hidden]{display:none}
.s-namebox strong{display:block;font-size:1.1rem;margin-bottom:12px}
.s-namebox input{width:100%;padding:11px;border:2px solid #e0c9b2;border-radius:12px;font-size:1.05rem;margin-bottom:12px}
.s-btn{
  display:inline-block;padding:11px 20px;border:0;border-radius:14px;
  background:var(--s-accent);color:#fff;font-weight:800;cursor:pointer;font-size:1rem;
}
.s-btn.alt{background:var(--s-accent2)}

/* ---------- MOBIL: Aktionen bleiben IMMER im Viewport ---------- */
@media (max-width:560px){
  :root{--s-dock-h:78px}
  .s-stats{width:min(46vw,150px);padding:6px 8px;bottom:calc(var(--s-dock-h) + 12px)}
  /* Claim darf höher werden, Text NICHT abschneiden */
  .s-claim{padding-bottom:18px;max-height:58vh}
  .s-claim h1{font-size:clamp(1.05rem,5.2vw,1.6rem)}
  .s-claim p{font-size:.82rem;line-height:1.32;max-width:90vw}
  .s-act{width:48px;height:48px;font-size:1.25rem}
  .s-act.sec{width:42px;height:42px}
  /* TV-Text auch auf Mobil sichtbar (kompakt) */
  .s-tv{max-width:40vw}
  .s-tv-text{font-size:.62rem;max-width:32vw;-webkit-line-clamp:2}
  .s-tv-box{width:38px;height:32px}
  .s-reaction{top:56%;font-size:.86rem}
}
/* sehr niedrige Höhe (Landscape Handy): Claim schrumpft, Dock bleibt */
@media (max-height:480px){
  .s-claim h1{font-size:1.2rem}.s-claim p{display:none}
}

/* ---------- DRECKIGER BODEN (Schweinerei) — 2D-Overlay bis GLB kommt ---------- */
.s-mess{
  position:absolute;z-index:4;pointer-events:none;
  left:50%;bottom:calc(var(--s-dock-h) + 6%);transform:translateX(-50%);
  display:flex;gap:6px;opacity:0;transition:opacity .4s;
}
.s-mess.show{opacity:1}
.s-mess span{
  font-size:2.1rem;filter:drop-shadow(0 2px 3px rgba(0,0,0,.4));
  animation:s-mess-in .5s ease both;
}
@keyframes s-mess-in{from{transform:scale(.3) translateY(10px);opacity:0}to{transform:scale(1);opacity:1}}

/* Putzen-Aktion blinkt zur Aufforderung */
.s-act.s-need{animation:s-need 1s ease-in-out infinite}
@keyframes s-need{0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.32)}
  50%{box-shadow:0 0 0 4px rgba(232,133,58,.6),0 4px 16px rgba(232,133,58,.5)}}
.s-act.s-hidden{display:none}

/* ---------- TIVI-FULL-LAYER (übernimmt kurz die Spielfläche) ---------- */
.s-tivi-full{
  position:fixed;inset:0;z-index:40;display:none;
  align-items:center;justify-content:center;
  background:rgba(10,7,4,.86);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);
}
.s-tivi-full.show{display:flex;animation:s-tv-on .35s ease}
@keyframes s-tv-on{from{opacity:0}to{opacity:1}}
.s-tivi-screen{
  width:min(90vw,520px);border-radius:18px;overflow:hidden;
  background:#16100a;border:3px solid #4a3422;box-shadow:0 24px 70px rgba(0,0,0,.6);
  transform:scale(.6);animation:s-tv-pop .45s cubic-bezier(.2,1.3,.4,1) forwards;
}
@keyframes s-tv-pop{to{transform:scale(1)}}
.s-tivi-bar{
  display:flex;align-items:center;gap:8px;padding:8px 14px;
  background:#2a1d13;font-size:.7rem;letter-spacing:.1em;font-weight:800;color:var(--s-accent);
}
.s-tivi-bar .dot{width:8px;height:8px;border-radius:50%;background:#e0413a;animation:s-blink 1s infinite}
@keyframes s-blink{50%{opacity:.3}}
.s-tivi-body{padding:26px 22px 22px;text-align:center;color:var(--s-cream)}
.s-tivi-body .big{font-size:2.6rem;display:block;margin-bottom:8px}
.s-tivi-body h3{margin:.2em 0;font-size:1.25rem}
.s-tivi-body p{margin:.4em 0 0;font-size:.95rem;line-height:1.4;opacity:.92}
.s-tivi-body .s-btn{margin-top:16px}
/* scanline-flimmern fürs TV-Gefühl */
.s-tivi-screen::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);
}

/* Einzug-Erfolg confetti-frei, ruhig */
.s-tivi-full.win .s-tivi-bar{color:#7fe39a}
.s-tivi-full.win .s-tivi-bar .dot{background:#3aa05a}

/* =====================================================================
   WERBEPHASE „Werde gemocht" — REDUKTION = HIGHLIGHT, NICHT AUSBLENDEN.
   Die alte UI bleibt KOMPLETT da. Solange die Katze noch nicht eingezogen
   ist (html OHNE .game-live), werden nur die WICHTIGEN Sachen geführt:
   die 4 Kern-Handlungen pulsieren sanft, das Item-Rondell ist leicht
   gedimmt (da, aber nicht betont — Katze zuerst, Items später).
   Beim Einzug setzt renderGame() html.game-live → alles wieder voll normal.
   Nichts wird gelöscht oder in der Logik angefasst — nur Betonung.
   ===================================================================== */

/* Item-Rondell am Anfang dezent (da, aber nicht im Fokus) */
html:not(.game-live) #sFunnel{opacity:.4;filter:saturate(.7);transition:opacity .4s,filter .4s}
html:not(.game-live) #sFunnel:hover,
html:not(.game-live) #sFunnel:focus-within{opacity:1;filter:none}

/* Die 4 Kern-Handlungen sanft pulsieren → Blick wird geführt.
   (Nur die nicht-sekundären Buttons; .sec bleibt unangetastet.) */
@keyframes sCorePulse{
  0%,100%{box-shadow:0 0 0 0 rgba(232,133,46,0)}
  50%    {box-shadow:0 0 0 6px rgba(232,133,46,.28)}
}
html:not(.game-live) .sn-intro-actions .s-act:not(.sec){
  animation:sCorePulse 2.6s ease-in-out infinite;
  border-radius:16px;
}
@media (prefers-reduced-motion:reduce){
  html:not(.game-live) .sn-intro-actions .s-act:not(.sec){animation:none}
}
/* Mute-Knopf bleibt von Anfang an nutzbar (Stimme aus/an). */

/* Hervorgehobenes Item für die erste Aufgabe (Spielzeug finden/aktivieren) */
.s-item.s-task-hi{
  animation:sCorePulse 2.2s ease-in-out infinite;
  outline:2px solid rgba(232,133,46,.6); outline-offset:2px; border-radius:14px;
}

/* =====================================================================
   WIDMUNG — schwarze Seite, nur beim allerersten Start, einmal.
   Kleiner Text mittig, drumherum ein ganz dünnes, minimales Dreieck,
   das sich langsam zeichnet. Danach sanft ausblenden.
   ===================================================================== */
.sn-dedication{
  position:fixed; inset:0; z-index:9999; background:#000;
  display:flex; align-items:center; justify-content:center;
  opacity:1; transition:opacity 1.1s ease;
}
.sn-dedication.sn-ded-out{opacity:0; pointer-events:none}
.sn-ded-text{
  position:relative; z-index:2;
  font:300 .92rem/1.6 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:.18em; color:rgba(255,255,255,.82);
  text-transform:none; text-align:center;
  opacity:0; animation:snDedTextIn 2.2s ease 1.1s forwards;
}
.sn-ded-tri{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-46%);
  width:min(54vw,260px); aspect-ratio:200/174; pointer-events:none;
}
.sn-ded-tri svg{width:100%; height:100%; display:block; overflow:visible}
.sn-ded-tri polygon{
  fill:none; stroke:rgba(255,255,255,.55); stroke-width:.6;
  stroke-linejoin:round; vector-effect:non-scaling-stroke;
  stroke-dasharray:520; stroke-dashoffset:520;
  animation:snDedTriDraw 3.2s ease forwards .2s;
}
@keyframes snDedTextIn{from{opacity:0}to{opacity:1}}
@keyframes snDedTriDraw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){
  .sn-ded-text{animation:none; opacity:1}
  .sn-ded-tri polygon{animation:none; stroke-dashoffset:0}
}

/* =====================================================================
   VOLLBILD / VOLLHÖHE — nutzt die echte Bildschirmhöhe (dvh), damit die
   Browser-Leiste auf dem Handy nicht stört. Im Web-App-Modus (Home-Bildschirm)
   ist sie ganz weg. Plus saubere Querformat-Anpassung (Tochters Wunsch).
   ===================================================================== */
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
.s-stage-wrap, .sn-intro, #introStage {
  height: 100dvh;            /* dynamische Viewport-Höhe (Leiste minimiert) */
  min-height: 100dvh;
}
/* sichere Ränder bei Notch (oben/unten) */
body { padding: env(safe-area-inset-top,0) 0 env(safe-area-inset-bottom,0); }

/* QUERFORMAT (Landscape): UI kompakter, damit alles passt */
@media (orientation: landscape) and (max-height: 560px) {
  .s-claim { padding: 6px 14px 8px; }
  .s-claim h1 { font-size: 1.15rem; line-height: 1.15; }
  .s-claim small { font-size: .72rem; }
  .s-claim p { font-size: .8rem; margin-top: 2px; }
  .s-stats { transform: scale(.85); transform-origin: top left; }
  .s-dock { padding-top: 4px; }
  .s-act .s-label { font-size: .62rem; }
  /* Reaktions-Bubble nicht zu breit im Querformat */
  .s-reaction { max-width: 60vw; }
}