/* Schriften lokal (SIL Open Font License, siehe fonts/OFL-*.txt) – keine Anfragen an Google */
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/vt323-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'VT323'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/vt323-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/patrickhand-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Patrick Hand'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/patrickhand-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; height: 100%; background: #05040a; overflow: hidden; }
body { font-family: 'VT323', ui-monospace, monospace; color: #e9e4ff; -webkit-font-smoothing: antialiased; }

#game {
  position: absolute; left: 0; top: 0; width: 960px; height: 600px;
  transform-origin: 0 0; background: #000; overflow: hidden;
  user-select: none; -webkit-user-select: none;
  box-shadow: 0 0 80px rgba(120, 90, 255, .15);
}

/* ------------------------------------------------------------ Bühne */
#stage { position: absolute; left: 0; top: 0; width: 960px; height: 420px; overflow: hidden; cursor: crosshair; }
#bg, #bg > svg { position: absolute; left: 0; top: 0; width: 960px; height: 420px; display: block; }
#hotspots { position: absolute; inset: 0; z-index: 2; }
.hs { position: absolute; cursor: pointer; }
body.show-hs .hs { outline: 1px dashed rgba(255, 209, 102, .85); background: rgba(255, 209, 102, .08); }
body.busy #stage, body.busy .hs { cursor: default; }

