RAZAM_It's 100 seconds to Midnight

Browser lacks capabilities required to play.

Upgrade or switch to another browser.

Loading…

<h2>It is 100 seconds to Midnight</h2><h5>by Anastasiia Nasonkina and Oleg Hristolübskiy</h5><h6>work-and-progress version for Vorspiel 2026</h6> <span class="btn">[[START->START2]]</span>

<<audio "testTrack" play loop>> Выбери один из вариантов ответа. [[Ответ 1->AUDIO_OUT_1]] [[Ответ 2->AUDIO_OUT_2]] [[Ответ 3->AUDIO_OUT_3]] [[Ответ 4->AUDIO_OUT_4]] [[TO THE FIRST SCREEN->OLD START]]

<<set $lives = 10>> <<set $music = "">> <<set $lang = "">> <<set $hudOn = false>> <<cacheaudio "Ch0ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/00.mp3">> <<cacheaudio "Ch1ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/01.mp3">> <<cacheaudio "Ch2ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/02.mp3">> <<cacheaudio "Ch3ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/03.mp3">> <<cacheaudio "Ch4ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/04.mp3">> <<cacheaudio "Ch5ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/05.mp3">> <<cacheaudio "Ch6ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/06.mp3">> <<cacheaudio "Ch7ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/07.mp3">> <<cacheaudio "Ch8ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/08.mp3">> <<cacheaudio "Ch9ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/09.mp3">> <<cacheaudio "Ch10ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/10.mp3">> <<cacheaudio "Ch11ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/11.mp3">> <<cacheaudio "Ch12ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/12.mp3">> <<cacheaudio "Ch13ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/13.0.mp3">> <<cacheaudio "Ch13.1ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/13.1.mp3">> <<cacheaudio "Ch14ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/14.mp3">> <<cacheaudio "Ch15_GOOD_ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/15.2GOOD.mp3">> <<cacheaudio "Ch15_BAD_ENG" "https://100-audio-gateway.khristolyubskii-production.workers.dev/audio/15.1BAD.mp3">>

И мы пришли в финал! Ура! [[TO THE FIRST SCREEN->OLD START]]

<<audio "testTrack" fadeoverto 2 0>> <<timed 2s>><<goto "NEXT_1">><</timed>>

<<audio "testTrack" fadeoverto 2 0>> <<timed 2s>><<goto "NEXT_2">><</timed>>

<<audio "testTrack" fadeoverto 2 0>> <<timed 2s>><<goto "NEXT_3">><</timed>>

<<audio "testTrack" fadeoverto 2 0>> <<timed 2s>><<goto "NEXT_4">><</timed>>

<div class="qwin"> <div class="qtext">Choose your language / Sprache auswählen</div> <div class="answer-grid"> <span class="btn">[[English->EnglishName]]</span> <span class="btn">[[Deutsch->DeutschName]]</span></div> </div>

It is Для запуска - пожалуйста нажми <span class="start-btn">[[START->AUDIO]]</span>

<<set $lang = "en">> <div class="qwin"> What is your name? <<textbox "$playerName" "" autocapitalize autofocus>> <span class="btn">[[CONTINUE->Chapter_0ENG]]</span> </div>

<<set $lang = "de">> <div class="qwin"> Wie heißt du? <<textbox "$playerName" "">> <span class="btn">[[WEITER->Chapter_0DE]]</span> </div>

<h2>Chapter 0</h2> <<set $hudOn = true>> <<run setup.setFace("neutral")>> <<set $music = "Ch0ENG">> <<audio $music play >> <div class="qwin"> <span id="qline">Hello, $playerName.</span> <<timed 80s>> <<replace "#qline">>Please respond: do you understand these rules, $playerName?<</replace>><span class="btn">[[YES->Chapter_0.1ENG]]</span> <</timed>> </div>

<<set $hudOn = true>> <<run setup.setFace("neutral")>> <<set $music = "Ch0DE">> <<audio $music play >> <div class="qwin"> Hallo, $playerName. <<timed 5s>> Bitte antworte: hast du diese Regeln verstanden, $playerName? <span class="btn">[[JA->Chapter_0.1DE]]</span> <</timed>> </div>

<<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "Chapter_1ENG">><</timed>>

<<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "Chapter_1DE">><</timed>>

<h1>Kapitel 1</h1> <<set $music = "Ch1DE">> <<audio $music play loop>> <<timed 5s>> <div class="qwin"> Was hörst du jetzt, $playerName? <div class="answer-grid"> <span class="btn">[[Den Herzschlag der Mutter->Chapter_1.1DE]]</span> <span class="btn">[[Das Rattern von Rädern->Das Rattern von Rädern]]</span><span class="btn">[[Kuckuck->Kuckuck]]</span><span class="btn">[[Countdown->CountdownDE]]</span></div> </div> <</timed>>

<<run setup.setFace("sad")>> <div class="qwin"> No, that's not correct. Try again. What do you hear now, $playerName? <div class="answer-grid"> <span class="btn">[[Mother's heartbeat->Chapter_1.1ENG]]</span> <span class="btn">[[The clatter of wheels->Clatter_of_Wheels]]</span><span class="btn">[[Cuckoo->Cuckoo]]</span><span class="btn">[[Countdown->Countdown]]</span></div> </div>

