@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

#contentLAYOUT { overflow-x: hidden; background: var(--rududu-background); font-family: "Poppins", sans-serif; scroll-behavior: smooth; scroll-snap-type: y proximity; -webkit-overflow-scrolling: touch; isolation: isolate; }
body:has(.is-game-active) #contentLAYOUT { overflow-y: hidden; }
body:has(.is-game-active) #asideLAYOUT .section-navigation { display: none; }
#contentLAYOUT > .wrap { position: relative; z-index: 1; }

.ambient-shapes { position: absolute; top: 0; right: 0; left: 0; z-index: 0; min-height: 100%; overflow: hidden; pointer-events: none; }
.ambient-shape { --pointer-x: 0px; --pointer-y: 0px; --scroll-x: 0px; --scroll-y: 0px; --scroll-rotation: 0deg; --scroll-scale-x: 1; --scroll-scale-y: 1; --shape-rotation: 0deg; position: absolute; rotate: var(--shape-rotation); will-change: transform; transform: translate3d(calc(var(--pointer-x) + var(--scroll-x)), calc(var(--pointer-y) + var(--scroll-y)), 0) rotate(var(--scroll-rotation)) scale(var(--scroll-scale-x), var(--scroll-scale-y)); }
.ambient-shape--generated { background: currentColor; }

@keyframes ambient-drift-a {
    from { translate: -10px 8px; rotate: calc(var(--shape-rotation) - 1.5deg); }
    to { translate: 14px -12px; rotate: calc(var(--shape-rotation) + 2deg); }
}
@keyframes ambient-drift-b {
    from { translate: 8px -12px; rotate: calc(var(--shape-rotation) + 1deg); }
    to { translate: -14px 10px; rotate: calc(var(--shape-rotation) - 2deg); }
}
@keyframes ambient-drift-c {
    from { translate: -8px -6px; rotate: calc(var(--shape-rotation) - 2deg); }
    to { translate: 12px 14px; rotate: calc(var(--shape-rotation) + 1.5deg); }
}

@media screen and (max-width: 774px) {
    .ambient-shape--generated { min-width: 145%; }
}

@media (prefers-reduced-motion: reduce) {
    .ambient-shape { animation: none; will-change: auto; }
}





#contentLAYOUT section { position: relative; overflow-x: hidden; scroll-snap-align: start; scroll-snap-stop: normal; }
#contentLAYOUT section > .wrap {  }

#contentLAYOUT section .section-welcome {  }
#contentLAYOUT section .section-welcome > .wrap { padding: 24px; gap: 24px; }
#contentLAYOUT section .section-welcome .tags {  }
#contentLAYOUT section .section-welcome .tags span { font-size: 8px; line-height: 1; }
#contentLAYOUT section .section-welcome .title { font-family: "EB Garamond", serif; font-size: 64px; font-weight: 700; line-height: 56px; padding-right: 96px; }
#contentLAYOUT section .section-welcome .description { margin: 32px 0 16px 0; font-weight: 400; font-size: 16px; line-height: 24px; }

#contentLAYOUT section .section-welcome .label { margin: 24px 0 0 0; color: var(--rududu-text-muted); font-size: 16px; font-style: italic; line-height: 1; font-weight: 200; }
#contentLAYOUT section .section-welcome .options { margin: 16px 0 0 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; padding: 0; min-height: 0; }
#contentLAYOUT section .section-welcome .options button { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rududu-black); background: var(--rududu-background); }
#contentLAYOUT section .section-welcome .options button.active { background: var(--rududu-black); color: var(--rududu-white); }

#contentLAYOUT section .section-welcome .options input { height: 40px; padding: 0 16px; border: 1px solid var(--rududu-black); border-radius: 999px; background: var(--rududu-background); color: var(--rududu-text); /*font-size: 16px;*/ line-height: 40px; /*font-weight: 400; text-align: left*/ }
#contentLAYOUT section .section-welcome .options input::placeholder { color: var(--rududu-text-muted); }

