:root { --rududu-background: #FAF8F2; --rududu-black: #101322; --rududu-text: #101322; --rududu-accent: #1458E8; --rududu-yellow: #FFD83D; --rududu-green-3: #39D99B; --rududu-violet-3: #C9A7FF; --pastel-pink: #ffc1cfff; --tea-green: #e8ffb7ff; --mauve: #e2a0ffff; --light-cyan: #c4f5fcff; --aquamarine: #b7ffd8ff; --rududu-shape-red: var(--pastel-pink); --rududu-shape-orange: var(--tea-green); --rududu-shape-yellow: var(--tea-green); --rududu-shape-green: var(--aquamarine); --rududu-shape-cyan: var(--light-cyan); --rududu-shape-blue: var(--light-cyan); --rududu-shape-violet: var(--mauve); }
#contentLAYOUT { scroll-snap-type: y mandatory; }
#headerLAYOUT { display: none; height: 0; }
#asideLAYOUT { top: 0; height: 100%; }
#contentLAYOUT > .wrap > .emoji.main { top: max(24px, env(safe-area-inset-top)); right: 24px; z-index: 101; }
.emoji.main .eyes > .wrap { cursor: default; }
#asideLAYOUT { background: #fff !important; color: #000 !important; }
#asideLAYOUT * { color: #000 !important; }
#asideLAYOUT li hr.solid { background: #000; }
@media (prefers-color-scheme: dark) {
    #asideLAYOUT { background: #000 !important; color: #fff !important; }
    #asideLAYOUT * { color: #fff !important; }
    #asideLAYOUT li hr.solid { background: #fff; }
}
#contentLAYOUT { margin-top: 0; }
#contentLAYOUT section.languages, #contentLAYOUT section.suggest, section.sketch { top: 0 !important; }
.section-divider { scroll-snap-align: none; }
section.index > .wrap { position: relative; }
section.index .rain-widget { position: relative; z-index: 2; max-width: min(100%, 520px); padding: 24px; }
section.index .rain-form { max-width: calc(100% - 82px); }
section.index .rain-form label { display: block; font: 900 clamp(42px, 9vw, 72px)/.98 'Arial Rounded MT Bold', Nunito, sans-serif; letter-spacing: -.04em; }
section.index .rain-city-row { display: flex; align-items: baseline; gap: 4px; width: fit-content; max-width: 100%; }
section.index .rain-city-row input { width: min(42vw, 215px); min-width: 0; margin-top: 12px; padding: 0 2px 4px; border: 0; border-bottom: 3px solid #101322; border-radius: 0; outline: 0; background: transparent; color: #101322; font: 900 clamp(42px, 9vw, 72px)/1 'Arial Rounded MT Bold', Nunito, sans-serif; letter-spacing: -.04em; }
section.index .rain-city-row input::placeholder { color: #101322; opacity: 1; }
section.index .rain-city-row span { font: 900 clamp(42px, 9vw, 72px)/1 'Arial Rounded MT Bold', Nunito, sans-serif; }
section.index .rain-answer-row { display: flex; align-items: center; gap: 12px; min-height: 100px; font: 900 clamp(80px, 22vw, 170px)/.9 'Arial Rounded MT Bold', Nunito, sans-serif; }
section.index .rain-answer { font: inherit; }
section.index .physics-card.language-card, section.index .physics-card.language-card:hover, section.index .physics-card.language-card:focus-visible { background: #101322; color: #fff; }
section.index .physics-card.language-card .title { color: #fff; }
section.index .physics-card.school-refresh, section.index .physics-card.school-refresh:hover, section.index .physics-card.school-refresh:focus-visible { background: #101322; color: #fff; border-color: #101322; }
section.index .physics-card.school-refresh .title, section.index .physics-card.school-refresh .material-symbols-outlined, section.index .physics-card.school-refresh .school-refresh-status { color: #fff; }
section.index .rain-sign[hidden], section.index .rain-places[hidden] { display: none; }
section.index .rain-places button { display: block; margin: 4px 0; padding: 6px 10px; }
.flying-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.flying-art img { position: absolute; width: clamp(120px, 25vw, 260px); height: auto; object-fit: contain; animation: retained-float 7s ease-in-out infinite alternate; }
.flying-art img:nth-child(1) { top: 12%; right: -5%; transform: rotate(-15deg); }
.flying-art img:nth-child(2) { bottom: 3%; left: -8%; animation-delay: -2s; }
#contentLAYOUT section > .wrap { position: relative; z-index: 1; }
@keyframes retained-float { to { translate: 18px -24px; rotate: 8deg; } }
#contentLAYOUT section .section-welcome .title, #contentLAYOUT section .section-welcome h1, #contentLAYOUT section .section-welcome h2 { font-family: 'Arial Rounded MT Bold', 'Nunito', sans-serif !important; font-weight: 900 !important; }
.emoji.main .menu-mouth { display: block; width: 72px; padding: 4px; border: 1px solid var(--rududu-black); border-radius: 8px; background: var(--rududu-background); color: var(--rududu-black); font: 200 16px/1 'Poppins', sans-serif; letter-spacing: .22em; text-align: center; cursor: pointer; }
section.spelling .rududu-keyboard { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 500px; margin: 10px auto; }
section.spelling .rududu-keyboard-row { display: flex; justify-content: center; gap: 4px; }
section.spelling .rududu-key { flex: 0 1 42px; min-width: 0; height: 44px; padding: 0; border: 1px solid #101322; border-radius: 7px; background: #fff; color: #101322; font: 700 16px 'Arial Rounded MT Bold', Nunito, sans-serif; }
section.rockPapaerScissor .section-welcome .player-hand { left: 0; right: 0; justify-content: space-between; }
section.rockPapaerScissor .section-welcome .player-hand img { flex: 0 1 33.333%; width: 33.333%; min-width: 0; height: 100%; object-fit: contain; object-position: center bottom; }
#contentLAYOUT section .section-welcome [data-role="player-inputs"] { width: 100%; max-width: 100%; box-sizing: border-box; }
#contentLAYOUT section .section-welcome [data-role="player-name"] { flex: 0 1 280px; width: min(280px, calc(100% - 24px)); max-width: calc(100% - 24px); min-width: 0; box-sizing: border-box; }
section.rockPapaerScissor .game-instruction { width: calc(100% - 32px); font-size: clamp(10px, 2.7vw, 16px); font-weight: 400; white-space: nowrap; }
body:has(section.rockPapaerScissor.is-playing) .emoji.main .menu-mouth { width: 30px; height: 38px; padding: 0; border: 3px solid #101322; border-radius: 50%; background: #101322; color: transparent; font-size: 0; letter-spacing: 0; }
section.rockPapaerScissor .result-zone, section.rockPapaerScissor .result-zone h2 { color: #101322 !important; }
section.rockPapaerScissor .result-zone h2 { line-height: .8 !important; font-weight: 500 !important; }
section.rockPapaerScissor .section-game .overlay #countdown-overlay,
.emoji.main .eye .countdown-digit { color: #000 !important; }
section.mathInvaders.is-playing #hud { display: none; }
section.mathInvaders .section-game .actions { right: 20px; bottom: 72px; }
section.mathInvaders .section-game .actions .ammo-label,
section.mathInvaders .section-game .actions #ammo-count { color: #fff; font-size: 14px; line-height: 1; }
section.mathInvaders .section-game .actions #btn-reload { position: static; z-index: auto; display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 52px; padding: 8px 14px; }
section.mathInvaders .section-game .actions #btn-reload > span:first-child { color: #fff; }
section.mathInvaders:not(.is-playing) > .wrap { height: 100dvh; }
section.mathInvaders .section-welcome > .wrap { min-height: 0; padding-bottom: 0 !important; }
section.mathInvaders .math-preview { position: absolute; right: 0; bottom: 0; left: 0; width: 100%; height: 40dvh; overflow: visible; pointer-events: none; }
section.mathInvaders .math-preview-enemy { position: absolute; bottom: 0; left: 50%; display: block; width: auto; height: 40dvh; max-width: none; transform: translateX(-50%); }
section.mathInvaders.is-playing #game-container { background: url('/media/math-invaders/background.svg') center bottom / 2048px 840px no-repeat; image-rendering: pixelated; }
section.mathInvaders.is-playing #player { bottom: 16px; }
section.mathInvaders.is-playing #player,
section.mathInvaders.is-playing .demon,
section.mathInvaders.is-playing .explosion { width: 28px; height: 56px; image-rendering: pixelated; }
@media (prefers-reduced-motion: reduce) { section.index .flying-art img { animation: none; } }