/* Kira-Sprite (SVG aus js/kira.js, viewBox 0 0 120 224 → Pivots in SVG-Einheiten) */
#kira, .companion { position: absolute; left: 0; top: 0; width: 92px; height: 171px; transform-origin: 46px 170px; pointer-events: none; z-index: 3; }
#kira svg { display: block; overflow: visible; }
/* Ansichten: v-front / v-side / v-back (Profil wird für "nach links" gespiegelt) */
#kira .view-side, #kira .view-back { display: none; }
#kira.v-side .view-front, #kira.v-back .view-front { display: none; }
#kira.v-side .view-side, #kira.v-back .view-back { display: inline; }
#kira.faceL .view-side { transform: translate(120px, 0) scale(-1, 1); }
/* vorne / hinten: Beine heben sich abwechselnd, Arme pendeln leicht */
#kira .legL { transform-origin: 51px 122px; }
#kira .legR { transform-origin: 69px 122px; }
#kira .armL { transform-origin: 42px 67px; }
#kira .armR { transform-origin: 78px 67px; }
#kira.walking .legL { animation: march .48s ease-in-out infinite; }
#kira.walking .legR { animation: march .48s ease-in-out infinite; animation-delay: -.24s; }
#kira.walking .view-front .armL, #kira.walking .view-back .armR { animation: swingS .48s ease-in-out infinite; }
#kira.walking .view-back .armL { animation: swingS .48s ease-in-out infinite; animation-delay: -.24s; }
@keyframes march { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-4px) scaleY(.98); } 50% { transform: translateY(0); } }
@keyframes swingS { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
/* Profil: Beine und Arme schwingen um Hüfte bzw. Schulter */
#kira .legN, #kira .legF { transform-origin: 60px 122px; }
#kira .armN, #kira .armF { transform-origin: 60px 67px; }
#kira.walking .legN { animation: stride .48s ease-in-out infinite; }
#kira.walking .legF { animation: stride .48s ease-in-out infinite; animation-delay: -.24s; }
/* Knie: Unterschenkel beugt sich in der Schwungphase (Bein schwingt von hinten nach vorne) */
#kira .shin { transform-origin: 59.25px 168px; }
#kira.walking .legN .shin { animation: knee .48s linear infinite; }
#kira.walking .legF .shin { animation: knee .48s linear infinite; animation-delay: -.24s; }
@keyframes knee { 0% { transform: rotate(0deg); } 30% { transform: rotate(6deg); } 50% { transform: rotate(14deg); } 70% { transform: rotate(48deg); } 88% { transform: rotate(12deg); } 100% { transform: rotate(0deg); } }
#kira.walking .armN { animation: armSwing .48s ease-in-out infinite; animation-delay: -.24s; }
#kira.walking .armF { animation: armSwing .48s ease-in-out infinite; }
@keyframes stride { 0%, 100% { transform: rotate(-19deg); } 50% { transform: rotate(19deg); } }
@keyframes armSwing { 0%, 100% { transform: rotate(-16deg); } 50% { transform: rotate(16deg); } }
#kira.walking .upper { animation: bob .24s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-2.5px); } }
#kira .eyes { transition: transform .15s; transform: translateX(1.2px); }
#kira.faceL .eyes { transform: translateX(-1.2px); }
#kira .eye, .wd-preview .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.3s infinite; }
@keyframes blink { 0%, 94%, 100% { transform: scaleY(1); } 96.5% { transform: scaleY(.1); } }
.mo { opacity: 0; }
#kira.talking .mo, .companion.talking .mo, #bg .npc.talking .mo { animation: talk .26s steps(1) infinite; }
@keyframes talk { 0% { opacity: 1; } 50% { opacity: 0; } }

.speech {
  position: absolute; z-index: 10; transform: translate(-50%, -100%);
  width: max-content; max-width: 440px; text-align: center;
  font-size: 25px; line-height: 1.02; pointer-events: none;
  --o: 2px; --on: -2px;
  text-shadow: var(--o) 0 #000, var(--on) 0 #000, 0 var(--o) #000, 0 var(--on) #000, var(--o) var(--o) #000, var(--on) var(--on) #000, var(--o) var(--on) #000, var(--on) var(--o) #000;
}
.speech.kira { color: #ffb3e1; }
.speech.bernd { color: #9fd3ff; }
.speech.moe { color: #5ef2d0; letter-spacing: .5px; }
.speech.narr { color: #fff3b8; }
.speech.guenther { color: #ffd27a; }
.speech.rumba { color: #b0f0ff; font-style: italic; }
.speech.leon { color: #ff9e5e; }
.speech.cat { color: #ffc07a; }
.speech.yuki { color: #ff9fbf; }
.speech.tanaka { color: #9fe8ff; }
.speech.skoell { color: #d8e2ff; letter-spacing: .5px; }
.speech.sven { color: #ffc27a; }
.speech.wolf { color: #9fb0ff; }
.speech.klammer { color: #c8d8f0; font-style: italic; }
.speech.chef { color: #e0cfa8; }

#roomTitle {
  position: absolute; left: 16px; top: 10px; z-index: 6; font-size: 22px; color: #c7b8ff;
  opacity: 0; pointer-events: none; text-shadow: 0 0 6px #000, 0 0 2px #000;
}
#roomTitle.show { animation: roomTitle 3.2s ease forwards; }
@keyframes roomTitle { 0% { opacity: 0; transform: translateY(-4px); } 12%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

#fade { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .4s; z-index: 20; }
#fade.on { opacity: 1; }

/* ------------------------------------------------------------ Bedienleiste */
#ui {
  position: absolute; left: 0; top: 420px; width: 960px; height: 180px;
  background: linear-gradient(#120e22, #0b0916); border-top: 2px solid #2d2450;
}
#sentence { height: 32px; line-height: 32px; text-align: center; color: #9d8fd9; font-size: 24px; }
#sentence b { color: #e9e4ff; font-weight: normal; }
#verbs {
  position: absolute; left: 16px; top: 38px; width: 370px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px 6px;
}
.verb { font-size: 28px; color: #7a6bb0; padding: 4px 6px; cursor: pointer; border-radius: 3px; }
.verb:hover { color: #d6ccff; background: rgba(255, 255, 255, .03); }
.verb.active { color: #ffd166; }
.verb.menu { color: #4d4475; }
.verb.menu:hover { color: #9d8fd9; }
#inventory {
  position: absolute; left: 404px; top: 38px; width: 540px; height: 132px;
  display: grid; grid-template-columns: repeat(8, 64px); grid-auto-rows: 64px; gap: 4px;
}
.slot { background: #19142d; border: 1px solid #2a2248; border-radius: 4px; display: flex; align-items: center; justify-content: center; }
.slot[data-id] { cursor: pointer; }
.slot[data-id]:hover { border-color: #6b5bb5; }
.slot.sel { border-color: #ffd166; background: #2a2140; }
.slot svg { width: 52px; height: 52px; }
.slot.new { animation: newItem 1s ease; }
@keyframes newItem { 0% { box-shadow: 0 0 0 0 #ffd166; transform: scale(1.15); } 100% { box-shadow: 0 0 0 10px transparent; transform: none; } }

#dialog { position: absolute; left: 16px; right: 16px; top: 34px; bottom: 8px; overflow-y: auto; background: #0e0b1a; }
#ui.in-dialog #verbs, #ui.in-dialog #inventory { visibility: hidden; }
.opt { font-size: 25px; color: #b4a6f5; cursor: pointer; padding: 1px 6px; }
.opt:hover { color: #ffd166; }
.opt.seen { color: #6d61a3; }

/* ------------------------------------------------------------ Grafik-Animationen */
.led-blink { animation: led 1.1s steps(2) infinite; }
.led-blink.f { animation-duration: .55s; }
.led-blink.d1 { animation-delay: -.3s; }
.led-blink.d2 { animation-delay: -.6s; }
.led-blink.d3 { animation-delay: -.85s; }
.blink-slow { animation: led 2.2s steps(2) infinite; }
@keyframes led { 0% { opacity: 1; } 50% { opacity: .15; } }
.zzz text { animation: zz 3s ease-in-out infinite; opacity: 0; }
.zzz text:nth-child(2) { animation-delay: 1s; }
.zzz text:nth-child(3) { animation-delay: 2s; }
@keyframes zz { 0% { opacity: 0; transform: translate(0, 6px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(8px, -10px); } }
.spin { transform-box: fill-box; transform-origin: center; animation: spin .35s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ribbon { transform-box: fill-box; transform-origin: top center; animation: sway .6s ease-in-out infinite alternate; }
@keyframes sway { from { transform: rotate(-14deg); } to { transform: rotate(16deg); } }
.blob1 { animation: blob 5s ease-in-out infinite alternate; }
.blob2 { animation: blob 4s ease-in-out infinite alternate-reverse; }
@keyframes blob { from { transform: translateY(8px); } to { transform: translateY(-14px); } }
.boot { opacity: 0; animation: appear .05s forwards; }
@keyframes appear { to { opacity: 1; } }
.fall { transform-box: fill-box; transform-origin: center; animation: fall .55s cubic-bezier(.5, 0, 1, 1) forwards; }
@keyframes fall { to { transform: translate(-4px, 280px) rotate(28deg); } }
.ss { animation: ss 6s ease-in-out infinite alternate; }
@keyframes ss { from { transform: translate(-14px, -10px); } to { transform: translate(14px, 10px); } }

/* ------------------------------------------------------------ Overlays */
.overlay {
  position: absolute; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(20, 12, 40, .78), rgba(4, 3, 10, .94));
}
.title-inner { text-align: center; padding: 0 40px; }
/* Animierter Titel (js/title.js): Büro bei Nacht hinter dem Menü */
#titleScene { position: absolute; inset: 0; overflow: hidden; }
#title .title-inner { position: relative; }
.ts-world { position: absolute; left: 0; top: 0; width: 960px; height: 420px; transform-origin: 0 0; transform: translate(-40px, 34px) scale(1.15); }
.ts-bg { position: absolute; left: 0; top: 0; width: 960px; height: 420px; filter: brightness(.66) saturate(.9); }
.ts-bg svg { display: block; width: 960px; height: 420px; }
#titleScene .companion { filter: brightness(.68); }
.ts-veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8, 6, 16, 0) 0, rgba(8, 6, 16, .25) 34%, rgba(8, 6, 16, .82) 50%, rgba(8, 6, 16, .9)), linear-gradient(transparent 470px, #08060f 540px); }
#title.ts-on { justify-content: flex-end; }
#title.ts-on .title-inner { width: 560px; padding: 0 26px 0 0; }
#title.ts-on .logo { font-size: 80px; }
#title.ts-on .sub { font-size: 26px; }
#title.ts-on .menu { flex-wrap: wrap; gap: 12px; margin: 26px 0 22px; }
#title.ts-on .menu button { font-size: 24px; }
#title.ts-on .volumes { transform: scale(.85); }
#title.ts-on .help { font-size: 17px; }
.ts-walk { position: absolute; left: 0; top: 0; z-index: 4; animation: tsWalk 28s linear infinite; animation-delay: -4s; }
@keyframes tsWalk { 0% { transform: translateX(-120px); } 42%, 100% { transform: translateX(1090px); } }
.ts-cat .clA, .ts-cat .clB { transform-box: fill-box; transform-origin: 50% 0; animation: catLeg .36s ease-in-out infinite; }
.ts-cat .clB { animation-delay: -.18s; }
.ts-cat .upper { animation: bob .18s ease-in-out infinite alternate; }
.ts-kira > svg { transform-origin: 50% 100%; animation: tsBreathe 3.6s ease-in-out infinite; }
@keyframes tsBreathe { 50% { transform: scaleY(1.012); } }
.ts-kira .armL { transform-origin: 42px 67px; }
.ts-kira .armR { transform-origin: 78px 67px; }
.ts-kira .upper { transform-origin: 60px 120px; }
.ts-wave .view-front .armL { animation: tsWave 2.2s ease-in-out; }
@keyframes tsWave { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(148deg); } 30%, 54% { transform: rotate(132deg); } 42%, 66% { transform: rotate(158deg); } 82% { transform: rotate(145deg); } }
.ts-wink .view-front .eyes > g:nth-child(2) > .eye { animation: tsWink 1.2s ease-in-out; }
@keyframes tsWink { 0%, 100% { transform: scaleY(1); } 25%, 70% { transform: scaleY(.1); } }
.ts-dance > svg { animation: tsBounce .375s ease-in-out 8; }
@keyframes tsBounce { 50% { transform: translateY(-4px); } }
.ts-dance .view-front .upper { animation: tsHips .75s ease-in-out 4; }
@keyframes tsHips { 0%, 100% { transform: translateX(-2.5px) rotate(-3deg); } 50% { transform: translateX(2.5px) rotate(3deg); } }
.ts-dance .view-front .armL { animation: tsArmL .75s ease-in-out 4; }
.ts-dance .view-front .armR { animation: tsArmR .75s ease-in-out 4; }
@keyframes tsArmL { 0%, 100% { transform: rotate(25deg); } 50% { transform: rotate(150deg); } }
@keyframes tsArmR { 0%, 100% { transform: rotate(-150deg); } 50% { transform: rotate(-25deg); } }
.ts-dance .view-front .legL { transform-origin: 51px 122px; animation: tsLeg .375s ease-in-out 8; }
.ts-dance .view-front .legR { transform-origin: 69px 122px; animation: tsLeg .375s ease-in-out 8; animation-delay: -.19s; }
@keyframes tsLeg { 50% { transform: translateY(-3px); } }
.ts-moe-eyes { transform-box: fill-box; transform-origin: center; animation: blink 3.4s infinite; }
.ts-ticket { animation: tsBlink 1.1s steps(1) infinite; }
@keyframes tsBlink { 50% { opacity: 0; } }
.logo {
  font-size: 104px; line-height: .9; letter-spacing: 4px;
  background: linear-gradient(90deg, #ff7ab6, #b49cff 50%, #5ef2d0);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(180, 140, 255, .35));
}
.logo.small { font-size: 64px; margin: 6px 0 16px; }
.sub { font-size: 32px; color: #c7b8ff; margin-top: 8px; }
.menu { margin: 34px 0 26px; display: flex; gap: 18px; justify-content: center; }
.menu button {
  font-family: inherit; font-size: 28px; color: #e9e4ff; background: #221a3d;
  border: 2px solid #5a48a8; border-radius: 6px; padding: 6px 22px; cursor: pointer;
}
.menu button:hover { border-color: #ffd166; color: #ffd166; }
.help { font-size: 20px; color: #7f74b0; line-height: 1.3; }
.help b { color: #c7b8ff; font-weight: normal; }
.end-k { font-size: 26px; color: #ffd166; letter-spacing: 2px; }
#end p { font-size: 26px; color: #c7b8ff; margin: 8px 0; line-height: 1.15; }
#end p.tbc { color: #5ef2d0; font-size: 30px; margin-top: 18px; }
.end-stats { font-size: 20px; color: #7f74b0; margin-top: 14px; }

.kp {
  width: 250px; padding: 16px; border-radius: 10px; background: linear-gradient(#2b2e3c, #1b1d27);
  border: 2px solid #4a4f66; box-shadow: 0 10px 40px #000;
}
.kp-brand { font-size: 15px; color: #8a90a8; text-align: center; letter-spacing: 1px; margin-bottom: 8px; }
.kp-display {
  background: #0b2a1a; color: #3dff8a; font-size: 40px; text-align: center; border-radius: 4px;
  padding: 2px 0; margin-bottom: 12px; text-shadow: 0 0 8px rgba(61, 255, 138, .6); border: 1px solid #06160e;
}
.kp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kp-grid button {
  font-family: inherit; font-size: 28px; height: 46px; color: #e1e4ee; background: #3a3e50;
  border: none; border-bottom: 3px solid #23252f; border-radius: 6px; cursor: pointer;
}
.kp-grid button:hover { background: #474c62; }
.kp-grid button:active { transform: translateY(2px); border-bottom-width: 1px; }
.kp-grid button.ok { background: #1f6b3e; }
.kp-grid button.clr { background: #6b1f2e; }
.kp-cancel { text-align: center; margin-top: 10px; font-size: 18px; color: #8a90a8; cursor: pointer; }
.kp-cancel:hover { color: #ffd166; }

/* ------------------------------------------------------------ Lautstärke */
.volumes { display: flex; gap: 22px; justify-content: center; margin: -8px 0 22px; }
.volumes label { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 20px; color: #9d8fd9; }
.volumes input { width: 130px; accent-color: #ff7ab6; cursor: pointer; }

/* ------------------------------------------------------------ Kleiderschrank */
#wardrobe { background: radial-gradient(ellipse at 30% 40%, rgba(40, 30, 70, .95), rgba(6, 5, 14, .98)); }
.wd { display: flex; gap: 26px; align-items: center; padding: 0 24px; }
.wd-preview {
  width: 270px; height: 540px; border-radius: 12px; border: 1px solid #3a3160; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 8px;
  background: linear-gradient(#1b1f33 0%, #262b45 74%, #15131f 74%, #0d0c14 100%);
}
.wd-panel { width: 610px; }
.wd-title { font-size: 36px; color: #ffb3e1; line-height: 1; }
.wd-sub { font-size: 21px; color: #7f74b0; margin: 2px 0 8px; }
.wd-group { margin-bottom: 7px; }
.wd-group h3 { font-size: 21px; font-weight: normal; color: #ffd166; margin: 0 0 3px; }
.wd-opts { display: flex; flex-wrap: wrap; gap: 5px; }
.wopt {
  font-family: inherit; font-size: 19px; color: #cfd3e6; background: #1c2032; border: 2px solid #343a55;
  border-radius: 6px; padding: 1px 8px; cursor: pointer; display: flex; align-items: center; gap: 6px;
}
.wopt:hover { border-color: #6b7499; }
.wopt.on { border-color: #ffd166; color: #fff; background: #2a2a3e; }
.swatch { width: 14px; height: 14px; border-radius: 50%; border: 1px solid #0006; }
.wd-desc { font-size: 18px; color: #9aa3c7; line-height: 1.1; margin: 4px 0 0; min-height: 40px; }
.wd-menu { justify-content: flex-start; margin: 10px 0 0; }
.menu button.primary { border-color: #ff7ab6; background: #3a1d3a; }

/* ------------------------------------------------------------ Akt 1 */
#chapter { background: #000; z-index: 30; }
#chapter.show { animation: chapter 3.4s ease forwards; }
@keyframes chapter { 0% { opacity: 0; } 18%, 78% { opacity: 1; } 100% { opacity: 0; } }
#kira.is-rumba.walking .rumba-body { animation: bob .12s ease-in-out infinite alternate; }
.pigeon { animation: pigeon 2.6s ease-in-out infinite; }
@keyframes pigeon { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-3px); } 80% { transform: translateY(0); } 85% { transform: translateY(-2px); } }

/* ------------------------------------------------------------ Spielstände */
#saves { background: radial-gradient(ellipse at 50% 30%, rgba(30, 24, 60, .96), rgba(6, 5, 14, .98)); }
.saves { width: 820px; }
.save-list { max-height: 360px; overflow-y: auto; margin-top: 6px; }
.save-row { display: flex; align-items: center; gap: 14px; padding: 5px 10px; border-bottom: 1px solid #2a2248; font-size: 21px; }
.save-row.empty .save-info { color: #4d4475; }
.save-label { width: 220px; color: #ffd166; }
.save-info { flex: 1; color: #b4a6f5; }
.save-info b { color: #e9e4ff; font-weight: normal; }
.save-acts { display: flex; gap: 6px; }
.save-acts button, .save-cps button {
  font-family: inherit; font-size: 18px; color: #e9e4ff; background: #221a3d;
  border: 1px solid #5a48a8; border-radius: 5px; padding: 1px 10px; cursor: pointer;
}
.save-acts button:hover, .save-cps button:hover { border-color: #ffd166; color: #ffd166; }
.save-dev { margin: 12px 0 4px; font-size: 20px; color: #5ef2d0; }
.save-cps { display: flex; flex-wrap: wrap; gap: 6px; }
.save-msg { height: 24px; margin-top: 6px; font-size: 20px; color: #5ef2d0; text-align: center; }
.save-menu { margin: 6px 0 0; }

/* ------------------------------------------------------------ Gruppe (Akt 3) */
#companions { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.companion { position: absolute; left: 0; top: 0; width: 92px; height: 171px; transform-origin: 46px 170px; }
.companion svg { display: block; overflow: visible; }
.companion .view-side, .companion .view-back { display: none; }
.companion.v-side .view-front, .companion.v-back .view-front { display: none; }
.companion.v-side .view-side, .companion.v-back .view-back { display: inline; }
.companion.faceL .view-side { transform: translate(120px, 0) scale(-1, 1); }
.companion .eye { transform-box: fill-box; transform-origin: center; animation: blink 4.7s infinite; }
#party { position: absolute; right: 14px; top: 4px; display: flex; gap: 6px; z-index: 2; }
#party.hint::before { content: ''; position: absolute; right: calc(100% + 8px); top: 50%; margin-top: -11px; width: 0; height: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 20px solid #ffd23f; filter: drop-shadow(0 0 6px #ffd23f); animation: hintArrow .7s ease-in-out infinite; pointer-events: none; }
#party.hint .pchar { animation: hintGlow .7s ease-in-out infinite; }
@keyframes hintArrow { 0%, 100% { opacity: 1; margin-right: 0; } 50% { opacity: .45; margin-right: 14px; } }
@keyframes hintGlow { 0%, 100% { box-shadow: 0 0 0 3px #ffd23f, 0 0 16px #ffd23f; } 50% { box-shadow: 0 0 0 1px rgba(255, 210, 63, .4), 0 0 4px rgba(255, 210, 63, .4); } }
.pchar { font-family: inherit; font-size: 19px; color: #9d8fd9; background: #1c1733; border: 1px solid #3a2f6a; border-radius: 5px; padding: 0 10px; cursor: pointer; }
.pchar.on { color: #ffd166; border-color: #ffd166; }
.speech.nyx { color: #c9ff7a; }
.speech.kalle { color: #ffb07a; }
.speech.bit, .speech.host { color: #fff3b8; }
.speech.hiro { color: #ffa8e0; }
.speech.jonas, .speech.finn, .speech.mika { color: #d0d8e8; }
.speech.trainer { color: #7aff9e; font-family: monospace; letter-spacing: .5px; }
.speech.fenrir { color: #ff4d4d; letter-spacing: 2px; text-transform: uppercase; }
.speech.investor { color: #c8c0ff; }

/* Wachmann Jonas geht weg (Akt 2, Tor) */
#bg .jonas { transition: transform 1.9s linear, opacity .4s; }
#bg .jonas.leaving .jonas-walk { animation: march .42s infinite; }
#bg .leon-in { transition: transform 1.8s linear; }
#bg .leon-in.walking .leon-walk { animation: march .42s infinite; }
/* Ende Akt 2: der Lieferwagen steht zuerst außerhalb des Bildes und fährt dann vor */
#bg .van { transform: translateX(320px); }
/* Nebenfiguren (js/figures.js) blinzeln, versetzt */
/* Lounge: Leon hält am Pult eine stumme Rede, die Investoren nicken alles ab */
#bg .orator .armL { transform-origin: 44px 66px; animation: gestL 5.2s ease-in-out infinite; }
#bg .orator .armR { transform-origin: 76px 66px; animation: gestR 3.9s ease-in-out infinite; }
#bg .orator .head { transform-origin: 60px 60px; animation: oratorHead 4.6s ease-in-out infinite; }
#bg .orator .mo { animation: mime 2.8s steps(1) infinite; }
@keyframes gestR { 0%, 100% { transform: rotate(0); } 12% { transform: rotate(-58deg); } 22% { transform: rotate(-38deg); } 32% { transform: rotate(-62deg); } 46% { transform: rotate(-8deg); } 64% { transform: rotate(-30deg); } 72% { transform: rotate(-24deg); } 84% { transform: rotate(-70deg); } }
@keyframes gestL { 0%, 100% { transform: rotate(0); } 18% { transform: rotate(14deg); } 38% { transform: rotate(46deg); } 50% { transform: rotate(40deg); } 70% { transform: rotate(6deg); } 86% { transform: rotate(30deg); } }
@keyframes oratorHead { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 60% { transform: rotate(2.5deg); } }
@keyframes mime { 0%, 8%, 16%, 30%, 38%, 54%, 62%, 70% { opacity: 1; } 4%, 12%, 20%, 34%, 46%, 58%, 66%, 80% { opacity: 0; } }
#bg .leon-run { transition: transform 1s cubic-bezier(.4, 0, .7, 1); }
#bg .leon-run.walking .runner { animation: march .26s infinite; }
#bg .leon-run.walking .runner .armL, #bg .leon-run.walking .runner .armR { animation: swingS .26s ease-in-out infinite; }
#bg .runner .armL { transform-origin: 44px 66px; } #bg .runner .armR { transform-origin: 76px 66px; animation-delay: -.13s !important; }
/* Leon an der Startkonsole: tippt hektisch, schüttelt den Kopf, beugt sich vor */
#bg .fixer .armR { transform-origin: 76px 66px; animation: typeR .34s ease-in-out infinite; }
#bg .fixer .armL { transform-origin: 44px 66px; animation: typeL .41s ease-in-out infinite; }
#bg .fixer .head { transform-origin: 60px 60px; animation: fixHead 3.6s ease-in-out infinite; }
#bg .leon-fix .fix-q { animation: qBlink 1.4s steps(1) infinite; }
@keyframes qBlink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } }
@keyframes typeR { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(22deg); } }
@keyframes typeL { 0%, 100% { transform: rotate(-14deg); } 50% { transform: rotate(-23deg); } }
@keyframes fixHead { 0%, 40%, 100% { transform: translateY(4px) scaleY(.93); } 50% { transform: translateY(4px) scaleY(.93) rotate(-6deg); } 58% { transform: translateY(4px) scaleY(.93) rotate(6deg); } 66% { transform: translateY(4px) scaleY(.93) rotate(-5deg); } 74% { transform: translateY(4px) scaleY(.93); } 86% { transform: translateY(6px) scaleY(.88); } }
#bg .fixer .eye { animation: none; transform-box: fill-box; transform-origin: center bottom; transform: scaleY(.45); }
#bg .nodder .head { transform-origin: 60px 60px; animation: nod 3.4s ease-in-out infinite; }
#bg .nodder.nod1 .head { animation-duration: 2.9s; animation-delay: -1.1s; }
#bg .nodder.nod2 .head { animation-duration: 3.8s; animation-delay: -2.3s; }
@keyframes nod { 0%, 55%, 100% { transform: none; } 61% { transform: translateY(4.6px) scaleY(.92); } 67% { transform: none; } 73% { transform: translateY(4.6px) scaleY(.92); } 79% { transform: none; } }
/* ================================================================ Leerlauf-Animationen (Räume wirken lebendiger) */
/* Nebenfiguren atmen: Oberkörper hebt und senkt sich minimal, jede im eigenen Takt */
#bg .npc > .upper { transform-origin: 60px 150px; animation: breathe 3.8s ease-in-out infinite; }
#bg .npc:nth-of-type(2n) > .upper { animation-duration: 4.4s; animation-delay: -1.3s; }
#bg .npc:nth-of-type(3n) > .upper { animation-duration: 3.3s; animation-delay: -2.1s; }
@keyframes breathe { 0%, 100% { transform: none; } 50% { transform: translateY(-.8px) scaleY(1.008); } }
/* Figuren im Leerlauf (js/idle.js) */
.idle-sway > svg { transform-origin: 50% 100%; animation: idSway 2.4s ease-in-out; }
.idle-stretch > svg { transform-origin: 50% 100%; animation: idStretch 2.2s ease-in-out; }
.idle-tap > svg { transform-origin: 50% 100%; animation: idTap .32s ease-in-out 6; }
.idle-sit > svg { transform-origin: 50% 100%; animation: idSit 2.4s ease-in-out; }
.idle-lick > svg { transform-origin: 50% 100%; animation: emSniff .45s ease-in-out 5; }
.idle-tail > svg { transform-origin: 30% 100%; animation: idTail .5s ease-in-out 4; }
@keyframes idSway { 0%, 100% { transform: none; } 30% { transform: rotate(1.6deg); } 70% { transform: rotate(-1.4deg); } }
@keyframes idStretch { 0%, 100% { transform: none; } 35%, 65% { transform: scaleY(1.035) scaleX(.985); } }
@keyframes idTap { 0%, 100% { transform: none; } 50% { transform: translateY(-1.5px); } }
@keyframes idSit { 0%, 100% { transform: none; } 25%, 75% { transform: scaleY(.88) scaleX(1.05); } }
@keyframes idTail { 0%, 100% { transform: none; } 50% { transform: skewX(4deg); } }
/* Topfpflanzen wiegen sich */
#bg .leaves { transform-origin: 11px 0; animation: sway 5.5s ease-in-out infinite; }
@keyframes sway { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.8deg); } }
/* Dampf */
#bg .steam .puff { animation: puff 2.6s ease-out infinite; }
#bg .steam .p1 { animation-delay: -.9s; } #bg .steam .p2 { animation-delay: -1.7s; }
@keyframes puff { 0% { transform: translateY(4px) scaleY(.6); opacity: 0; } 30% { opacity: .55; } 100% { transform: translateY(-12px) scaleY(1.1); opacity: 0; } }
/* Laufende Textzeilen auf Bildschirmen */
#bg .scanline { animation: scan 3.2s linear infinite; }
#bg .scanline.s1 { animation-delay: -1.1s; animation-duration: 2.7s; } #bg .scanline.s2 { animation-delay: -2.2s; animation-duration: 3.8s; }
@keyframes scan { from { transform: translateY(0); } to { transform: translateY(-60px); } }
/* Leuchtflächen (Lampenkegel, Bildschirm-Schimmer: weiche Verlaufs-Ellipsen) atmen leicht */
#bg ellipse[fill^="url("] { animation: glowBreath 5s ease-in-out infinite; }
#bg g ellipse[fill^="url("]:nth-of-type(2n) { animation-duration: 6.5s; animation-delay: -2s; }
@keyframes glowBreath { 0%, 100% { opacity: 1; } 50% { opacity: .78; } }
/* Stadt-Silhouetten: einzelne Fenster gehen an und aus */
#bg .winlit.w1 { animation: winA 13s steps(1) infinite; } #bg .winlit.w3 { animation: winA 17s steps(1) infinite -6s; } #bg .winlit.w5 { animation: winA 21s steps(1) infinite -11s; }
@keyframes winA { 0%, 62% { opacity: 1; } 63%, 88% { opacity: 0; } 89% { opacity: 1; } }
/* Drohnen schweben, Rotoren flirren */
#bg .dronebob { animation: droneHover 2.8s ease-in-out infinite; }
#bg .dronebob .rot { transform-box: fill-box; transform-origin: center; animation: propSpin .14s linear infinite; }
/* Raum-Leerlauf (js/life.js) */
#bg .life { pointer-events: none; }
#bg .cloud { animation: cloudDrift 80s linear infinite; }
@keyframes cloudDrift { from { transform: translateX(0); } to { transform: translateX(var(--w, 1100px)); } }
#bg .pt.dust { animation: dust 7s ease-in-out infinite alternate; opacity: .35; }
@keyframes dust { 0% { transform: translate(0, 0); opacity: .1; } 50% { opacity: .45; } 100% { transform: translate(14px, -18px); opacity: .15; } }
#bg .pt.snow { animation: snowfall 9s linear infinite; opacity: .85; }
@keyframes snowfall { from { transform: translate(0, -60px); } to { transform: translate(24px, 380px); } }
#bg .pt.glitter { animation: glitter 3.4s ease-in-out infinite; }
@keyframes glitter { 0%, 70%, 100% { opacity: 0; } 80% { opacity: .9; } }
#bg .aurora { animation: aurora 9s ease-in-out infinite alternate; }
#bg .aurora.a2 { animation-duration: 13s; }
@keyframes aurora { from { transform: translateX(-20px) scaleY(.9); opacity: .06; } to { transform: translateX(20px) scaleY(1.15); opacity: .2; } }
#bg .airflow { animation: airflow 1.8s linear infinite; opacity: 0; }
#bg .airflow.a1 { animation-delay: -.4s; } #bg .airflow.a2 { animation-delay: -.9s; } #bg .airflow.a3 { animation-delay: -1.3s; } #bg .airflow.a4 { animation-delay: -.6s; }
@keyframes airflow { 0% { transform: translateY(0); opacity: 0; } 30% { opacity: .35; } 100% { transform: translateY(26px); opacity: 0; } }
#bg .heatglow { animation: heatglow 3s ease-in-out infinite; }
@keyframes heatglow { 0%, 100% { opacity: .12; } 50% { opacity: .32; } }
#bg .heartup { animation: heartup 4.5s ease-out infinite; opacity: 0; }
#bg .heartup.h1 { animation-delay: -1.5s; } #bg .heartup.h2 { animation-delay: -3s; }
@keyframes heartup { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: .9; } 100% { transform: translateY(-50px); opacity: 0; } }
#bg .beam { transform-box: fill-box; transform-origin: 50% 0; animation: beam 6s ease-in-out infinite alternate; }
#bg .beam.b1 { animation-duration: 7.5s; animation-delay: -3s; }
@keyframes beam { from { transform: rotate(-18deg); } to { transform: rotate(18deg); } }
/* Allgemein: sanftes Flackern (Neon, Monitore) und Schweben */
#bg .flicker { animation: flicker 6s steps(1) infinite; }
@keyframes flicker { 0%, 41%, 44%, 79%, 100% { opacity: 1; } 42%, 80% { opacity: .55; } 43% { opacity: .9; } }
#bg .float { animation: floaty 4s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
#bg .npc .eye { transform-box: fill-box; transform-origin: center; animation: blink 5.3s infinite; }
#bg .npc:nth-of-type(2n) .eye { animation-duration: 4.6s; animation-delay: -1.7s; }
#bg .npc:nth-of-type(3n) .eye { animation-duration: 6.1s; animation-delay: -3.2s; }

/* Kiras Gesichtsausdrücke während Dialogen (face-<name> an #kira bzw. Kiras Mitspieler-Sprite, js/emotes.js) */
.xpart { opacity: 0; transition: opacity .15s; }
.face-shock .mc, .face-roll .mc, .face-annoyed .mc, .face-sad .mc, .face-smug .view-side .mc { opacity: 0; }
.face-shock .xo, .face-roll .xflat, .face-annoyed .xflat, .face-sad .xfrown, .face-smug .view-side .xsmirk, .face-blush .xblush { opacity: 1; }
.face-shock .eye ellipse, .face-roll .eye ellipse, .face-roll .eye circle, .face-blush .eye ellipse, .face-blush .eye circle, .face-sad .eye ellipse,
.face-annoyed .eye { transform-box: fill-box; transform-origin: 50% 60%; transition: transform .15s; }
.face-shock .eye ellipse { transform: scale(.7); }
.face-shock .mbrow, .face-shock .view-side .eye + path { transform: translateY(-1.8px); }
.face-roll .eye ellipse, .face-roll .eye circle { transform: translate(.4px, -2.2px); }
.face-roll .mbrow, .face-roll .view-side .eye + path { transform: translateY(-1px); }
.face-annoyed .eye { transform: scaleY(.58); }
.face-annoyed .mbrow, .face-annoyed .view-side .eye + path { transform: translateY(1.2px); }
.face-blush .eye ellipse, .face-blush .eye circle { transform: translateX(1.4px) translateY(.6px); }
.face-sad .eye ellipse { transform: translateY(.8px); }
.face-sad .mbrow { transform: translateY(-.8px) scaleX(.94); transform-box: fill-box; transform-origin: center; }
.face-smug .view-front .mgrin, .face-smug .view-front .mlids, .face-smug .view-front .mbrow2 { opacity: 1; }
.face-smug .view-front .mc, .face-smug .view-front .mbrow { opacity: 0; }

/* NekoCon: Kira „zieht sich um“ (Shirt hochziehen, Grinsen, ZENSIERT-Kasten) */
.mgrin { opacity: 0; }
#kira.grin .view-front .mgrin { opacity: 1; }
#kira.grin .view-front .mc { opacity: 0; }
.mlids, .mbrow2 { opacity: 0; }
#kira.grin .view-front .mlids, #kira.grin .view-front .mbrow2 { opacity: 1; }
#kira.grin .view-front .mbrow { opacity: 0; }
#kira .kclip, #kira .khem, #kira .kfore { transition: transform 2.4s ease-in-out; }
#kira .kclip { transform: translateY(0); }
#kira.shirt-lift .kclip { transform: translateY(var(--lift)); }
.khem { transform: translateY(var(--hem)); opacity: 0; }
#kira.shirt-lift .khem { transform: translateY(var(--lift)); opacity: 1; }
.karms { opacity: 0; } /* auch im Kleiderschrank und bei Kira als Begleiterin versteckt */
#kira.lifting .karms { opacity: 1; }
#kira.lifting .view-front .armL, #kira.lifting .view-front .armR { opacity: 0; }
#kira.shirt-lift .kfore { transform: rotate(var(--rot)); }
/* Kamerazoom auf Kira (Bühne wird skaliert, die Leiste darunter deckt ab) */
#stage.zoom { transition: transform 1.8s ease-in-out; transform-origin: 0 0; }
#stage.zoom #speech { font-size: calc(25px / var(--z, 1)); max-width: calc(440px / var(--z, 1)); --o: calc(2px / var(--z, 1)); --on: calc(-2px / var(--z, 1)); }
.censor { position: absolute; z-index: 9; display: flex; align-items: center; justify-content: center;
  background: #000; border: 3px solid #f1eef6; color: #f1eef6; font: 34px Impact, 'Arial Black', sans-serif; letter-spacing: 3px;
  transform: rotate(-4deg); animation: censorIn .18s ease-out; pointer-events: none; }
@keyframes censorIn { from { transform: rotate(-4deg) scale(1.4); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
/* Herr Dividende (Kater): Beine im Profil schwingen paarweise, kein Kira-Marsch */
.is-cat .clA, .is-cat .clB { transform-box: fill-box; transform-origin: 50% 0; }
#kira.is-cat.walking .clA { animation: catLeg .36s ease-in-out infinite; }
#kira.is-cat.walking .clB { animation: catLeg .36s ease-in-out infinite; animation-delay: -.18s; }
#kira.is-cat.walking .upper { animation: bob .18s ease-in-out infinite alternate; }
@keyframes catLeg { 0%, 100% { transform: rotate(-22deg); } 50% { transform: rotate(22deg); } }

/* Zweite Umzieh-Szene (Akt 5): Hose rutscht, Daumen im Bund */
.kpull { opacity: 0; }
#kira .klow, #kira .kfore2 { transition: transform 2.4s ease-in-out; }
#kira.pulling .klow { transform: translateY(var(--pull, 11px)); }
/* dabei leicht in die Knie: Oberschenkel verkürzt sich zum Knie hin (Frontansicht), Oberkörper sinkt mit */
#kira.pull-arms .view-front .upper, #kira.pull-arms .view-front .kthigh { transition: transform 2.4s ease-in-out; }
.kthigh { transform-origin: 60px 168px; }
/* Bein nur in der Szene am Knie teilen, sonst ein Stück (keine Naht) */
.kshin { display: none; }
.kthigh { clip-path: none; }
#kira.pull-arms .kshin { display: inline; }
#kira.pull-arms .kthigh { clip-path: url(#kira-thigh); }
#kira.pulling .view-front .upper { transform: translateY(5px); }
#kira.pulling .view-front .kthigh { transform: scaleY(.9); }
#kira.pulling .kfore2 { transform: rotate(var(--rot)); }
#kira.pull-arms .kpull { opacity: 1; }
/* Hosenbund dehnt sich auf Hüftbreite (sonst stünden Haut-Zipfel neben der Hose) */
.kstretch { opacity: 0; }
#kira.pulling .kstretch { opacity: 1; transition: opacity 1.2s ease-in 1.1s; }
#kira.pull-arms .view-front .armL, #kira.pull-arms .view-front .armR { opacity: 0; }

/* Sitzsack im Open Space: reinfallen, versinken (Vorderteil des Sacks liegt über den Beinen), zappeln, rausploppen */
#kira > svg { transform-origin: 50% 100%; }
#kira.bean-sit { clip-path: inset(-60px -50px 0 -50px); } /* Beine stecken unten im Sack */
#kira.bean-sit > svg { transform: translateY(58px); transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
#kira.bean-sit.bean-struggle > svg { animation: beanWiggle .32s ease-in-out infinite; }
#kira.bean-up > svg { transform: translateY(-10px); transition: transform .3s cubic-bezier(.2, 1.8, .4, 1); }
@keyframes beanWiggle {
  0%, 100% { transform: translateY(58px) rotate(0); }
  25% { transform: translateY(50px) rotate(-6deg); }
  75% { transform: translateY(53px) rotate(6deg); }
}
#bg .beanbag { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
#bg .beanbag.squish { transform: scale(1.1, .86); }
/* Bällebad (Akt 4): Herr Dividende hüpft rein, taucht ab, nur die Ohren schauen raus */
#kira.pit-dive > svg { animation: pitDive .5s cubic-bezier(.3, 0, .6, 1) forwards; }
#kira.pit-hop > svg { animation: pitHop .5s cubic-bezier(.3, 0, .6, 1); }
#kira.pit-in { clip-path: inset(-80px -60px 0 -60px); }
#kira.pit-in > svg { transform: translateY(var(--sink, 64px)); }
#kira.pit-in.pit-ears > svg { transform: translateY(var(--peek, 9px)); transition: transform .35s cubic-bezier(.2, 1.6, .4, 1); animation: earPeek 1.1s ease-in-out .35s infinite; }
@keyframes pitDive { 0% { transform: translateY(0); } 45% { transform: translateY(-46px); } 100% { transform: translateY(var(--sink, 64px)); } }
@keyframes pitHop { 0% { transform: translateY(var(--peek, 9px)); } 45% { transform: translateY(-46px); } 100% { transform: translateY(0); } }
@keyframes earPeek { 0%, 100% { transform: translateY(var(--peek, 9px)); } 50% { transform: translateY(calc(var(--peek, 9px) - 3px)) rotate(-4deg); } }
.pitfront .splash { opacity: 0; }
.pitfront.splashing .splash { animation: splash .7s cubic-bezier(.2, .8, .4, 1) forwards; }
@keyframes splash { 0% { opacity: 1; transform: none; } 50% { opacity: 1; transform: translate(calc(var(--dx) * .6), var(--h)); } 100% { opacity: 1; transform: translate(var(--dx), 0); } }
/* Akt 4: Herr Dividende quetscht sich in den Spalt neben dem Serverschrank */
#kira.gap-move { transition: transform 1.1s ease-in-out; }
#kira.gap-move > svg { transition: filter 1.2s, opacity 1.2s, transform 1.2s; }
#kira.gap-in > svg { transform: scaleX(.45) scaleY(.92); filter: brightness(.12); opacity: 0; }
/* Akt 5, Maid-Café: Leon macht das Ritual vor (Arme, Drehen, Hüpfen) */
.companion > svg { transform-origin: 50% 100%; }
.companion.rit-daumen > svg { animation: ritBob .5s ease-in-out infinite; }
.companion.rit-herz > svg { animation: ritBob .8s ease-in-out infinite; }
.companion.rit-moe > svg { animation: ritSway .9s ease-in-out infinite; }
.companion.rit-dreh > svg { animation: ritSpin 1s ease-in-out 1; }
.companion.rit-disrupt > svg { animation: ritJump .6s cubic-bezier(.3, 0, .5, 1) infinite; }
.companion.rit-kyun > svg { animation: ritJump .7s cubic-bezier(.3, 0, .5, 1) 2; }
@keyframes ritBob { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
@keyframes ritSway { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes ritSpin { 0% { transform: scaleX(1); } 25% { transform: scaleX(.05); } 50% { transform: scaleX(-1); } 75% { transform: scaleX(.05); } 100% { transform: scaleX(1); } }
@keyframes ritJump { 0%, 100% { transform: none; } 40% { transform: translateY(-22px); } }
.rit-heart { position: absolute; z-index: 9; pointer-events: none; transform: translate(-50%, 0); animation: ritHeart 1.6s ease-out forwards; }
@keyframes ritHeart { 0% { opacity: 0; transform: translate(-50%, 10px) scale(.4); } 20% { opacity: 1; transform: translate(-50%, 0) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -46px) scale(1); } }
/* Akt 5: Kalles Lieferdrohne */
.drone-fly, .drone-parcel { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; transform-origin: 40px 60px; }
.drone-fly.moving { transition: transform 1.8s cubic-bezier(.3, .1, .3, 1); }
.drone-fly .prop ellipse { transform-box: fill-box; transform-origin: center; animation: propSpin .12s linear infinite; }
.drone-parcel { transition: opacity .3s; }
@keyframes propSpin { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.25); } }
/* Akt 5: Mini-Skøll schwebt leicht auf und ab */
#bg .mini-bob { animation: miniBob .9s ease-in-out infinite; }
@keyframes miniBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
/* Akt 6, Kühlhalle: Drohnen schweben, Laser schwenken; Laserpunkt, dem Herr Dividende hinterherjagt */
#bg .hover-drone { animation: droneHover 2.6s ease-in-out infinite; }
#bg .hover-drone.hd1 { animation-duration: 3.1s; animation-delay: -1.2s; }
#bg .hover-drone.hd2 { animation-duration: 2.2s; animation-delay: -.6s; }
#bg .hover-drone .laser { transform-origin: 0 4px; animation: laserSweep 2.8s ease-in-out infinite alternate; }
#bg .hover-drone.hd1 .laser { animation-duration: 3.4s; animation-delay: -1.7s; }
#bg .hover-drone.hd2 .laser { animation-duration: 2.3s; animation-delay: -.9s; }
@keyframes droneHover { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes laserSweep { 0% { transform: rotate(-14deg); } 100% { transform: rotate(32deg); } }
.laser-dot { position: absolute; left: 0; top: 0; z-index: 4; width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; border-radius: 50%; background: #ff3b5c; box-shadow: 0 0 8px 3px rgba(255, 59, 92, .7); pointer-events: none; transition: transform .25s ease-out; }
#kira.pounce > svg { animation: pounce .35s cubic-bezier(.3, 0, .5, 1); }
@keyframes pounce { 0%, 100% { transform: none; } 45% { transform: translateY(-16px) rotate(-8deg); } }
/* Akt 6: Kamerabild der Torwache beim Folien-Pitch */
.sven-cam { position: absolute; right: 16px; top: 16px; z-index: 8; border: 3px solid #3a3f52; border-radius: 4px; box-shadow: 0 4px 16px rgba(0, 0, 0, .5); overflow: hidden; line-height: 0;
  opacity: 0; transform: translateY(-10px) scale(.96); transition: opacity .4s, transform .4s; pointer-events: none; }
.sven-cam.on { opacity: 1; transform: none; }
/* Kurz-Aktionen zu Erzählerzeilen (js/emotes.js): Sprite der Figur macht die Handlung vor */
.emote > svg { transform-origin: 50% 100%; }
.emote-hop > svg { animation: emHop .7s cubic-bezier(.3, 0, .5, 1); }
.emote-hoplie > svg { animation: emHopLie 1.1s cubic-bezier(.3, 0, .5, 1) forwards; }
.emote-lie > svg { animation: emLie .45s ease-out forwards; }
.emote-flat > svg { animation: emFlat .6s ease-out forwards; }
.emote-spinlie > svg { animation: emSpinLie 1.8s ease-in-out forwards; }
.emote-scratch > svg { animation: emScratch .14s ease-in-out 8 alternate; }
.emote-swipe > svg { animation: emSwipe .5s ease-in-out 2; }
.emote-push > svg { animation: emPush .9s ease-in-out infinite; }
.emote-sniff > svg { animation: emSniff .5s ease-in-out infinite; }
.emote-rub > svg { animation: emRub .8s ease-in-out infinite; }
.emote-stare > svg { animation: emStare .6s ease-out forwards; }
.emote-turn > svg { animation: emTurn .5s ease-in-out forwards; }
.emote-stretch > svg { animation: emStretch 1.4s ease-in-out; }
/* Nebenfiguren (#bg .npc): nur der Kopf bewegt sich */
#bg .npc.emote-lookup .head { transform-origin: 60px 60px; animation: emLookUp .5s ease-out forwards; }
#bg .npc.emote-lookdown .head { transform-origin: 60px 60px; animation: emLookDown .5s ease-out forwards; }
#bg .npc.emote-nod .head { transform-origin: 60px 60px; animation: nod 1s ease-in-out 2; }
@keyframes emLookUp { to { transform: translateY(-3px) rotate(-8deg) scaleY(.95); } }
@keyframes emLookDown { to { transform: translateY(4px) scaleY(.9); } }
.stage-flash { position: absolute; inset: 0; z-index: 9; pointer-events: none; }
.tossed { position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; margin: -8px 0 0 -16px; }
.emote-spin > svg { animation: emSpin .9s ease-in-out 2; }
.emote-bristle > svg { animation: emBristle .5s ease-out forwards; }
@keyframes emSpin { 0%, 100% { transform: none; } 25% { transform: scaleX(-1) translateY(-4px); } 50% { transform: translateY(-6px); } 75% { transform: scaleX(-1) translateY(-4px); } }
@keyframes emBristle { 0% { transform: none; } 60% { transform: scaleY(1.14) scaleX(.95) translateY(-3px); } 100% { transform: scaleY(1.1) scaleX(.96); } }
.emote-purr > svg { animation: emPurr .12s linear infinite; }
@keyframes emPurr { 0%, 100% { transform: none; } 50% { transform: translateX(.6px) scaleY(.99); } }
.emote-chase > svg { animation: pounce .42s cubic-bezier(.3, 0, .5, 1) infinite; }
@keyframes emHop { 0%, 100% { transform: none; } 15% { transform: scaleY(.85); } 45% { transform: translateY(-34px) scaleY(1.05); } 80% { transform: scaleY(.9); } }
@keyframes emHopLie { 0% { transform: none; } 12% { transform: scaleY(.85); } 40% { transform: translateY(-34px); } 70% { transform: translateY(-6px) scaleY(.7) scaleX(1.12); } 100% { transform: translateY(-6px) scaleY(.6) scaleX(1.15); } }
@keyframes emLie { to { transform: scaleY(.6) scaleX(1.15); } }
@keyframes emFlat { to { transform: scaleY(.42) scaleX(1.35); } }
@keyframes emSpinLie { 0% { transform: none; } 15% { transform: scaleX(-1); } 30% { transform: none; } 45% { transform: scaleX(-1); } 60% { transform: none; } 75% { transform: scaleX(-1); } 100% { transform: scaleY(.6) scaleX(1.15); } }
@keyframes emScratch { from { transform: rotate(-5deg); } to { transform: rotate(5deg) translateY(-3px); } }
@keyframes emSwipe { 0%, 100% { transform: none; } 40% { transform: rotate(9deg) translateX(5px); } 60% { transform: rotate(-3deg); } }
@keyframes emPush { 0%, 100% { transform: rotate(6deg) translateX(3px); } 50% { transform: rotate(10deg) translateX(6px) scaleY(.95); } }
@keyframes emSniff { 0%, 100% { transform: none; } 50% { transform: rotate(5deg) translateY(2px); } }
@keyframes emRub { 0%, 100% { transform: rotate(-5deg) translateX(-3px); } 50% { transform: rotate(5deg) translateX(3px); } }
@keyframes emStare { to { transform: rotate(4deg) scaleY(.95); } }
@keyframes emTurn { to { transform: scaleX(-1); } }
@keyframes emStretch { 0%, 100% { transform: none; } 40%, 60% { transform: scaleX(1.25) scaleY(.82); } }
.beanfront { position: absolute; z-index: 4; left: 0; top: 0; width: 960px; height: 420px; pointer-events: none; transition: opacity .25s; }