:root { --pink: #ff4fd8; --cyan: #59f0ff; --mint: #7dffb0; --lav: #b28aff; --yellow: #ffe36b; --ink: #f4ecff; --bg: #0b0812; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--ink); font-family: Nunito, system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#c { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
kbd { display: inline-block; min-width: 1.6em; padding: 0.05em 0.45em; border-radius: 6px; background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.35); border-bottom-width: 3px; font: 800 0.85em Nunito, sans-serif; text-align: center; }
button { font: 800 1.1rem Nunito, sans-serif; color: #fff; cursor: pointer; border: 0; border-radius: 14px; padding: 0.8em 1.6em; background: linear-gradient(135deg, #ff4fd8, #a46bff); box-shadow: 0 0 24px rgba(255,79,216,0.45), inset 0 -3px 0 rgba(0,0,0,0.25); transition: transform .15s, box-shadow .15s; }
button:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 34px rgba(255,79,216,0.75), inset 0 -3px 0 rgba(0,0,0,0.25); }
button.ghost { background: rgba(255,255,255,0.08); box-shadow: none; font-size: 0.95rem; }
label { display: flex; justify-content: space-between; align-items: center; gap: 1em; margin: 0.5em 0; font-weight: 700; font-size: 0.95rem; }
input[type=range] { accent-color: var(--pink); width: 50%; }
select { font: 700 0.95rem Nunito; background: #1c1428; color: #fff; border: 1px solid #5a3a7a; border-radius: 8px; padding: 0.3em 0.6em; }

/* ───── Titel ───── */
#title { position: fixed; inset: 0; z-index: 50; transition: opacity 1.6s; }
#title.gone { opacity: 0; pointer-events: none; }
#title .art { position: absolute; inset: 0; background: url(assets/img/keyart.jpg) center/cover; animation: kenburns 40s ease-in-out infinite alternate; }
#title::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,5,14,0.92) 0%, rgba(8,5,14,0.65) 38%, rgba(8,5,14,0) 70%), linear-gradient(0deg, rgba(8,5,14,0.8), transparent 30%); pointer-events: none; }
@keyframes kenburns { from { transform: scale(1.04) translate(0, 0); } to { transform: scale(1.14) translate(-2%, -1.5%); } }
#loading { position: absolute; z-index: 2; left: 50%; bottom: 12%; transform: translateX(-50%); width: min(420px, 80vw); text-align: center; transition: opacity .6s; }
#loading.done { opacity: 0; pointer-events: none; }
.lt { font-weight: 800; letter-spacing: .08em; margin-bottom: .6em; color: var(--cyan); text-shadow: 0 0 12px var(--cyan); }
.lb { height: 6px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; }
.lb i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cyan), var(--pink)); box-shadow: 0 0 12px var(--pink); transition: width .3s; }
#menu { position: absolute; z-index: 2; left: max(5vw, 24px); top: 50%; transform: translateY(-50%); width: min(470px, 90vw); display: flex; flex-direction: column; align-items: flex-start; gap: 0.75em; opacity: 0; pointer-events: none; transition: opacity 1.2s .2s; max-height: 96vh; overflow: auto; }
#menu.on { opacity: 1; pointer-events: auto; }
#menu { overflow-x: visible; } .logo { font: 800 clamp(2.4rem, 6.2vw, 4.3rem)/0.95 'Baloo 2', sans-serif; letter-spacing: 0.02em; color: #fff; text-shadow: 0 0 6px #fff, 0 0 18px var(--pink), 0 0 42px var(--pink), 0 0 80px #c02aa0; animation: neon 6s infinite; white-space: nowrap; }
.logo .star { color: var(--cyan); text-shadow: 0 0 10px var(--cyan), 0 0 40px var(--cyan); margin-right: 0.12em; display: inline-block; animation: spin 9s linear infinite; }
.logo.small { font-size: 2.6rem; }
@keyframes neon { 0%, 18%, 22%, 62%, 64%, 100% { opacity: 1; } 20%, 63% { opacity: 0.35; } }
@keyframes spin { to { transform: rotate(360deg); } }
.sub { font: 700 1.25rem Nunito; color: #ddd; margin-bottom: 0.8em; } .sub b { color: var(--yellow); font-family: 'Permanent Marker', cursive; font-weight: 400; letter-spacing: .03em; }
#menu > button { min-width: 240px; }
#menu details { width: 100%; background: rgba(20,12,32,0.7); border: 1px solid rgba(178,138,255,0.3); border-radius: 12px; padding: 0.4em 1em; backdrop-filter: blur(6px); }
#menu summary { cursor: pointer; font-weight: 800; padding: 0.3em 0; }
.keys { line-height: 2; font-size: 0.9rem; }
.fsk { display: flex; gap: 0.8em; align-items: center; margin-top: 0.6em; font-size: 0.85rem; color: #ccc; }
.fsk b { flex: none; width: 2.6em; height: 2.6em; display: grid; place-items: center; border-radius: 6px; background: #1a7cd8; color: #fff; font: 900 1.3rem Nunito; box-shadow: 0 0 0 3px #fff; }
.for { font-family: 'Permanent Marker', cursive; color: var(--pink); font-size: 1.15rem; transform: rotate(-2deg); margin-top: 0.4em; text-shadow: 0 0 10px rgba(255,79,216,.6); }

/* ───── HUD ───── */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
#cross { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: rgba(255,255,255,0.75); box-shadow: 0 0 4px #000; transition: all .15s; }
#cross.use { width: 22px; height: 22px; margin: -11px; background: transparent; border: 2px solid var(--yellow); box-shadow: 0 0 10px var(--yellow); }
#cross.paw { width: 28px; height: 28px; margin: -14px; background: none; box-shadow: none; }
#cross.paw::after { content: '🐾'; position: absolute; inset: 0; font-size: 22px; display: grid; place-items: center; filter: drop-shadow(0 0 6px #ffe36b); }
#prompt { position: absolute; left: 50%; top: calc(50% + 34px); transform: translateX(-50%); font-weight: 800; font-size: 1.05rem; text-shadow: 0 2px 6px #000, 0 0 3px #000; opacity: 0; transition: opacity .2s; white-space: nowrap; }
#prompt.on { opacity: 1; }
#objective { position: absolute; left: 24px; top: 20px; max-width: min(460px, 70vw); font-weight: 800; font-size: 1.05rem; text-shadow: 0 2px 6px #000; padding-left: 14px; border-left: 3px solid var(--pink); }
#objective span { display: block; font-size: 0.7rem; letter-spacing: 0.25em; text-transform: uppercase; color: var(--pink); }
#objective.pulse { animation: pulse 1.4s; }
@keyframes pulse { 0% { transform: translateX(-30px); opacity: 0; } 30% { transform: none; opacity: 1; } 50% { color: var(--yellow); } }
#cards { position: absolute; right: 22px; top: 18px; display: flex; gap: 8px; opacity: 0; transition: opacity .5s; }
#cards.on { opacity: 1; }
#cards .card { width: 42px; height: 68px; border-radius: 6px; background: center/cover; filter: grayscale(1) brightness(0.25); border: 2px dashed rgba(255,255,255,.35); transition: all .5s; }
#cards .c1 { background-image: url(assets/img/card1.jpg); } #cards .c2 { background-image: url(assets/img/card2.jpg); } #cards .c3 { background-image: url(assets/img/card3.jpg); }
#cards .card.have { filter: none; border: 2px solid #fff; box-shadow: 0 0 14px var(--pink); }
#stamina { position: absolute; left: 50%; bottom: 46px; width: 180px; height: 5px; margin-left: -90px; border-radius: 3px; background: rgba(255,255,255,0.12); opacity: 0; transition: opacity .4s; overflow: hidden; }
#stamina.show { opacity: 1; }
#stamina i { display: block; height: 100%; width: calc(var(--k) * 100%); background: var(--cyan); box-shadow: 0 0 8px var(--cyan); }
#stamina.tired i { background: #ff4a5a; }
#pawcd { position: absolute; right: 26px; bottom: 120px; width: 54px; height: 54px; display: grid; place-items: center; font-size: 26px; border-radius: 50%; background: conic-gradient(rgba(255,227,107,0.85) calc(var(--k) * 360deg), rgba(0,0,0,0.5) 0); opacity: 0; transition: opacity .3s; }
#pawcd.show { opacity: 1; }
#hint { position: absolute; left: 50%; bottom: 120px; transform: translate(-50%, 10px); max-width: min(640px, 90vw); text-align: center; padding: 0.6em 1.1em; border-radius: 12px; background: rgba(15,10,25,0.78); border: 1px solid rgba(178,138,255,0.4); font-weight: 700; opacity: 0; transition: all .35s; }
#hint.on { opacity: 1; transform: translate(-50%, 0); }
#thought { position: absolute; left: 50%; bottom: 175px; transform: translateX(-50%); max-width: min(700px, 90vw); text-align: center; font: italic 700 1.15rem Nunito; color: #e6dcff; text-shadow: 0 2px 8px #000, 0 0 2px #000; opacity: 0; transition: opacity .4s; }
#thought.on { opacity: 1; }
#thought::before { content: 'Mette: '; font-style: normal; color: var(--cyan); }
#subtitle { position: absolute; left: 50%; bottom: 70px; transform: translateX(-50%); max-width: min(820px, 92vw); text-align: center; font-weight: 700; font-size: 1.12rem; padding: 0.35em 0.8em; background: rgba(0,0,0,0.55); border-radius: 8px; opacity: 0; transition: opacity .3s; }
#subtitle.on { opacity: 1; }
#subtitle b { margin-right: 0.3em; } .who-j { color: #ff6ad5; } .who-d { color: #7dffb0; } .who-a { color: var(--yellow); } .who-t { color: #c9b3ff; }
#cardShow { position: absolute; left: 50%; top: 50%; width: 180px; height: 292px; margin: -146px -90px; background: center/cover; border-radius: 12px; box-shadow: 0 0 40px var(--pink), 0 0 0 3px #fff; opacity: 0; pointer-events: none; }
#cardShow.on { animation: cardin 2.4s forwards; }
@keyframes cardin { 0% { opacity: 0; transform: scale(0.3) rotateY(180deg); } 20% { opacity: 1; transform: scale(1.1) rotateY(0); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: translate(calc(50vw - 160px), calc(-50vh + 70px)) scale(0.2); } }
.bars i { position: absolute; left: 0; right: 0; height: 0; background: #000; transition: height .8s; }
.bars i:first-child { top: 0; } .bars i:last-child { bottom: 0; }
body.cine .bars i { height: 9vh; }
body.cine #cross, body.cine #prompt, body.cine #objective { opacity: 0; }
#intro { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; pointer-events: none; opacity: 0; transition: opacity 1s; }
#intro.on { opacity: 1; }
#intro p { font: 700 clamp(1.1rem, 2.6vw, 1.7rem) Nunito; max-width: 80vw; text-align: center; animation: introLine 2.6s ease both; text-shadow: 0 0 20px rgba(178,138,255,0.6); }
@keyframes introLine { from { opacity: 0; letter-spacing: 0.15em; filter: blur(6px); } to { opacity: 1; letter-spacing: 0.02em; filter: none; } }

/* ───── Overlays ───── */
.overlay { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(5,3,10,0.82); backdrop-filter: blur(6px); opacity: 0; pointer-events: none; transition: opacity .4s; }
.overlay.on { opacity: 1; pointer-events: auto; }
.panel { width: min(440px, 90vw); padding: 1.8em; border-radius: 20px; background: rgba(25,15,40,0.92); border: 1px solid rgba(255,79,216,0.35); box-shadow: 0 0 60px rgba(255,79,216,0.2); text-align: center; display: flex; flex-direction: column; gap: 0.8em; }
.panel h2 { margin: 0; font: 800 2rem 'Baloo 2'; }
#death { background: radial-gradient(circle, rgba(60,0,10,0.75), rgba(0,0,0,0.95)); }
#death h1 { margin: 0; font: 400 clamp(3rem, 10vw, 5rem) 'Permanent Marker', cursive; color: #ff2a3a; text-shadow: 0 0 30px #ff0018; animation: shake .5s; }
#deathWho { font: italic 800 1.3rem Nunito; color: #ff9ad8; }
#deathTip { color: #ddd; line-height: 1.5; }
@keyframes shake { 0%, 100% { transform: none; } 20% { transform: translate(-8px, 3px) rotate(-2deg); } 40% { transform: translate(7px, -4px) rotate(2deg); } 60% { transform: translate(-5px, 2px); } }

/* ───── Ende und Abspann ───── */
#ending { position: fixed; inset: 0; z-index: 60; background: #000; opacity: 0; pointer-events: none; transition: opacity 2.5s; overflow: hidden; }
#ending.on { opacity: 1; pointer-events: auto; }
#ending .img { position: absolute; inset: 0; background: url(assets/img/ending.jpg) center/cover; animation: kenburns 60s ease-out forwards; }
#ending::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,0.75), transparent 45%); pointer-events: none; }
#ending .msg { position: absolute; left: 0; right: 0; bottom: 12vh; z-index: 2; text-align: center; text-shadow: 0 2px 14px #000; transition: opacity 2s; }
#ending .msg h2 { font: 800 clamp(2.4rem, 7vw, 4rem) 'Baloo 2'; margin: 0; color: #fff3d6; }
#ending .msg p { font: 700 1.25rem Nunito; }
#ending.roll .msg { opacity: 0; }
#ending .credits { position: absolute; inset: 0; z-index: 3; overflow: hidden; background: linear-gradient(90deg, transparent 40%, rgba(0,0,0,0.7)); opacity: 0; transition: opacity 2s; }
#ending.roll .credits { opacity: 1; }
#ending .roll { position: absolute; right: 6vw; width: min(460px, 86vw); top: 100%; text-align: center; text-shadow: 0 2px 8px #000; }
#ending.roll .roll { animation: roll 80s linear forwards; }
@keyframes roll { to { transform: translateY(calc(-100% - 100vh)); } }
#ending .roll h3 { font: 400 2rem 'Permanent Marker'; color: var(--pink); margin: 1.2em 0; }
#ending .roll h4 { color: var(--cyan); letter-spacing: .2em; text-transform: uppercase; margin: 2.5em 0 0.6em; }
#ending .roll dt { font: 800 1.3rem 'Baloo 2'; color: var(--yellow); margin-top: 1.2em; }
#ending .roll dd { margin: 0; color: #eee; }
#ending .roll .cap { color: #ccc; }
#ending .roll .big { font: 800 1.8rem 'Baloo 2'; margin-top: 3em; }
#postcredits { position: absolute; inset: 0; z-index: 5; background: #000; display: grid; place-content: center; text-align: center; gap: 1.2em; opacity: 0; pointer-events: none; transition: opacity 2s; }
#postcredits.on { opacity: 1; pointer-events: auto; }
#postcredits .a { font: 400 clamp(1.4rem, 4vw, 2.4rem) 'Permanent Marker'; color: #ff4fd8; text-shadow: 0 0 20px #ff4fd8; }
#postcredits .b, #postcredits button { opacity: 0; transition: opacity 2s 1s; }
#postcredits.two .b, #postcredits.two button { opacity: 1; }
#postcredits .b { font: 800 1.4rem Nunito; letter-spacing: .3em; } #postcredits .b b { color: var(--lav); }
#postcredits button { justify-self: center; }

/* ───── Touch ───── */
#touch { position: fixed; inset: 0; z-index: 9; display: none; }
body.touch #touch { display: block; }
body.touch #title ~ #touch { }
#stick { position: absolute; width: 130px; height: 130px; margin: -65px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.05); opacity: 0; left: 18vw; top: 70vh; transition: opacity .2s; }
#stick.on { opacity: 1; }
#knob { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px; border-radius: 50%; background: rgba(255,255,255,0.35); }
.tbtns { position: absolute; right: 16px; bottom: 16px; display: grid; grid-template-columns: repeat(3, 64px); gap: 10px; }
.tbtns button { width: 64px; height: 64px; padding: 0; border-radius: 50%; font-size: 26px; background: rgba(30,20,50,0.55); box-shadow: none; border: 2px solid rgba(255,255,255,0.25); }
.tbtns button.on { background: rgba(255,79,216,0.6); }
.tbtns .small { position: fixed; top: 14px; right: 50%; transform: translateX(50%); width: 44px; height: 44px; font-size: 18px; }
body.touch #objective { font-size: 0.9rem; left: 14px; top: 12px; }
body.touch #cards { top: 64px; }
@media (max-width: 700px) { #menu { left: 16px; right: 16px; width: auto; } #title::after { background: linear-gradient(0deg, rgba(8,5,14,0.95) 35%, rgba(8,5,14,0.35)); } #menu { top: auto; bottom: 16px; transform: none; } }
body.cine .tbtns { opacity: 0.25; pointer-events: none; }
#legend { position: absolute; right: 16px; bottom: 12px; font-size: 0.78rem; font-weight: 700; color: rgba(255,255,255,0.6); text-shadow: 0 1px 3px #000; }
#legend kbd { margin-left: 0.6em; font-size: 0.75rem; }
body.touch #legend, body.cine #legend { display: none; }