@font-face {
    font-family: "SamsungOne";
    src: url("font/SamsungOne-400.woff2") format("woff2");
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: "SamsungOne";
    src: url("font/SamsungOne-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Samsung Sharp Sans";
    src: url("font/SamsungSharpSans-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
}
@font-face {
    font-family: "Samsung Sharp Sans";
    src: url("font/SamsungSharpSans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

* {
    user-select: none;
}

html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
}

body {
    background: #fff;
    color: #000;
    font-family: SamsungOne, Helvetica, Arial, sans-serif;
    font-size: .875rem;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Samsung Sharp Sans", sans-serif;
    font-weight: 700;
    font-style: normal;
    margin-block: 70px;
}
h1 { font-size: 100px; }
h2 { font-size: 60px; }
h3 { font-size: 40px; font-weight: 400; }
p {
    margin-block: 0;
}

.text-center {
    text-align: center;
}
.text-ci {
    color: #C0A249;
}

.btn {
    background: #000;
    color: #fff;
    display: inline-block;
    border-radius: 50px;
    padding: 14px 74px 7px;
    font-family: "Samsung Sharp Sans", sans-serif;
    font-size: 40px;
    cursor: pointer;
}

.logo {
    width: 750px;
}

/* Buttons: Home / Video starten */
#navigation {
    position: fixed;
    z-index: 10;
    left: 0;
    bottom: 0;
}
#navigation button {
    display: block;
    position: absolute;
    left: 10px;
    bottom: 10px;

    background: none;
    border: 0;
    outline: none;
}
#navigation button:not(.visible) {
    display: none !important;
}
#navigation button img {
    height: 64px;
    width: 64px;
}

.content-vertical-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

/* "Seite"/Elemente ganzflächig anzeigen */
.cover {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    height: 100vh;
    width: 100vw;

}
.cover:not(.visible) {
    display: none !important;
}
video {
    background: #000;
    height: 100vh;
    width: 100vw;
    object-fit: contain;
    pointer-events: none;
}

/* Reihenfolge der Cover für den Fehlerfall */
#startpage { z-index: 1; }
#video { z-index: 2; }
.puzzle { z-index: 3; }
#success { z-index: 4; }
#loading { z-index: 5; }

/* Startseite */
#startpage {
    background: #f5f5f5 url("visual/bg-start.avif") no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
#startpage .top {
    margin-block-start: 50px;
}
#startpage .bottom {
    margin-block-end: 50px;
}
#startpage h2 {
    margin-block: 0 15px;
}
#startpage h3 {
    margin-block: 15px 25px;
}

/* Puzzles */
#question-audio {
    display: none;
}
.puzzle {
    background-image: url("visual/bg-puzzle-1.avif"); /* Fallback */
    background-repeat: no-repeat;
    background-size: cover;

    --speaking-color: rgb(36, 128, 247);
    --speaking-transparent-color: rgba(36, 128, 247, .7);
}
#puzzle_2 { background-image: url("visual/bg-puzzle-2.avif"); }
#puzzle_3 { background-image: url("visual/bg-puzzle-3.avif"); }
.questions {
    --outline-width: 10px;
    --box-size: 80px;
    --cross-unit: calc(var(--box-size) + var(--outline-width));  /* Höhe/Breite eines "Kreuzes" */

    position: absolute;
}
.question {
    display: flex;
    position: absolute;
}
.question.vertical {
    flex-direction: column;
}
.question-hint {
    outline: 10px solid transparent;
    position: absolute;
    height: 440px;
    border-radius: 105px;
    width: 210px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    background: rgba(230, 230, 230, .7);
    transition: outline 100ms ease-in-out;
}
.playing .question-hint {
    outline: 10px solid var(--speaking-transparent-color);
}
.question-hint > * {
    margin: 0;
    padding: 0;
}
.question-speaker {
    --border-width: 10px;

    background: #000;
    height: 210px;
    width: 210px;
    clip-path: circle(105px at center);
}
.question-speaker img {
    display: block;
    margin: var(--border-width);
    width: calc(100% - 2 * var(--border-width));
}
.question-speaker-country-flag {
    --flag-width: 80px;
    --flag-height: 53px;

    position: absolute;
    right: 0;
    top: calc(200px - var(--flag-height));
    height: var(--flag-height);
    width: var(--flag-width);
}
.question-speaker-country-and-locale {
    font-family: SamsungOne, sans-serif;
    font-size: 16px;
}
.question-text {
    font-size: 22px;
    font-weight: 700;
    text-align: center;
    padding-inline: 5px;
}
.question-text span {
    --transition-base-duration: 200ms;
    transition: color var(--transition-base-duration);
}
.question-text span.played {
    color: var(--speaking-color);
}