#contentLAYOUT section .section-welcome .actions { margin: 16px 0 0 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; width: auto; padding: 0; min-height: 0; }
#contentLAYOUT section .section-welcome .actions a,
#contentLAYOUT section .section-welcome .actions button { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rududu-black); background: var(--rududu-background); color: var(--rududu-text); }
#contentLAYOUT section .section-welcome .actions button.primary { background: var(--rududu-accent); color: var(--rududu-white); border-color: var(--rududu-accent); border-radius: 0; }
#contentLAYOUT section .section-welcome .actions button.secondary { background: var(--rududu-green-3); border-color: var(--rududu-green-3); }
#contentLAYOUT section .section-welcome .actions button:disabled { opacity: 0.5; cursor: default; }

#contentLAYOUT section .section-welcome .actions button[action="play"] {
    position: relative;
    width: 80px;
    min-width: 80px;
    height: 80px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--rududu-background);
    background-image: url('/media/scratch/holo.avif');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: var(--rududu-black);
    font-weight: 700;
    -webkit-mask: url('/media/play-flower.svg') center / 100% 100% no-repeat;
    mask: url('/media/play-flower.svg') center / 100% 100% no-repeat;
    animation: none;
    transition: transform 180ms ease, background-color 180ms ease;
}
#contentLAYOUT section .section-welcome .actions button[action="play"].has-play-orbit {
    color: transparent;
    font-size: 0;
}
#contentLAYOUT section .section-welcome .actions button[action="play"] .play-button-orbit {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
#contentLAYOUT section .section-welcome .actions button[action="play"] .play-button-orbit span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--letter-angle)) translateY(-26px);
}
#contentLAYOUT section .section-welcome .actions button[action="play"] .play-button-orbit span::before {
    content: attr(data-letter);
    color: var(--rududu-black);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}
@keyframes play-button-spin {
    to { rotate: 360deg; }
}
#contentLAYOUT section .section-welcome .actions button[action="play"]:not(:disabled) .play-button-orbit {
    animation: play-button-spin 8s linear infinite;
}
#contentLAYOUT section .section-welcome .actions button[action="play"]:not(:disabled):hover {
    transform: scale(1.08);
}
#contentLAYOUT section .section-welcome .actions button[action="play"]:not(:disabled):active {
    transform: scale(1.02);
}
#contentLAYOUT section .section-welcome .actions button[action="play"]:disabled { opacity: 0.5; }
#contentLAYOUT section .section-welcome .actions button[action="play"]:focus-visible { outline: 2px solid var(--rududu-black); outline-offset: 4px; filter: drop-shadow(0 0 2px var(--rududu-black)); }
@media (prefers-reduced-motion: reduce) {
    #contentLAYOUT section .section-welcome .actions button[action="play"] { transition: none; }
    #contentLAYOUT section .section-welcome .actions button[action="play"]:not(:disabled) .play-button-orbit { animation: none; }
}

#contentLAYOUT section .section-welcome .text { margin-top: 32px; }
#contentLAYOUT section .section-welcome .text a,
#contentLAYOUT section .section-welcome .text button { color: var(--rududu-accent); text-decoration: underline; }



/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
.section-divider { position: relative; min-height: 300px; padding: 60px 0; overflow: hidden; }
.section-divider-link { position: absolute; bottom: 52px; left: 50%; display: block; width: 24px; height: 180px; color: inherit; transform: translateX(-50%); }
.section-divider .arrow { position: relative; display: inline-block; width: 24px; height: 180px; }
.section-divider .arrow-body { position: absolute; top: 50%; left: 0; width: 99px; height: 24px; transform: rotate(90deg) translateY(-100%); transform-origin: top left; }
.section-divider .arrow-body::after { position: absolute; top: 2px; left: -14%; display: block; width: 100%; height: 20px; background-image: url('/media/svg-wave-piece.svg'); background-repeat: repeat-x; background-position-y: 50%; background-size: 20px; content: ""; animation: section-arrow-wave 8s linear infinite; transform: scale(1.6); transform-origin: right; }
.section-divider .svg-arrow-head { position: absolute; bottom: 0; left: 0; width: 24px; height: 143px; padding: 0; background: transparent; }
@keyframes section-arrow-wave {
    to { background-position-x: 160px; }
}
@media (prefers-reduced-motion:reduce) {
    .section-divider .arrow-body::after { animation: none; }
}