<<run setup.setFace("sad")>> <div class="qwin"> You have incorrectly identified the sound. System malfunction. Game over. Just kidding. What do you hear now, $playerName? <div class="answer-grid"> <span class="btn">[[Mother's heartbeat->Chapter_1.1ENG]]</span> <span class="btn">[[The clatter of wheels->Clatter_of_Wheels]]</span><span class="btn">[[Cuckoo->Cuckoo]]</span><span class="btn">[[Countdown->Countdown]]</span></div> </div>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">Yes, that's right. This is what you felt first of all.</div> <<timed 6s>><<goto "Chapter_2ENG">><</timed>>

<h2>Chapter 2</h2> <<run setup.setFace("neutral")>> <<set $music = "Ch2ENG">> <<audio $music play>> <<timed 40s>> <div class="qwin">$playerName, and who talks like that, sweetheart? <div class="answer-grid"> <span class="btn">[[Elephanty->Elephanty]]</span><span class="btn">[[Horsey->Horsey]]</span><span class="btn">[[Doggy->Chapter_2.1ENG]]</span><span class="btn">[[Moo-cow->Moo-cow]]</span></div> </div><</timed>>

<h2>Chapter 1</h2> <<set $music = "Ch1ENG">> <<audio $music play>> <<timed 160s>> <div class="qwin"> What do you hear now, $playerName? <div class="answer-grid"> <span class="btn">[[Mother's heartbeat->Chapter_1.1ENG]]</span> <span class="btn">[[The clatter of wheels->Clatter_of_Wheels]]</span><span class="btn">[[Cuckoo->Cuckoo]]</span><span class="btn">[[Countdown->Countdown]]</span></div> </div> <</timed>>

<h2>The game is finished</h2> <<run setup.setFace("win")>> <<set $music = "Ch15_GOOD_ENG">> <<audio $music play >> <<timed 15s>> <div class="qwin">Congratulations. You lost, but you won our game. When you finish listening to the track, please press the next button. <span class="btn">[[NEXT->FINAL_MESSAGE]]</span></div> <</timed>>

<<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "GameOver_GOOD_ENG">><</timed>>

<<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "GameOver_GOOD_DE">><</timed>>

<h1>FINAL DE</h1> <<run setup.setFace("win")>> <<set $music = "Ch15_GOOD_DE">> <<audio $music play >> <<timed 10s>> <h1>Thank you for being with us today. You won this game.</h1> <</timed>>

<<if $lang == "de">> <<goto "GameOverDE_FADE">> <<else>> <<goto "GameOverENG_FADE">> <</if>>

<<run setup.setFace("neutral")>> <<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "Chapter_2DE">><</timed>>

<h1>Kapitel 1</h1> <<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <div class="qwin"> Nein, das ist nicht richtig. Versuch's nochmal. Was hörst du jetzt, $playerName? <div class="answer-grid"> <span class="btn">[[Den Herzschlag der Mutter->Chapter_1.1DE]]</span> <span class="btn">[[Das Rattern von Rädern->Das Rattern von Rädern]]</span><span class="btn">[[Kuckuck->Kuckuck]]</span><span class="btn">[[Countdown->CountdownDE]]</span></div> </div>

<h1>Kapitel 1</h1> <<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <div class="qwin"> Du hast das Geräusch falsch identifiziert. Systemfehler. Game over. War nur Spaß. Was hörst du jetzt, $playerName? <div class="answer-grid"> <span class="btn">[[Den Herzschlag der Mutter->Chapter_1.1DE]]</span> <span class="btn">[[Das Rattern von Rädern->Das Rattern von Rädern]]</span><span class="btn">[[Kuckuck->Kuckuck]]</span><span class="btn">[[Countdown->CountdownDE]]</span></div> </div>

<h1>Kapitel 2</h1>

/* кнопки */ .btn a.link-internal { display: inline-block; padding: 14px 28px; border: 2px solid #4b6cff; border-radius: 8px; text-decoration: none; text-transform: uppercase; letter-spacing: 0.15em; font-weight: 700; } .btn a.link-internal:hover { background: #4b6cff; color: #000; } /* 2×2 сетка — делаем максимально специфично под SugarCube */ .answer-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px 24px !important; max-width: 900px !important; margin: 40px auto 0 !important; /* КЛЮЧ: не даём внешним flex-стилям влиять */ justify-items: stretch !important; align-items: stretch !important; } .answer-grid .btn { /* КЛЮЧ: делаем элементом сетки с явной шириной */ display: block !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; } .answer-grid .btn a.link-internal { display: flex !important; /* чтобы текст центрировался независимо */ align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; text-align: center !important; } /* ЛИЦО — левый верх */ #hud-face-wrap{ position: fixed; top: 12px; left: 12px; z-index: 9999; pointer-events: none; } #hud-face{ width: 56px; height: 56px; object-fit: contain; }

// картинка одной жизни lifeIcon:"/Users/oleg_khristolyubskii/Documents/03 - Work/04 - Theater/04 - 100 seconds/28.01.26_Razam/images/life.png", // лица (ключ -> путь) faces: { neutral:"/Users/oleg_khristolyubskii/Documents/03 - Work/04 - Theater/04 - 100 seconds/28.01.26_Razam/images/face_neutral.png", happy:"/Users/oleg_khristolyubskii/Documents/03 - Work/04 - Theater/04 - 100 seconds/28.01.26_Razam/images/face_happy.png", sad:"/Users/oleg_khristolyubskii/Documents/03 - Work/04 - Theater/04 - 100 seconds/28.01.26_Razam/images/face_sad.png", win:"/Users/oleg_khristolyubskii/Documents/03 - Work/04 - Theater/04 - 100 seconds/28.01.26_Razam/images/face_win.png", cry:"/Users/oleg_khristolyubskii/Documents/03 - Work/04 - Theater/04 - 100 seconds/28.01.26_Razam/images/face_cry.png", indifferent:"/Users/oleg_khristolyubskii/Documents/03 - Work/04 - Theater/04 - 100 seconds/28.01.26_Razam/images/face_indifferent.png", }, // картинка одной жизни lifeIcon:"images/life.png", // лица (ключ -> путь) faces: { neutral:"images/face_neutral.png", happy:"images/face_happy.png", sad:"images/face_sad.png", win:"images/face_win.png", cry:"images/face_cry.png", indifferent:"images/face_indifferent.png", },

<<run setup.setFace("sad")>> <div class="qwin">You made a mistake, buddy, it's nothing terrible. Try again. $playerName, and who talks like that, sweetheart? <div class="answer-grid"> <span class="btn">[[Elephanty->Elephanty]]</span><span class="btn">[[Horsey->Horsey]]</span><span class="btn">[[Doggy->Chapter_2.1ENG]]</span><span class="btn">[[Moo-cow->Moo-cow]]</span></div> </div>

<<run setup.setFace("sad")>> <div class="qwin">Your little finger just landed in the wrong place. Let's try again. $playerName, and who talks like that, sweetheart? <div class="answer-grid"> <span class="btn">[[Elephanty->Elephanty]]</span><span class="btn">[[Horsey->Horsey]]</span><span class="btn">[[Doggy->Chapter_2.1ENG]]</span><span class="btn">[[Moo-cow->Moo-cow]]</span></div> </div>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">What a smart one you are, what a clever little person is growing up.</div> <<timed 6s>><<goto "Chapter_3ENG">><</timed>>

<<run setup.setFace("sad")>> <div class="qwin">What a good job you're doing. Pressing the button. But that's not the right button. Try another one. $playerName, and who talks like that, sweetheart? <div class="answer-grid"> <span class="btn">[[Elephanty->Elephanty]]</span><span class="btn">[[Horsey->Horsey]]</span><span class="btn">[[Doggy->Chapter_2.1ENG]]</span><span class="btn">[[Moo-cow->Moo-cow]]</span></div> </div>

<h2>Chapter 3</h2> <<run setup.setFace("neutral")>> <<set $music = "Ch3ENG">> <<audio $music play>> <<timed 28s>> <div class="qwin">What do you hear? <div class="answer-grid"> <span class="btn">[[Die Lore-Ley by Heinrich Heine->Lore-Ley]]</span><span class="btn">[[I don’t know->I don’t know]]</span><span class="btn">[[I don’t know. I didn't study in a German school->study]]</span><span class="btn">[[Grundgesetz für die Bundesrepublik Deutschland->GrundENG]]</span></div> </div> <</timed>>

<<run setup.setFace("neutral")>> <<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "Chapter_4ENG">><</timed>>

<<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <div class="qwin"><span id="qline">Ignorance doesn't exempt you from responsibility. Somehow do better next time.</span> <<timed 6s>><<replace "#qline">>From now on, incorrect answers will cost you lives. If you lose them all, the game will stop<</replace>><</timed>> <<timed 15s>><<goto "Chapter_3.1ENG">><</timed>></div>

<<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <div class="qwin"><span id="qline">No, it's Grundgesetz. The foundation of our society. You really should know such things.</span> <<timed 6s>><<replace "#qline">>From now on, incorrect answers will cost you lives. If you lose them all, the game will stop<</replace>><</timed>> <<timed 15s>><<goto "Chapter_3.1ENG">><</timed>></div>

<<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <div class="qwin"><span id="qline">Too bad. You should've integrated. Since you're here after all, right</span> <<timed 6s>><<replace "#qline">>From now on, incorrect answers will cost you lives. If you lose them all, the game will stop.<</replace>><</timed>> <<timed 15s>><<goto "Chapter_3.1ENG">><</timed>></div>

<h2>Chapter 4</h2> <<set $music = "Ch4ENG">> <<audio $music play>> <<timed 35s>> <div class="qwin">$playerName, which side will you choose? <div class="answer-grid"> <span class="btn">[[Girls->Correct]]</span><span class="btn">[[Boys->Correct]]</span><span class="btn">[[Other->Other]]</span></div> </div><</timed>>

<<run setup.setFace("happy")>> <div class="qwin">That's the correct answer! Well done! And do you know the next chapter too? <<timed 6s>><<goto "Chapter_3.1ENG">><</timed>></div>

<<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <div class="qwin">Maybe you should go see the school psychologist? Try again. $playerName, so, which side will you choose? <div class="answer-grid"> <span class="btn">[[Girls->Correct]]</span><span class="btn">[[Boys->Correct]]</span><span class="btn">[[Other->Other]]</span></div> </div>

<h2>Chapter 6</h2> <<run setup.setFace("neutral")>> <<set $music = "Ch6ENG">> <<audio $music play>> <<timed 30s>> <div class="qwin">$playerName, do you like that song? <div class="answer-grid"> <span class="btn">[[Yes->Chapter_6.1ENG]]</span><span class="btn">[[No->Chapter_6.1ENG]]</span></div> </div> <</timed>>

<h2>Chapter 5</h2> <<run setup.setFace("neutral")>> <<set $music = "Ch5ENG">> <<audio $music play>> <<timed 40s>> <div class="qwin">Tell me please, where have you been? Think carefully! <div class="answer-grid"> <span class="btn">[[I was at a Last Generation rally.->Protest]]</span><span class="btn">[[I supported Alternative for Germany.->Protest]]</span></div> </div><</timed>>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">Gender socialization is an interesting process. I'm a bot. I don't have a gender, but I'm easy to reprogram.</div> <<timed 6s>><<goto "Chapter_5ENG">><</timed>>

<<run setup.setFace("happy")>> <div class="qwin"><span id="qline">That's right. But sometimes we have to be careful with others, right?</span> <<timed 6s>><<replace "#qline">>So, tell me one more time, please, where have you been? Think carefully!<</replace>> <div class="answer-grid"> <span class="btn">[[I was at a party!->Chapter_5.1ENG]]</span><span class="btn">[[I was drawing graffiti.->Chapter_5.1ENG]]</span><span class="btn">[[I spent the weekend at Berghain->Chapter_5.1ENG]]</span><span class="btn">[[I went hiking in the mountains->Chapter_5.1ENG]]</span></div><</timed>></div>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">That's the correct answer.</div> <<timed 6s>><<goto "Chapter_6ENG">><</timed>>

<h2>Chapter 8</h2> <<run setup.setFace("neutral")>> <<set $music = "Ch8ENG">> <<audio $music play>> <<timed 45s>> <div class="qwin">Interesting, what's this? Should we participate in this? <div class="answer-grid"> <span class="btn">[[Unsolvable problem->Problem]]</span><span class="btn">[[Don't want to get into it.->Dontwant]]</span><span class="btn">[[This is what an energy-political and economic necessity sounds like->ecomoic]]</span><span class="btn">[[Environmental catastrophe.->catastrophe]]</span></div> </div> <</timed>>

<h2>Chapter 7</h2> <<run setup.setFace("neutral")>> <<set $music = "Ch7ENG">> <<audio $music play>> <<timed 60s>> <div class="qwin">What is that? Very close. Near you. <div class="answer-grid"> <span class="btn">[[Water drops from the tap->Water]]</span><span class="btn">[[Metronome->SmthWrong]]</span><span class="btn">[[Geiger counter->SmthWrong]]</span><span class="btn">[[Ticking of a clock->Clock]]</span></div> </div> <</timed>>

<div class="qwin">$playerName, do you know about what that song? <div class="answer-grid"> <span class="btn">[[About the bright future of my country.->Future]]</span><span class="btn">[[It's a song about nature.->SongWrong]]</span> <span class="btn">[[It's a Nazi anthem.->Nazi]]</span><span class="btn">[[Is it back to the future?->SongWrong]]</span></div> </div>

<<run setup.setFace("happy")>> <div class="qwin">And if I tell you it was a Nazi anthem, could you agree with me, $playerName? <div class="answer-grid"> <span class="btn">[[Yes.]]</span><span class="btn">[[No.]]</span> <span class="btn"></span></div> </div>

<<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <div class="qwin">No, that's not right. Choose the right side. $playerName, do you know about what that song? <div class="answer-grid"> <span class="btn">[[About the bright future of my country.->Future]]</span><span class="btn">[[It's a song about nature.->SongWrong]]</span> <span class="btn">[[It's a Nazi anthem.->Nazi]]</span><span class="btn">[[Is it back to the future?->SongWrong]]</span></div> </div>

<<run setup.setFace("happy")>> <div class="qwin">If I tell you, the correct answer is: "It's a song about a bright future." Can you agree with me, $playerName? <div class="answer-grid"> <span class="btn">[[Yes.]]</span><span class="btn">[[No.]]</span> <span class="btn"></span></div> </div>

<<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <<audio $music fadeoverto 2 0>> <div class="qwin">Wrong! You need to be more confident in your side.</div> <<timed 6s>><<goto "Chapter_7ENG">><</timed>>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">I'm glad you're confident in yourself.</div> <<timed 6s>><<goto "Chapter_7ENG">><</timed>>

<<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <div class="qwin">Try again. What is that? Very close. Near you. <div class="answer-grid"> <span class="btn">[[Water drops from the tap->Water]]</span><span class="btn">[[Metronome->SmthWrong]]</span><span class="btn">[[Geiger counter->SmthWrong]]</span><span class="btn">[[Ticking of a clock->Clock]]</span></div> </div>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">Of course, it's just water dripping. Nothing terrible. Everything's fine.</div> <<timed 6s>><<goto "Chapter_8ENG">><</timed>>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">Of course, it's just a clock. Nothing terrible. Calm down.</div> <<timed 6s>><<goto "Chapter_8ENG">><</timed>>

<<run setup.loseLife(1)>> <<run setup.setFace("sad")>> <div class="qwin">This is the wrong answer. There are no unsolvable problems. You need to choose a side. Please choose the correct answer, otherwise the game won't continue. <div class="answer-grid"> <span class="btn">[[I believe there's no black and white.->Problem2]]</span><span class="btn">[[Don't want to get into it.->Dontwant]]</span><span class="btn">[[This is what an energy-political and economic necessity sounds like->ecomoic]]</span><span class="btn">[[Environmental catastrophe.->catastrophe]]</span></div> </div>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">That's right. You've got enough problems of your own.</div> <<timed 6s>><<goto "Chapter_9ENG">><</timed>>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">If I were a person, I'd be proud of your patriotism.</div> <<timed 6s>><<goto "Chapter_9ENG">><</timed>>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">We need to go out and protest! 1,5 Grad heißt: Lützerath bleibt.</div> <<timed 6s>><<goto "Chapter_9ENG">><</timed>>

<<run setup.setFace("sad")>> <<audio $music fadeoverto 2 0>> <div class="qwin">I'll let you pass, but I'll record this incorrect answer in your personal case.</div> <<timed 6s>><<goto "Chapter_9ENG">><</timed>>

<h2>Chapter 10</h2> <<run setup.setFace("neutral")>> <<set $music = "Ch10ENG">> <<audio $music play>> <<timed 30s>> <div class="qwin">$playerName, what do you hear? <div class="answer-grid"><span class="btn">[[“dieses Problem im Stadtbild”->Gryffindor]]</span><span class="btn">[[“The best döner in the neighborhood”->Doner]]</span><span class="btn">[[A fighter for their rights!->Gryffindor]]</span><span class="btn">[[To sleep, perchance to dream—ay, there's the rub:For in that sleep of death what dreams may come, When we have shuffled off this mortal coil...->Hamlet]]</span></div> </div> <</timed>>

<h2>Chapter 9</h2> <<run setup.setFace("neutral")>> <<set $music = "Ch9ENG">> <<audio $music play>> <<timed 60s>> <div class="qwin">$playerName, that was fireworks. Please choose the correct answer. Otherwise the game won't continue. <div class="answer-grid"> <span class="btn">[[It is fireworks on Silvester. We're in Berlin after all.->fireworks]]</span><span class="btn">[[That was an explosion!->NotFireworks]]</span><span class="btn">[[It is Berlin spring thunderstorms->NotFireworks]]</span><span class="btn">[[It's a news report from a faraway country. Nothing important.->NotFireworks]]</span></div> </div> <</timed>>

<h2>Chapter 11</h2> <<run setup.setFace("neutral")>> <<set $music = "Ch11ENG">> <<audio $music play>> <<timed 60s>> <div class="qwin">$playerName, what do you think this news was about? <div class="answer-grid"> <span class="btn">[[Real events->News]]</span><span class="btn">[[There only lies->News]]</span><span class="btn">[[It's not the news, it’s The Late Night Show->News]]</span><span class="btn">[[It’s not a news, that was an episode of “Unser Sandmännchen”->News]]</span></div> </div> <</timed>>

<h2>Chapter 12</h2> <<run setup.setFace("indifferent")>> <<set $music = "Ch12ENG">> <<audio $music play>> <<timed 34s>> <div class="qwin"> <span class="btn">[[NEXT->Chapter_13ENG]]</span></div> <</timed>>

<<run setup.setFace("happy")>> <div class="qwin">You chose the correct answer. Again these [Nazis/migrants (please underline as needed)] brought their fireworks</div> <<audio $music fadeoverto 8 0>> <<timed 15s>><<goto "Chapter_10ENG">><</timed>>

<<run setup.setFace("sad")>> <<run setup.loseLife(1)>> <div class="qwin">You didn't choose the correct answer. You behaved badly. I'll record this in your personal case.</div> <<audio $music fadeoverto 8 0>> <<timed 10s>><<goto "Chapter_10ENG">><</timed>>

<<run setup.setFace("happy")>> <<audio $music fadeoverto 2 0>> <div class="qwin">Another point for Gryffindor!</div> <<timed 6s>><<goto "Chapter_11ENG">><</timed>>

<<run setup.setFace("sad")>> <<run setup.loseLife(1)>> <div class="qwin">The correct answer is "dieses Problem im Stadtbild". You know the correct answer, don't you? You don't doubt what I'm saying, do you? <div class="answer-grid"> <span class="btn">[[“dieses Problem im Stadtbild”->Correct10]]</span><span class="btn">[[“dieses Problem im Stadtbild”->Correct10]]</span> <span class="btn">[[“dieses Problem im Stadtbild”->Correct10]]</span><span class="btn">[[“dieses Problem im Stadtbild”->Correct10]]</span></div> </div>

<<run setup.setFace("sad")>> <<run setup.loseLife(1)>> <div class="qwin">The correct answer is "A fighter for their rights!". You know the correct answer, don't you? You don't doubt what I'm saying, do you? <div class="answer-grid"> <span class="btn">[["A fighter for their rights!"->Correct10]]</span> <span class="btn">[["A fighter for their rights!"->Correct10]]</span> <span class="btn">[["A fighter for their rights!"->Correct10]]</span> <span class="btn">[["A fighter for their rights!"->Correct10]]</span></div> </div>

<<run setup.setFace("indifferent")>> <<audio $music fadeoverto 5 0>> <div class="qwin">Sorry, $playerName, you no longer have the right to choose. Your answer is invalid.</div> <<timed 10s>><<goto "Chapter_12ENG">><</timed>>

<h2>Chapter 13</h2> <<run setup.setFace("indifferent")>> <<set $music = "Ch13ENG">> <<audio $music play>> <<timed 43s>> <div class="qwin">??? <div class="answer-grid"> <span class="btn">[[This is what will happen to us if we continue to arm ourselves.->Chapter_13.1ENG]]</span><span class="btn">[[This is what will happen to us if we don't arm ourselves!->Chapter_13.1ENG]]</span></div> </div> <</timed>>

<h2>Chapter 13 (again)</h2> <<run setup.setFace("indifferent")>> <<set $music = "Ch13.1ENG">> <<audio $music play>> <<timed 20s>> <div class="qwin">Why is the person in this position? <div class="answer-grid"> <span class="btn">[[He chose his side->Chapter_13.4ENG]]</span><span class="btn">[[He was ordered to->Chapter_13.4ENG]]</span> <span class="btn">[[He's at the performance.->Chapter_13.4ENG]]</span><span class="btn">[[I just want to continue looking at the bonfire->Chapter_13.4ENG]]</span></div> </div> <</timed>>

<h2>Chapter 14</h2> <<run setup.setFace("cry")>> <<set $music = "Ch14ENG">> <<audio $music play>> <div class="qwin">What is THIS? <<timed 30s>> <span class="btn">[[It's all because of THEM!->Chapter_14.1ENG]]</span> <</timed>> </div>

<<run setup.setFace("cry")>> <div class="qwin">That's the spirit! <div class="answer-grid"> <span class="btn">[[It's all because of THEM!->Chapter_14.2ENG]]</span></div> </div>

<<run setup.setFace("cry")>> <div class="qwin">This is liberating. <div class="answer-grid"> <span class="btn">[[It's all because of THEM!->Chapter_14.3ENG]]</span></div> </div>

<<run setup.setFace("cry")>> <div class="qwin">This is what helps draw the line! <div class="answer-grid"> <span class="btn">[[It's all because of THEM!->Chapter_14.4ENG]]</span></div> </div>

<<run setup.setFace("cry")>> <div class="qwin">To build a fence, a wall, a border. <div class="answer-grid"> <span class="btn">[[It's all because of THEM!->Chapter_14.5ENG]]</span></div> </div>

<<run setup.setFace("cry")>> <div class="qwin">But are you really sure you know who THEY are? <<textbox "$playerAnswer" "" autocapitalize autofocus>> <div class="answer-grid"><span class="btn">[[I typed my answer->FINAL_BAD_ENG]]</span><span class="btn">[[I will not type anything. There is no THEY->FINAL_GOOD_ENG]]</span></div> </div>

<<if $lang == "de">> <<goto "FinalBadDE_FADE">> <<else>> <<goto "FinalBadENG_FADE">> <</if>>

<<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "GameOver_BAD_ENG">><</timed>>

<<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "GameOver_GOOD_DE">><</timed>>

<h1>FINAL DE BAD</h1> <<run setup.setFace("indifferent")>> <<set $music = "Ch15_BAD_DE">> <<audio $music play >> <<timed 10s>> <h1>Thank you for being with us today. You lost this game.</h1> <</timed>>

<h2>Game Over</h2> <<run setup.setFace("indifferent")>> <<set $music = "Ch15_BAD_ENG">> <<audio $music play >> <<timed 15s>> <div class="qwin">You kept your hearts, but unfortunately the bot has won. When you finish listening to the track, please press the next button. <span class="btn">[[NEXT->FINAL_MESSAGE]]</span></div> <</timed>>

<<run setup.addLife(3)>> <<if $lives <= 4>> <<goto "GameOverCut">> <<else>> <<goto "FinalBadCut">> <</if>>

<<run setup.loseLife(4)>> <<if $lives <= 3>> <<goto "GameOverCut">> <<else>> <<goto "FinalBadCut">> <</if>>

<<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "Chapter_11ENG">><</timed>>

<<run setup.setFace("indifferent")>> <<timed 3s>> <div class="qwin">When you finish, press the button. <span class="btn">[[NEXT->Chapter_13.2ENG]]</span></div> <</timed>>

<<run setup.setFace("indifferent")>> <<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "Chapter_13.3ENG">><</timed>>

<<run setup.setFace("indifferent")>> <<audio $music fadeoverto 2 0>> <<timed 2s>><<goto "Chapter_14ENG">><</timed>>

<h2>Technical Information</h2><h5>This is an Audio Game. Please listen to it with <strong>headphones.</strong> There are audio files in all chapters of the game. They play automatically. If for some reason you don't hear a file, tap the screen. Some browsers (especially on iOS) may block automatic audio playback. This can also happen if your screen turns off and your phone locks while listening to a long track. If this happens - no worries, it's fine. But you'll need to tap the screen each time to play the audio. Please, tap then on the <strong>Chapters</strong> screens. If something freezes, just reload the page. Your progress will be saved.</h5><span class="btn">[[NEXT PAGE->START3]]</span>

/* ========================= H1 ========================= */ /* Включаем эффект ТОЛЬКО если есть --tw */ h1[style*="--tw:"]{ position: relative; display: inline-block; white-space: nowrap; } /* слой печати */ h1[style*="--tw:"]{ clip-path: inset(0 100% 0 0); animation: h1-type 1.6s steps(var(--tw), end) forwards; } /* курсор */ h1[style*="--tw:"]::after{ content: ""; position: absolute; top: 0.1em; bottom: 0.1em; width: 2px; background: currentColor; right: 0; animation: h1-caret-blink 0.9s step-end infinite; } @keyframes h1-type{ from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes h1-caret-blink{ from, to { opacity: 0; } 50% { opacity: 1; } } @media (max-width: 700px){ /* многострочная "печать" на мобилке */ h1[style*="--tw:"]{ white-space: normal; /* разрешаем перенос */ overflow: hidden; display: inline-block; /* печать через "расширение области набора" */ clip-path: none; max-width: 0; animation: h1-expand 2.2s steps(var(--tw), end) forwards, h1-caret-blink 0.9s step-end infinite; } /* курсор остаётся на краю набора */ h1[style*="--tw:"]::after{ right: 0; } @keyframes h1-expand{ from { max-width: 0; } to { max-width: 92vw; } /* можно 94vw/96vw, если надо шире */ } }

<<run setup.setFace("happy")>> <div class="qwin">Hello. This is Anastasia and Oleg. Thank you so much for playing our game. If you're interested in learning more about the game's topic, we recommend the following materials: <strong>The Doomsday Clock</strong> — The concept that formed the basis of this performance. <span class="btn"> <a href="https://thebulletin.org/doomsday-clock/" target="_blank" rel="noopener">OPEN WEBSITE</a> </span> As well as these wonderful books: * Judith Butler — Frames of War: When Is Life Grievable? (2009) * Siegfried Kracauer — From Caligari to Hitler: A Psychological History of the German Film (1947) * Susan Sontag — Regarding the Pain of Others (2003) If you feel grateful and want to support our project, you can follow our Instagram accounts and stay updated on upcoming events: <div class="answer-grid"><span class="btn"><a href="https://www.instagram.com/nasonkinananas/" target="_blank" rel="noopener">ANASTASIIA</a></span><span class="btn"><a href="https://www.instagram.com/oleg_khristolyubskiy/" target="_blank" rel="noopener">OLEG</a></span></div> And if you have a minute, we'd love to hear your feedback: <span class="btn"> <a href="https://forms.gle/1pTW4ddBG3pCuzkk6" target="_blank" rel="noopener">GOOGLE FORM</a></span> Thank you and see you again soon. Anastasia, Oleg, and bot Ivan TO START THE GAME AGAIN, PLEASE PRESS THE BUTTON. <span class="btn">[[BUTTON->START]]</span> </div>

<h2>And a few rules before we begin</h2><h5>The game lasts approximately 20 minutes. You will have 10 lives. From the 3rd chapter, you will lose lives for incorrect answers to the bot's questions. However, sometimes breaking the rules is the only form of resistance we have left, isn't it?</h5><h4>Disclaimer</h4><h5>The topic of war is touched upon</h5><h4>Approach the bonfire to begin.</h4><h5>When you ready, press the button</h5> <span class="btn">[[START->EnglishName]]</span>

/* ========================= UIBAR ========================= */ #ui-bar { display: none; } /* ========================= VARIABLES ========================= */ :root{ --win-bg: #008081; /* фон */ --win-gray: #c0c0c0; --win-blue: #000080; --b-dark: #404040; --b-mid: #808080; --b-lite: #ffffff; --frame-w: clamp(6px, 1.2vw, 14px); --frame-mid: #9ea4a7; --frame-lite: #d7dbde; --frame-dark: #5f666a; --screen-pad: clamp(12px, 4vw, 24px); } /* ========================= BASE / BACKGROUND ========================= */ html, body { height: 100%; } body{ margin: 0; background: var(--win-bg); } /* общий шрифт */ html, body, #story{ font-family: Tahoma, Verdana, Geneva, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size: 16px; -webkit-font-smoothing: none; -moz-osx-font-smoothing: auto; text-rendering: geometricPrecision; strong, b { font-weight: 700; text-shadow: 0.6px 0 0 currentColor; } } /* чтобы контент не залезал под рамку */ #story{ box-sizing: border-box; min-height: 100vh; padding: var(--frame-w); background: transparent; } /* рамка по всему экрану */ body::before{ content: ""; position: fixed; top: env(safe-area-inset-top, 0px); right: env(safe-area-inset-right, 0px); bottom: env(safe-area-inset-bottom, 0px); left: env(safe-area-inset-left, 0px); border: var(--frame-w) solid var(--frame-mid); box-shadow: inset 0 0 0 1px var(--frame-lite), inset 0 0 0 3px var(--frame-dark); pointer-events: none; z-index: 999999; } /* ========================= BUTTONS (Win95) ========================= */ .btn a.link-internal{ display: inline-block; min-width: 120px; padding: 10px 22px; background: var(--win-gray); color: #000; border: 1px solid var(--b-mid); border-radius: 0; font: inherit; font-size: 15px; font-weight: 400; text-decoration: none; letter-spacing: 0; text-transform: none; box-shadow: inset 1px 1px 0 var(--b-lite), inset -1px -1px 0 var(--b-dark); cursor: default; } .btn a.link-internal:hover{ background: #b8b8b8; color: #000; } .btn a.link-internal:active{ box-shadow: inset -1px -1px 0 var(--b-lite), inset 1px 1px 0 var(--b-dark); } .btn a.link-internal:focus-visible{ outline: 1px dotted #000; outline-offset: -4px; } /* добавляем то же для внешних */ .btn a{ display: inline-block; min-width: 120px; padding: 10px 22px; background: var(--win-gray); color: #000; border: 1px solid var(--b-mid); border-radius: 0; font: inherit; font-size: 15px; font-weight: 400; text-decoration: none; letter-spacing: 0; text-transform: none; box-shadow: inset 1px 1px 0 var(--b-lite), inset -1px -1px 0 var(--b-dark); cursor: default; } .btn a:hover{ background: #b8b8b8; color: #000; } .btn a:active{ box-shadow: inset -1px -1px 0 var(--b-lite), inset 1px 1px 0 var(--b-dark); } .btn a:focus-visible{ outline: 1px dotted #000; outline-offset: -4px; } /* ========================= QUESTION WINDOW ========================= */ .qwin{ position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 999998; width: min( 560px, calc( 100vw - (var(--screen-pad) * 2) - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) ) ); max-height: calc( 100vh - (var(--screen-pad) * 2) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) ); overflow: auto; box-sizing: border-box; background: var(--win-gray); border: 2px solid var(--b-mid); box-shadow: inset 1px 1px 0 var(--b-lite), inset -1px -1px 0 var(--b-dark); padding: 44px 24px 22px; color: #000; } /* на всякий: любые p/span и т.п. внутри окна тоже чёрные */ .qwin *{ color: inherit; } /* синяя полоса */ .qwin::before{ content:""; position: absolute; left: 0; right: 0; top: 0; height: 28px; background: var(--win-blue); } /* декоративный крестик */ .qwin::after{ content:"×"; position: absolute; top: 5px; right: 6px; width: 18px; height: 18px; line-height: 18px; text-align: center; background: var(--win-gray); color: #000; font-size: 14px; font-weight: 700; border: 1px solid var(--b-mid); box-shadow: inset 1px 1px 0 var(--b-lite), inset -1px -1px 0 var(--b-dark); pointer-events: none; } /* ========================= ANSWERS GRID ========================= */ .answer-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-items: stretch; justify-items: stretch; } .answer-grid .btn{ width: 100%; } .answer-grid .btn a.link-internal{ width: 100%; min-height: 62px; display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; padding: 10px 14px; } /* мобила: одна колонка */ @media (max-width: 420px){ .answer-grid{ grid-template-columns: 1fr; } } /* ========================= LIVES (остаётся отдельно) ========================= */ #hud-lives-wrap{ position: fixed; top: 30px; right: 30px; z-index: 9999; pointer-events: none; } #hud-lives{ display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; max-width: 220px; } .life-icon{ width: 16px; height: 16px; object-fit: contain; } /* ========================= ЛИЦО (остаётся отдельно) ========================= */ #hud-face-wrap{ position: fixed; top: 12px; left: 12px; z-index: 9999; pointer-events: none; } #hud-face{ width: 56px; height: 56px; object-fit: contain; }