.question-listen {
    background: #000;
    border-radius: 40px;
    margin-block-end: 10px;
}
.question-listen img {
    border-radius: 40px;
    width: 58px;
    display: block;
    margin: 5px;
}
.question-listen img.question-playing {
    display: none;
}
.playing .question-listen img.question-paused {
    display: none;
}
.playing .question-listen img.question-playing {
    display: block;
}

/* Angezeigte Kreuzworträtsel-Boxen */
.crosswordInputBox {
    background: #fff;
    outline: var(--outline-width) solid #000;
    color: #000;
    margin: calc(var(--outline-width) / 2);

    padding-block-start: 10px;
    height: calc(var(--box-size) - 10px);
    width: calc(var(--box-size));

    font-size: 55px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    font-family: "Samsung Sharp Sans", sans-serif;

    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 5;
}
.crosswordInputBox.empty {
    background: #ccc;
}
.crosswordInputBox.hyphen {
    padding-block: 5px;
}

.crosswordInputBox:first-of-type::before {
    font-size: 26px;
    position: absolute;
    z-index: 4;
}
.playing .crosswordInputBox:first-of-type::before {
    color: var(--speaking-color);
}
.horizontal .crosswordInputBox:first-of-type::before { content: "▶"; left: -3px; margin-top: -4px; }
.vertical   .crosswordInputBox:first-of-type::before { content: "▼"; top: -3px; margin-left: 2px; font-size: 22px; }

/* Erfolg */
#success {
    background: #f5f5f5 url("visual/bg-success.avif") no-repeat;
    background-size: cover;
    color: #fff;
    display: flex;
    flex-direction: column;
}
#success .top {
    margin-block: 50px auto;
}
#success .bottom {
    margin: auto 0 115px 172px;
    width: 850px;
}
#success .bottom :last-child {
    margin-block-end: 0;
}

/* Feuerwerk */
#fireworks {
    position: fixed;
    height: 100vh;
    width: 100vw;
    z-index: 9;
    pointer-events: none;
}
#fireworks:not(.visible) {
    display: none !important;
}

@keyframes firework {
    0% { transform: translate(var(--x), var(--initialY)); width: var(--initialSize); opacity: 1; }
    50% { width: 0.5vmin; opacity: 1; }
    100% { width: var(--finalSize); opacity: 0; }
}

/*noinspection CssReplaceWithShorthandSafely*/
#fireworks.visible .firework,
#fireworks.visible .firework::before,
#fireworks.visible .firework::after {
    animation-name: firework;
}
.firework,
.firework::before,
.firework::after
{
    --initialSize: 5vmin;
    --finalSize: 45vmin;
    --y: -30vmin;
    --x: -50%;
    --initialY: 60vmin;
    animation-duration: 2.5s;
    animation-iteration-count: 1;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, var(--y));
    width: var(--initialSize);
    aspect-ratio: 1;
    background: url(icons/ai-star-20250305.svg) 50% 0, url(icons/ai-star-20250305.svg) 13% 42%;
    background-size: var(--initialSize) var(--initialSize);
    background-repeat: no-repeat;
    opacity: 0;
}

.firework::before {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
    transform: translate(-50%, -50%) rotate(40deg) scale(1.3) rotateY(40deg);
}

.firework::after {
    --x: -50%;
    --y: -50%;
    --initialY: -50%;
    transform: translate(-50%, -50%) rotate(170deg) scale(1.15) rotateY(-30deg);
}

.firework:nth-child(2) {
    --x: 30vmin;
}

.firework:nth-child(2),
.firework:nth-child(2)::before,
.firework:nth-child(2)::after {
    --finalSize: 40vmin;
    left: 20%;
    top: 60%;
    animation-delay: 0.4s;
}

.firework:nth-child(3) {
    --x: -30vmin;
    --y: -50vmin;
}

.firework:nth-child(3),
.firework:nth-child(3)::before,
.firework:nth-child(3)::after {
    --finalSize: 35vmin;
    left: 80%;
    top: 60%;
    animation-delay: 0.8s;
}

#devConsole {
    background: #fff;
    border: 1px solid red;
    position: fixed;
    height: 200px;
    width: 620px;
    z-index: 999;
    opacity: .2;
    white-space: nowrap;
    font-family: monospace;
    overflow-x: hidden;
    overflow-y: scroll;
}