/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */



.emoji { position: fixed; top: 64px; right: 24px; width: 72px; z-index: 2; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 8px; }
.emoji .eyes { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; padding: 0px; height: 32px; }
.emoji .eyes > .wrap { display: flex; gap: 8px; cursor: pointer; }
.emoji .eyes .eye { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rududu-black); background-color: #f6f6f6; position: relative; overflow: hidden; }
.emoji.main { display: flex; }
.emoji.main.is-counting-down { z-index: 3; }
.emoji .eyes .eye .pupil { width: 20px; height: 20px; border-radius: 50%; background-color: var(--rududu-black); position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.emoji.main.is-counting-down .eye { background-color: var(--eye-countdown-color); transition: background-color 1s linear; }
.emoji.main.is-counting-down .eye .pupil { display: none; }
.emoji.main .eye .countdown-digit { display: none; position: absolute; inset: 0; align-items: center; justify-content: center; color: var(--rududu-black); font-size: 20px; font-weight: 700; line-height: 1; }
.emoji.main.is-counting-down .eye .countdown-digit { display: flex; }
.emoji .eyes .eye .lid-top, .emoji .eyes .eye .lid-bottom { position: absolute; left: 0; right: 0; background-color: #f6f6f6; z-index: 2; transition: transform 0.12s ease-in-out; }
.emoji .eyes .eye .lid-top { top: 0; height: 70%; border-bottom: 1.5px solid var(--rududu-black); transform: scaleY(0); transform-origin: top center; }
.emoji .eyes .eye .lid-bottom { bottom: 0; height: 30%; transform: scaleY(0); transform-origin: bottom center; }
.emoji .eyes .eye.closed .lid-top, .emoji .eyes .eye.closed .lid-bottom { transform: scaleY(1); }
.emoji .eyes .eye.sleepy .lid-top { transform: scaleY(0.55); }
.emoji .eyes .eye.squint .lid-top { transform: scaleY(0.7); }
.emoji .eyes .eye.squint .lid-bottom { transform: scaleY(0.8); }
.emoji.main.is-suspended { display: none !important; }
.penalty-text { position: absolute; color: #ff0000; font-size: 10px; z-index: 90; pointer-events: none; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */

#asideLAYOUT .section-navigation { position: fixed; bottom: 16px; left: 0; width: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; writing-mode: initial; }
#asideLAYOUT .section-navigation hr { display: block; width: 24px; height: 1px; margin: 0; border: 0; background: var(--rududu-white); }
#asideLAYOUT .section-navigation button { width: 40px; height: auto; margin: 0; padding: 0; flex-direction: column; justify-content: center; gap: 4px; color: var(--rududu-white); writing-mode: initial; }
#asideLAYOUT .section-navigation [hidden] { display: none; }
#asideLAYOUT .section-navigation button span { color: var(--rududu-white); }
#asideLAYOUT .section-navigation .section-navigation-label { writing-mode: vertical-rl; text-transform: uppercase; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */

/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
:root {  }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
:root {  }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
:root {  }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */

/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
:root { --dontSayIt-color-1: tomato; --dontSayIt-color-2: aquamarine; --dontSayIt-color-3: #530fff; --dontSayIt-color-4: #EF3F00; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
























.vibrate { animation: vibrate 0.2s linear infinite; }
@keyframes vibrate {
    0%, 100% { transform: translate(0, 0) rotate(0); }
    10% { transform: translate(-2px, 1px) rotate(-0.5deg); }
    20% { transform: translate(2px, -1px) rotate(0.5deg); }
    30% { transform: translate(-3px, 0) rotate(-0.75deg); }
    40% { transform: translate(3px, 1px) rotate(0.75deg); }
    50% { transform: translate(-2px, -1px) rotate(-0.5deg); }
    60% { transform: translate(2px, 0) rotate(0.5deg); }
    70% { transform: translate(-1px, 1px) rotate(-0.25deg); }
    80% { transform: translate(1px, -1px) rotate(0.25deg); }
    90% { transform: translate(0, 0) rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
    .vibrate { animation: none; }
}