#contentLAYOUT { scroll-snap-type: y proximity; scroll-behavior: smooth;-webkit-overflow-scrolling: touch; }
#contentLAYOUT section { scroll-snap-align: start; scroll-snap-stop: normal; position: relative; overflow-x: hidden; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
.emoji { position: fixed; top: 80px; right: 40px; 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 #060614; background-color: #f6f6f6; position: relative; overflow: hidden; }
.emoji.main { display: flex; }
.emoji .eyes .eye .pupil { width: 20px; height: 20px; border-radius: 50%; background-color: #060614; position: absolute; top: 20px; left: 20px; transform: translate(-50%, -50%); }
.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 #060614; 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; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
section.message { position: fixed !important; top: 40px; left: 40px; width: calc(100vw - 40px); height: calc(100vh - 40px); background: #EEEEEE; z-index: 12; display: none; }
section.message > .wrap { padding: 0; }
section.message #bcPaint { font-size: 0; line-height: 0; }
section.message #bcPaint .row { padding: 0; }
section.message #bcPaintCanvas { display: block; touch-action: none; }
section.message #bcPaint-menu { position: absolute; bottom: 40px; right: 40px; }
section.message #bcPaint-menu button { padding: 0 8px; height: 32px; border: 1px solid #060614; border-radius: 20px; margin-right: 8px; }
section.message #bcPaint-menu button span { display: inline-block; vertical-align: middle; }
section.message #bcPaint-palette { margin-top: 8px; white-space: nowrap; overflow-x: auto; width: 100%; }
section.message #bcPaint-palette .bcPaint-palette-color { width: 32px; height: 32px; display: inline-block; cursor: pointer; border-radius: 16px; margin-right: 8px; }
section.message #bcPaint-palette > .selected { border: 2px solid #343a40; }
/* ---------------------------------------------- */
section.modal.submit-content-modal { position: fixed; inset: 0; z-index: 30; background: rgba(6, 6, 20, 0.28); padding: 24px; overflow-y: auto; }
section.modal.submit-content-modal .modal-card { position: relative; width: min(100%, 720px); margin: 0 auto; background: #f6f3ea; border: 1px solid #060614; border-radius: 28px; padding: 32px; box-shadow: 0 24px 80px rgba(6, 6, 20, 0.14); }
section.modal.submit-content-modal .modal-close { position: absolute; top: 20px; right: 20px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid #060614; border-radius: 999px; }
section.modal.submit-content-modal .modal-head .title { padding-right: 56px; font-size: 40px; line-height: 1; text-transform: lowercase; }
section.modal.submit-content-modal .submit-content-form { margin-top: 24px; display: flex; flex-direction: column; gap: 16px; }
section.modal.submit-content-modal .field { display: flex; flex-direction: column; gap: 8px; }
section.modal.submit-content-modal .field .label { font-size: 12px; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; }
section.modal.submit-content-modal .field input,
section.modal.submit-content-modal .field textarea { width: 100%; border: 1px solid #060614; border-radius: 20px; background: #ffffff; padding: 16px 18px; font-size: 16px; line-height: 1.4; color: #060614; }
section.modal.submit-content-modal .field textarea { min-height: 220px; resize: vertical; }
section.modal.submit-content-modal .actions { margin-top: 8px; }
section.modal.submit-content-modal .submit-button { display: inline-flex; align-items: center; justify-content: center; min-width: 140px; padding: 14px 22px; border: 1px solid #060614; border-radius: 999px; background: #060614; color: #ffffff; }
section.modal.submit-content-modal .submit-button[disabled] { opacity: 0.6; }
section.modal.submit-content-modal .submit-button .title { color: inherit; font-size: 18px; line-height: 1; text-transform: lowercase; }
section.modal.submit-content-modal .form-response { min-height: 24px; font-size: 14px; line-height: 1.4; }
section.modal.submit-content-modal .form-response.is-error { color: #a12727; }
section.modal.submit-content-modal .form-response.is-success { color: #166534; }
@media screen and (max-width: 767px) {
    section.modal.submit-content-modal { padding: 16px; }
    section.modal.submit-content-modal .modal-card { padding: 24px 18px; border-radius: 22px; }
    section.modal.submit-content-modal .modal-head .title { font-size: 30px; }
    section.modal.submit-content-modal .field textarea { min-height: 180px; }
}
/* ---------------------------------------------- */
#headerLAYOUT .bcPaint-tools { display: none; }
/* ---------------------------------------------- */
#asideLAYOUT .bcPaint-tools { display: none; }
#asideLAYOUT .bcPaint-tools #bcPaint-palette { display: flex; flex-direction: row; align-items: center; gap: 8px; margin-top: 0; overflow: visible; white-space: normal; }
#asideLAYOUT .bcPaint-tools .bcPaint-palette-color { display: block; width: 32px; height: 32px; margin-right: 0; border: 1px solid var(--white, #FFFFFF); border-radius: 16px; cursor: pointer; }
#asideLAYOUT .bcPaint-tools #bcPaint-palette > .selected { border: 2px solid var(--white, #FFFFFF); }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
section.media > .wrap { padding: 0; gap: 0; flex-wrap: wrap; position: relative; background-color: var(--beige); }
section.media > .wrap .image { width: 100%; background-position: left center; background-size: cover; }
section.media > .wrap .video video { width: 100%; object-fit: cover; }
section.media > .wrap .video-embed { position: relative; width: 100%; overflow: hidden; }
section.media > .wrap .video-embed iframe { position: absolute; top: 0; left: 0; }
section.media > .wrap .gradient { height: 16vh; width: 100%; position: absolute; left: 0; }
section.media > .wrap .gradient.top { background: linear-gradient( to bottom,var(--white) 0%, rgba(255, 255, 255, 0) 100%); top: 0; }
section.media > .wrap .gradient.bottom { background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%,var(--white) 100%); bottom: 0; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
section.index { font-size: 16px; line-height: 1.2; }
section.index > .wrap { padding: 40px; }
section.index .section-languages { display: flex; flex-wrap: wrap; gap: 12px; }
section.index .section-languages a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 18px; border: 1px solid #222; border-radius: 999px; background: rgba(255, 255, 255, 0.6); color: #060614; font-size: 12px; line-height: 1; text-transform: lowercase; transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease; }
section.index .section-languages a.active { background: #060614; color: #f7f1e8; }
section.index .section-title .title { font-weight: 400; font-size: 80px; line-height: 1; text-transform: lowercase; text-align: left; }
section.index .section-list { margin-top: 40px; border-top: 1px solid #222; }
section.index .section-list a,
section.index .section-list button { appearance: none; -webkit-appearance: none; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; padding: 8px 0; border-bottom: 1px solid #222; font-weight: 400; font-size: 16px; line-height: 1.2; text-align: left; text-decoration: none; white-space: normal; }
section.index .section-list .title { font-weight: 400; font-size: 20px; line-height: 1; }
section.index .section-list .caption { font-weight: 400; font-size: 16px; line-height: 1.2; }
section.index .section-list .main { width: 100%; padding: 16px 0; }
section.index .section-list .main .title { font-weight: 400; font-size: 40px; line-height: 1; }
section.index .section-list .main .caption { font-weight: 400; font-size: 16px; line-height: 1.2; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
section.clockAnalog { background: #FFA900; }
section.clockAnalog .wrap { padding: 40px; display: flex; justify-content: flex-start; }
section.clockAnalog .section-clock { display: flex; align-items: center; justify-content: center; position: relative; width: 220px; min-width: 220px; height: 220px; min-height: 220px; aspect-ratio: 1 / 1; border: 0; border-radius: 50%; background: var(--dark); box-shadow: none; }
section.clockAnalog .section-clock::after { content: ""; position: absolute; width: 16px; height: 16px; border-radius: 50%; background: #FFA900; z-index: 5; }
section.clockAnalog .section-clock .hour,
section.clockAnalog .section-clock .minute,
section.clockAnalog .section-clock .second { position: absolute; bottom: 50%; left: calc(50% - 3px); transform-origin: center bottom; border-radius: 999px; }
section.clockAnalog .section-clock .hour { width: 6px; height: 68px; background: #FFF; }
section.clockAnalog .section-clock .minute { width: 6px; height: 94px; background: #FFFFFF; }
section.clockAnalog .section-clock .second { width: 2px; height: 108px; left: calc(50% - 1px); background: #FFA900; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
section.clockDigital { background: #1D37D6; }
section.clockDigital { position: relative; overflow: hidden; }
section.clockDigital .wrap { padding: 40px; display: flex; justify-content: flex-end; }
section.clockDigital .section-clock { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 220px; min-width: 220px; height: 220px; min-height: 220px; margin-right: auto; border: 0; border-radius: 50%; background: var(--dark); box-shadow: none; }
section.clockDigital .section-clock .time { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; width: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; }
section.clockDigital .section-clock .time > div { display: block; position: relative; min-width: 0; width: 100%; font-size: clamp(46px, 8vw, 70px); line-height: 0.88; font-weight: 700; text-align: center; letter-spacing: 0.04em; color: #2d40e6; }
section.clockDigital .section-clock .time .minute::before { content: none; }
section.clockDigital .section-clock .time { writing-mode: horizontal-tb; }
section.clockDigital .section-clock .time .hour,
section.clockDigital .section-clock .time .minute { transform: none; }
section.clockDigital.countdown-mode-hours .section-clock .time .second { display: none; }
section.clockDigital.countdown-mode-minutes .section-clock .time .hour { display: none; }
section.clockDigital.countdown-alarm::after { content: ""; position: absolute; inset: 0; background: rgba(255, 0, 0, 0.88); pointer-events: none; animation: digitalClockSiren 0.7s ease-in-out infinite; }
section.clockDigital .section-actions { position: absolute; left: 40px; bottom: 40px; z-index: 2; }
section.clockDigital .section-actions > .wrap,
section.clockDigital .section-actions .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
section.clockDigital .section-actions button { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 16px; border: 1px solid #060614; border-radius: 999px; background: #FFFFFF; color: #060614; font-size: 16px; font-weight: 400; line-height: 1; text-align: center; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
section.clockDigital .section-actions button:hover { border-color: #060614; background: #060614; color: #FFFFFF; }
@keyframes digitalClockSiren { 0% { opacity: 0.08; } 30% { opacity: 1; } 50% { opacity: 0.12; } 80% { opacity: 1; } 100% { opacity: 0.08; } }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
section.scratch { background: #06111f; color: #f7f1e8; }
section.scratch * { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
section.scratch > .wrap { padding: 0; }
section.scratch .scratch-card { position: relative; width: 100%; overflow: hidden; background-image: url('/media/background--01.jpg'); background-position: center center; background-size: cover; background-repeat: no-repeat; box-shadow: 0 24px 70px rgba(0, 0, 0, 0.24); }
section.scratch .scratch-card__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 2; touch-action: none; cursor: crosshair; }

/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
section.gameDemonInvaders { background: #0A1B48; color: #8566FE; }
section.gameDemonInvaders * { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
section.gameDemonInvaders > .wrap { width: 100%; min-height: 100%; }
section.gameDemonInvaders .section-welcome > .wrap { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; padding: 40px; }
section.gameDemonInvaders .section-welcome .tags {  }
section.gameDemonInvaders .section-welcome .tags span { font-size: 8px; line-height: 1; }
section.gameDemonInvaders .section-welcome .title { margin: 16px 0 0 0; color: #8566FE; font-size: 80px; font-weight: 100; line-height: 1; }
section.gameDemonInvaders .section-welcome .description { margin: 16px 0 16px 0; font-size: 16px; line-height: 1; font-weight: 200; }
section.gameDemonInvaders .section-welcome .label { margin: 16px 0 0 0; }
section.gameDemonInvaders .section-welcome .options { margin: 8px 0 0 0; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; color: #8566FE; font-size: 16px; line-height: 1; }
section.gameDemonInvaders .section-welcome .options span { display: block; }
section.gameDemonInvaders .section-welcome .options button { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; border: 1px solid #8566FE; border-radius: 999px; background: transparent; color: #8566FE; font-size: 16px; font-weight: 400; line-height: 1; }
section.gameDemonInvaders .section-welcome .options button.active { background: #8566FE; color: #060614; }
section.gameDemonInvaders .section-welcome .actions { margin: 16px 0 0 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; min-height: 0; }
section.gameDemonInvaders .section-welcome .actions button { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; min-width: 120px; height: 40px; padding: 0 16px; border: 1px solid #8566FE; border-radius: 999px; background: #8566FE; color: #060614; font-size: 16px; font-weight: 400; line-height: 1; text-align: center; }
section.gameDemonInvaders .section-welcome .actions button:disabled { opacity: 0.45; cursor: default; }
/* ---------------------------------------------- */
section.gameDemonInvaders .section-game { display: none; width: 100%; flex: 1 1 auto; }
section.gameDemonInvaders .section-game > .wrap { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; overflow: hidden; background-color: #0A1B48; background-size: 3560px auto; background-position: center bottom; background-repeat: no-repeat; }
section.gameDemonInvaders .section-game.bg-loaded > .wrap,
section.gameDemonInvaders .section-game.bg-loaded { background-image: url(/media/gameDemonInvaders/background.svg); }
section.gameDemonInvaders #game-container { position: relative; width: 100%; overflow: hidden; }
section.gameDemonInvaders #hud { position: absolute; top: 15px; left: 15px; right: 15px; display: flex; justify-content: space-between; z-index: 2; font-size: 10px; pointer-events: none; color: #FFFFFF; }
section.gameDemonInvaders #hud .stat-box { display: inline-flex; align-items: center; min-height: 32px; padding: 6px 12px; border: 1px solid #8566FE; border-radius: 999px; background: rgba(10, 27, 72, 0.75); backdrop-filter: blur(4px); }
section.gameDemonInvaders #hud .score-label,
section.gameDemonInvaders #hud .ammo-label { color: #FFFFFF; font-size: 12px; line-height: 1; font-weight: 400; letter-spacing: 0.04em; }
section.gameDemonInvaders #player { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); width: 40px; height: 80px; background-image: url(/media/gameDemonInvaders/player.svg); background-size: contain; background-repeat: no-repeat; z-index: 1; }
section.gameDemonInvaders .section-game .actions { position: absolute; right: 20px; bottom: 20px; z-index: 4; display: none; min-height: 0; }
section.gameDemonInvaders .section-game .actions button { margin: 0; }
section.gameDemonInvaders .demon { position: absolute; width: 40px; height: 80px; background-size: contain; background-repeat: no-repeat; z-index: 4; cursor: pointer; }
section.gameDemonInvaders .demon-1 { background-image: url(/media/gameDemonInvaders/demon-1.svg); }
section.gameDemonInvaders .demon-2 { background-image: url(/media/gameDemonInvaders/demon-2.svg); }
section.gameDemonInvaders .bullet { position: absolute; width: 8px; height: 8px; background: #B2F7FC; z-index: 1; }
section.gameDemonInvaders .explosion { position: absolute; width: 40px; height: 80px; background-image: url(/media/gameDemonInvaders/explosion.svg); background-size: contain; background-repeat: no-repeat; z-index: 1; pointer-events: none; }
section.gameDemonInvaders #math-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #8566FE; z-index: 8; flex-direction: column; justify-content: center; align-items: center; padding: 24px; text-align: center; }
section.gameDemonInvaders #math-question { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
section.gameDemonInvaders #math-overlay span { color: #FFFFFF; font-size: 24px; line-height: 24px; font-weight: 400; }
section.gameDemonInvaders #math-overlay input { width: 40px; font-size: 24px; line-height: 24px; font-weight: 400;  outline: none; background: #8566FE; border: none; border-bottom: 1px solid #FFFFFF; color: #FFFFFF; vertical-align: baseline; }
section.gameDemonInvaders #math-feedback { margin-top: 12px; min-height: 20px; color: #FFFFFF; font-size: 14px; line-height: 1.2; }
section.gameDemonInvaders .btn-ui { margin: 3px 8px 3px 0px; line-height: 24px; display: inline-block; border-radius: 16px; min-width: 38px; padding: 4px 8px; text-align: center; font-size: 14px; font-weight: 300; vertical-align: bottom; border: 1px solid #00EF9F; background: #00EF9F; color: #060614; text-align: left; }
section.gameDemonInvaders .aside-tools-gameDemonInvaders { display: block; position: absolute; right: 24px; bottom: 24px; z-index: 999; pointer-events: auto; margin: 0; padding: 0; }
section.gameDemonInvaders .tools-gameDemonInvaders { display: block; margin: 0; padding: 0; list-style: none; }
section.gameDemonInvaders .tools-gameDemonInvaders button { display: none; appearance: none; -webkit-appearance: none; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; margin: 0; padding: 8px 14px; border: 1px solid #060614; border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: #060614; font-family: inherit; font-size: 14px; line-height: 1; font-weight: 400; text-align: center; cursor: pointer; pointer-events: auto; }
section.gameDemonInvaders .tools-gameDemonInvaders button:hover { background: #060614 !important; border-color: #060614 !important; color: #FFFFFF !important; }
.penalty-text { position: absolute; color: #ff0000; font-size: 10px; z-index: 90; pointer-events: none; }
/* ---------------------------------------------- */
section.gameDemonInvaders.is-playing .section-welcome { display: none; }
section.gameDemonInvaders.is-playing .section-game { display: block; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
:root {
    --gameMatchUp-color-1: #ffd60d;
    --gameMatchUp-color-2: #030507;
}
section.gameMatchUp { background: var(--gameMatchUp-color-1); color: var(--gameMatchUp-color-2); }
section.gameMatchUp * { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
section.gameMatchUp > .wrap { width: 100%; min-height: 100%; margin: 0; padding: 0; }
/* ---------------------------------------------- */
section.gameMatchUp .section-welcome { display: block; width: 100%; margin: 0; padding: 0; }
section.gameMatchUp .section-welcome > .wrap { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-height: 100%; padding: 40px; }
section.gameMatchUp .section-welcome .tags { display: flex; flex-direction: row; flex-wrap: wrap; }
section.gameMatchUp .section-welcome .tags span { font-size: 8px; line-height: 1; padding: 4px; border-radius: 8px; background: transparent; }
section.gameMatchUp .section-welcome .title { margin: 16px 0 0 0; font-size: 40px; line-height: 1; font-weight: 700; }
section.gameMatchUp .section-welcome .subtitle { margin: 16px 0 0 0; font-size: 16px; line-height: 1; font-weight: 400; }
section.gameMatchUp .section-welcome .description { margin: 16px 0 16px 0; font-size: 16px; line-height: 1; font-weight: 200; }

section.gameMatchUp .section-welcome .actions { margin: 16px 0 0 0; display: flex; flex-direction: row; flex-wrap: wrap; gap: 8px; }
section.gameMatchUp .section-welcome .actions button { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 16px; border: 1px solid var(--gameMatchUp-color-2); border-radius: 999px; background: var(--gameMatchUp-color-2); color: var(--gameMatchUp-color-1); font-size: 16px; font-weight: 400; line-height: 1; text-align: center; text-decoration: none; box-shadow: none; }
/* ---------------------------------------------- */

section.gameMatchUp .section-game { display: none; width: 100%; height: 100%; overflow: hidden; background: var(--gameMatchUp-color-1); }
section.gameMatchUp .section-game > .wrap { display: grid; width: 100%; height: 100%; align-content: stretch; justify-content: stretch; justify-items: stretch; gap: 8px; padding: 40px; list-style: none; }

section.gameMatchUp .card { display: block; position: relative; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; perspective: 1000px; -webkit-perspective: 1000px; cursor: pointer; /*border-radius: 24px; overflow: hidden;*/ }
section.gameMatchUp .card-inner { display: block; width: 100%; height: 100%; margin: 0; padding: 0; position: relative; border: 0; transition: transform 0.4s; transform: rotateY(0deg); transform-style: preserve-3d; -webkit-transform-style: preserve-3d; }
section.gameMatchUp .card.flipped .card-inner { transform: rotateY(180deg); }
section.gameMatchUp .card-front,
section.gameMatchUp .card-back { display: block; position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background-repeat: no-repeat; background-position: center; box-shadow: none; overflow: hidden; }
section.gameMatchUp .card-front { background: var(--gameMatchUp-color-1); transform: rotateY(0deg); z-index: 1; border: 1px solid var(--gameMatchUp-color-2);
    border-radius: 16px;
    overflow: hidden; }
section.gameMatchUp .card-back { position: absolute; inset: 0; background: var(--gameMatchUp-color-1); transform: rotateY(180deg); z-index: 1;  border: 1px solid var(--gameMatchUp-color-2);
    border-radius: 16px;
    overflow: hidden; }
section.gameMatchUp .card-back img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(200%) saturate(0%); mix-blend-mode: multiply; }
section.gameMatchUp .card-ball-x,
section.gameMatchUp .card-ball-y { position: absolute; width: var(--ball-size); height: var(--ball-size); pointer-events: none; z-index: 2; }
section.gameMatchUp .card-ball-x { left: var(--ball-start-x); top: 0; animation: gameMatchUpBallX var(--ball-x-duration) linear infinite alternate; animation-delay: var(--ball-x-delay); will-change: transform; }
section.gameMatchUp .card-ball-y { left: 0; top: var(--ball-start-y); animation: gameMatchUpBallY var(--ball-y-duration) linear infinite alternate; animation-delay: var(--ball-y-delay); will-change: transform; }
section.gameMatchUp .card-ball { width: 100%; height: 100%; border-radius: 50%; background: var(--gameMatchUp-color-2); border: 1px solid var(--gameMatchUp-color-2); box-sizing: border-box; box-shadow: none; filter: none; opacity: 1; }
@keyframes gameMatchUpBallX {
    from { transform: translateX(0); }
    to { transform: translateX(var(--ball-travel-x)); }
}
@keyframes gameMatchUpBallY {
    from { transform: translateY(0); }
    to { transform: translateY(var(--ball-travel-y)); }
}
section.gameMatchUp .aside-tools-gameMatchUp { display: block; position: absolute; right: 24px; bottom: 24px; margin: 0; padding: 0; }
section.gameMatchUp .tools-gameMatchUp { display: block; margin: 0; padding: 0; list-style: none; }
section.gameMatchUp .tools-gameMatchUp button { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; gap: 8px; color: #060614; font-size: 14px; font-weight: 400; line-height: 1; text-decoration: none; box-shadow: none; }
section.gameMatchUp .tools-gameMatchUp button .material-symbols-outlined { font-size: 20px; line-height: 1; }
/* ---------------------------------------------- */
section.gameMatchUp.is-playing .section-welcome { display: none; }
section.gameMatchUp.is-playing .section-game { display: block; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */

section.gameSpelling { /*position: relative; overflow: hidden;*/ background-color: #fff; color: #643a71; background-image: url(/media/gameSpelling/background.jpg); background-size: cover; background-position: center; background-repeat: no-repeat; /*font-size: 16px; line-height: 1.2; font-weight: 400; cursor: url(/media/cursor-unicorn.png), auto;*/ }
section.gameSpelling * { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
/*section.gameSpelling button { appearance: none; -webkit-appearance: none; text-decoration: none; box-shadow: none; }
section.gameSpelling a,
section.gameSpelling button,
section.gameSpelling input { color: inherit; font-size: inherit; line-height: inherit; }
section.gameSpelling button { appearance: none; -webkit-appearance: none; text-decoration: none; box-shadow: none; }
section.gameSpelling input { border: 0; box-shadow: none; }
section.gameSpelling .material-symbols-outlined { font-size: 24px; line-height: 1; font-weight: 300; vertical-align: middle; font-variation-settings: 'FILL' 0, 'wght' 100, 'GRAD' 0, 'opsz' 24; }*/
section.gameSpelling > .wrap { width: 100%; min-height: 100%; margin: 0; padding: 0; }
section.gameSpelling .section-welcome { display: block; width: 100%; margin: 0; padding: 0; overflow: hidden; }
section.gameSpelling .section-welcome > .wrap { display: flex; flex-direction: column; justify-content: flex-start; width: 100%; min-height: 100%; padding: 40px; }


section.gameSpelling .section-welcome .tags { display: flex; flex-direction: row; flex-wrap: wrap; }
section.gameSpelling .section-welcome .tags span { font-size: 8px; line-height: 1; padding: 4px; border-radius: 8px; background: transparent; }
section.gameSpelling .section-welcome .title { margin: 16px 0 0 0; font-size: 84px; line-height: 1; font-weight: 700; }
section.gameSpelling .section-welcome .title span { background: #643a71; color: #fff; padding: 8px; border-radius: 8px; }
section.gameSpelling .section-welcome .subtitle { margin: 16px 0 0 0; font-size: 16px; line-height: 1; font-weight: 400; }
section.gameSpelling .section-welcome .description { margin: 16px 0 16px 0; font-size: 16px; line-height: 1; font-weight: 200; }
section.gameSpelling .section-welcome .description span { background: #643a71; color: #fff; padding: 8px; border-radius: 8px; }


section.gameSpelling .section-welcome .label { margin: 16px 0 0 0; font-size: 16px; line-height: 1; font-weight: 400; }
section.gameSpelling .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; }
section.gameSpelling .section-welcome .options button { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid #060614; background: #FFFFFF; }
section.gameSpelling .section-welcome .options button.active { background: #060614; border-color: #060614; color: #FFFFFF; }
section.gameSpelling .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; }
section.gameSpelling .section-welcome .actions button { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid #00EF9F; background: #00EF9F; }
section.gameSpelling .section-welcome .actions button.active { background: #060614; border-color: #060614; color: #FFFFFF; }
section.gameSpelling .section-welcome .links { margin-top: 32px; }
/*section.gameSpelling .section-welcome .actions button,
section.gameSpelling .section-newwords .section-actions button,
section.gameSpelling .section-word .actions button,
section.gameSpelling .tools-gameSpelling button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; margin: 0; padding: 8px 14px; border: 1px solid #060614; border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: #060614; font-size: 14px; line-height: 1; font-weight: 400; text-align: center; }
section.gameSpelling .section-welcome .actions button:hover,
section.gameSpelling .section-newwords .section-actions button:hover,
section.gameSpelling .section-word .actions button:hover,
section.gameSpelling .tools-gameSpelling button:hover { background: #060614 !important; border-color: #060614 !important; color: #FFFFFF !important; }
section.gameSpelling .section-welcome .actions .green-3,
section.gameSpelling .section-newwords .section-actions .green-3,
section.gameSpelling .section-word .actions .green-3,
section.gameSpelling .tools-gameSpelling .green-3 { background: var(--green-3, #00EF9F); border-color: var(--green-3, #00EF9F); color: #060614; }
section.gameSpelling .section-welcome .actions .red-3,
section.gameSpelling .section-newwords .section-actions .red-3,
section.gameSpelling .section-word .actions .red-3,
section.gameSpelling .tools-gameSpelling .red-3 { background: var(--red-3, #FEB49F); border-color: var(--red-3, #FEB49F); color: #060614; }*/
section.gameSpelling .section-word { display: none; width: 100%; /*margin: 40px 0 0; padding: 0; text-align: center; align-self: center;*/ }
/*section.gameSpelling.is-playing .section-welcome { display: none; }
section.gameSpelling.is-playing .section-word { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; }*/
/*section.gameSpelling .section-word > .wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; width: 100%; min-height: 100%; margin: 0; padding: 0; }*/
section.gameSpelling .section-word > .wrap { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; padding: 40px; gap: 40px; }
section.gameSpelling .section-word .anwser { display: flex; align-items: center; justify-content: center; width: 100%; margin: 0; padding: 0; text-align: center; }
section.gameSpelling .section-word .inputs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; width: 100%; margin: 0; padding: 0; font-size: 0; }
section.gameSpelling .section-word .inputs input.letter { width: 40px; height: 56px; margin: 0; padding: 0; border: 1px solid #060614; border-radius: 16px; background: var(--violet-2, #E0D9FF); color: #060614; font-size: 24px; line-height: 56px; font-weight: 300; text-align: center; text-transform: lowercase; box-shadow: 0 0 4px rgba(0, 0, 0, 0.35); }
section.gameSpelling .section-word .actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; align-content: center; gap: 8px; width: 100%; margin: 0; padding: 0; text-align: center; }
section.gameSpelling .section-word .actions .score { display: inline-flex; align-items: center; gap: 6px; min-width: 38px; min-height: 40px; margin: 0; padding: 8px 12px; border: 1px solid #060614; border-radius: 16px; background: var(--white, #FFFFFF); color: #060614; font-size: 14px; line-height: 1; font-weight: 400; text-align: left; }
section.gameSpelling .section-word .actions .score .material-symbols-outlined { font-size: 20px; }
section.gameSpelling .section-word .actions button { background: var(--white, #FFFFFF); }
section.gameSpelling .section-newwords { display: none; position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; padding: 0; background-color: var(--beige, #EFEBE3); color: #060614; text-align: center; }
section.gameSpelling .section-newwords > .wrap { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100%; margin: 0; padding: 96px 40px 40px; }
section.gameSpelling .section-newwords .section-text { display: block; width: 100%; margin: 0; padding: 0; }
section.gameSpelling .section-newwords .section-text > .wrap { margin: 0; padding: 0; }
section.gameSpelling .section-newwords .section-text .content { line-height: 1.2; font-size: 32px; font-weight: 400; }
section.gameSpelling .section-newwords .section-text .content span { display: block; margin: 0; padding: 0; cursor: pointer; }
section.gameSpelling .section-newwords .section-actions { position: absolute; top: 32px; right: 9px; z-index: 2; margin: 0; padding: 0; }
section.gameSpelling .section-newwords .section-actions > .wrap,
section.gameSpelling .section-newwords .section-actions .actions { margin: 0; padding: 0; }
section.gameSpelling .section-newwords .section-actions button { min-width: 32px; width: 32px; height: 32px; padding: 0; }
section.gameSpelling .aside-tools-gameSpelling { display: block; position: absolute; right: 24px; bottom: 24px; margin: 0; padding: 0; }
section.gameSpelling .tools-gameSpelling { display: block; margin: 0; padding: 0; list-style: none; }
section.gameSpelling .feedback { display: none; position: absolute; inset: 0; z-index: 10; width: 100%; height: 100%; margin: 0; padding: 0; background: var(--yellow, #FFFD77); text-align: center; }
section.gameSpelling .feedback .emoji { position: absolute; top: 40px; right: 40px; width: 72px; z-index: 1; display: flex; justify-content: center; flex-direction: column; align-items: center; gap: 8px; }
section.gameSpelling .feedback .emoji .eyes { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; height: 32px; padding: 0; }
section.gameSpelling .feedback .emoji .eyes > .wrap { display: flex; gap: 8px; }
section.gameSpelling .feedback .emoji .eyes .eye { position: relative; overflow: hidden; width: 32px; height: 32px; border: 1px solid #060614; border-radius: 50%; background-color: #FFFFFF; }
section.gameSpelling .feedback .col-full,
section.gameSpelling .feedback .col-full > .wrap,
section.gameSpelling .feedback .section-title,
section.gameSpelling .feedback .section-title > .wrap { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 100%; margin: 0; padding: 0; }
section.gameSpelling .feedback .section-title .title { display: inline-flex; align-items: center; justify-content: center; color: #060614; }
section.gameSpelling .feedback .section-title .title .material-symbols-outlined { font-size: 120px; line-height: 1; }
section.gameSpelling .feedback.true { background-color: #1A9562; z-index: 11; }
section.gameSpelling .feedback.true .emoji .mouth { width: 80px; height: 40px; border: 4px solid #060614; border-color: transparent transparent #060614 transparent; border-radius: 0 0 80px 80px; }
section.gameSpelling .feedback.false { background-color: #EE5A36; z-index: 12; }
section.gameSpelling .feedback.false .emoji .eyes .eye { background: linear-gradient(45deg, transparent 45%, #060614 45%, #060614 55%, transparent 55%), linear-gradient(-45deg, transparent 45%, #060614 45%, #060614 55%, transparent 55%); }
section.gameSpelling .feedback.false .emoji .mouth { height: 48px; width: 40px; border: 4px solid #060614; border-radius: 50%; }

/* ---------------------------------------------- */
section.gameSpelling.is-playing .section-welcome { display: none; }
section.gameSpelling.is-playing .section-game { display: block; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
section.gameRockPapaerScissor { color: #34548A; background-image: linear-gradient(#34548A 0.8px, transparent 0.8px), linear-gradient(to right, #34548A 0.8px, #FFFFFF 0.8px); background-size: 32px 32px; }
section.gameRockPapaerScissor * { color: inherit; font-size: inherit; font-weight: inherit; line-height: inherit; }
section.gameRockPapaerScissor > .wrap { width: 100%; height: 100%; }
/* ---------------------------------------------- */
section.gameRockPapaerScissor .section-welcome { width: 100%; margin: 0; padding: 0; text-align: center; }
section.gameRockPapaerScissor .section-welcome > .wrap { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100%; min-height: 100%; padding: 80px 0px 40px 0px; }
section.gameRockPapaerScissor .section-welcome .tags { display: flex; flex-direction: row; flex-wrap: wrap; }
section.gameRockPapaerScissor .section-welcome .tags span { font-size: 8px; line-height: 1; padding: 4px; background: #fff; border-radius: 8px; }
section.gameRockPapaerScissor .section-welcome .title { margin: 16px 0 0 0; font-size: 64px; line-height: 1; font-weight: 700; }
section.gameRockPapaerScissor .section-welcome .subtitle { margin: 16px 0 0 0; font-size: 16px; line-height: 1; font-weight: 400; }
section.gameRockPapaerScissor .section-welcome .description { margin: 16px 0 16px 0; font-size: 16px; line-height: 1; font-weight: 200; background: #FFFD77; border-radius: 24px; padding: 16px 8px; max-width: 320px; }

section.gameRockPapaerScissor .section-welcome .actions { display: flex; justify-content: center; gap: 8px; margin: 16px 0 0 0; }
section.gameRockPapaerScissor .section-welcome .player-hand { position: absolute; bottom: 0; height: 40%; display: flex; align-items: flex-end; justify-content: center; flex-wrap: nowrap; width: 100%; overflow: hidden; }
section.gameRockPapaerScissor .section-welcome .player-hand img { height: 100%; width: auto; }
section.gameRockPapaerScissor .section-welcome .actions button,
section.gameRockPapaerScissor .tools-gameRockPapaerScissor button { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 40px; padding: 8px 16px; border: 1px solid #34548A; border-radius: 999px; background: #34548A; color: #FFFFFF; font-size: 14px; line-height: 1; font-weight: 400; }
section.gameRockPapaerScissor .section-welcome .actions .green-3,
section.gameRockPapaerScissor .tools-gameRockPapaerScissor .green-3 { background: #00EF9F; border-color: #00EF9F; color: #060614; }
/* ---------------------------------------------- */
section.gameRockPapaerScissor .section-game { display: none; width: 100%; height: 100%; flex: 1 1 auto; }
section.gameRockPapaerScissor .section-game > .wrap { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; overflow: hidden; }
section.gameRockPapaerScissor .section-game video { display: none; }
section.gameRockPapaerScissor .section-game .overlay { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
section.gameRockPapaerScissor .section-game .overlay #countdown-overlay { position: absolute; top: 50%; left: 50%; font-size: 160px; line-height: 1; font-weight: 400; color: #34548A; display: none; transform: translate(-50%, -50%); animation: gameRockPapaerScissorPulse 0.8s infinite; }
@keyframes gameRockPapaerScissorPulse {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    50% { transform: translate(-50%, -50%) scale(1.2); opacity: 0.9; }
    100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
section.gameRockPapaerScissor .result-zone { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-align: center; background: rgba(6, 6, 20, 0.55); color: #FFFD77; }
section.gameRockPapaerScissor .result-zone h2 { margin: 0; padding: 0 24px; font-size: clamp(36px, 8vw, 72px); line-height: 1; font-weight: 700; }
section.gameRockPapaerScissor .result { position: absolute; right: 16px; bottom: 16px; left: 16px; z-index: 2; }
section.gameRockPapaerScissor .result > .wrap { display: flex; flex-direction: row; justify-content: space-between; gap: 12px; margin: 0; padding: 12px 16px; border-radius: 20px; background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); }
section.gameRockPapaerScissor .result .you,
section.gameRockPapaerScissor .result .cpu { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.2; font-weight: 400; }
section.gameRockPapaerScissor .result .score { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #060614; color: #FFFFFF; font-size: 12px; line-height: 1; font-weight: 400; }
section.gameRockPapaerScissor .aside-tools-gameRockPapaerScissor { display: block; position: absolute; right: 24px; bottom: 24px; margin: 0; padding: 0; }
section.gameRockPapaerScissor .tools-gameRockPapaerScissor { display: block; margin: 0; padding: 0; list-style: none; }


/* ---------------------------------------------- */
section.gameRockPapaerScissor.is-playing .section-welcome { display: none; }
section.gameRockPapaerScissor.is-playing .section-game { display: block; }



/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
:root {
    --gameCoseNomiCitta-color-1: #ffffff;
    --gameCoseNomiCitta-color-2: #fcc8a6;
    --gameCoseNomiCitta-color-3: #530fff;
    --gameCoseNomiCitta-color-4: #EF3F00;
}
section.gameCoseNomiCitta { background: var(--gameCoseNomiCitta-color-2); color: var(--gameCoseNomiCitta-color-3); background-image: url(/media/gameCoseNomiCitta/background.png); background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: lighten; }
section.gameCoseNomiCitta * { color: inherit; font-family: inherit; }
section.gameCoseNomiCitta > .wrap { width: 100%; min-height: 100%; }
section.gameCoseNomiCitta .section-welcome > .wrap { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; padding: 40px; }
section.gameCoseNomiCitta .section-welcome .tags {  }
section.gameCoseNomiCitta .section-welcome .tags span { font-size: 8px; line-height: 1; }
section.gameCoseNomiCitta .section-welcome .title { font-size: 80px; line-height: 1; font-weight: 700; }
section.gameCoseNomiCitta .section-welcome .description { margin: 16px 0 16px 0; font-size: 16px; line-height: 1; font-weight: 200; }
section.gameCoseNomiCitta .section-welcome .label { margin: 16px 0 8px; font-size: 16px; line-height: 1; font-weight: 300; }
section.gameCoseNomiCitta .section-welcome .options { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 16px; }
section.gameCoseNomiCitta .section-welcome .options button { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border: 1px solid var(--gameCoseNomiCitta-color-3); border-radius: 999px; background: var(--gameCoseNomiCitta-color-2); color: var(--gameCoseNomiCitta-color-3); font-size: 14px; line-height: 1; font-weight: 400; text-align: center; }
section.gameCoseNomiCitta .section-welcome .options button.active { background: var(--gameCoseNomiCitta-color-3); border-color: var(--gameCoseNomiCitta-color-3); color: var(--gameCoseNomiCitta-color-2); }
section.gameCoseNomiCitta .section-welcome .players { display: flex; flex-direction: column; gap: 8px; width: min(100%, 360px); }
section.gameCoseNomiCitta .section-welcome .players input { width: 100%; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--gameCoseNomiCitta-color-3); border: 1px solid var(--gameCoseNomiCitta-color-3); color: var(--gameCoseNomiCitta-color-2);  font-size: 14px; line-height: 40px; font-weight: 400; text-align: left; }
section.gameCoseNomiCitta .section-welcome .actions { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; margin-top: 16px; align-items: center; color: var(--gameCoseNomiCitta-color-4); }
section.gameCoseNomiCitta .section-welcome .actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 14px; line-height: 1; font-weight: 400; text-align: center; border: 1px solid var(--gameCoseNomiCitta-color-4); background: var(--gameCoseNomiCitta-color-4); color: var(--gameCoseNomiCitta-color-1); }
section.gameCoseNomiCitta .section-welcome .actions button:disabled { opacity: 0.5; cursor: default; }
/* ---------------------------------------------- */
section.gameCoseNomiCitta .section-game { display: none; width: 100%; }
section.gameCoseNomiCitta .section-game > .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; padding: 40px; }
section.gameCoseNomiCitta .section-game .card { width: min(100%, 520px); aspect-ratio: 1 / 1; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; perspective: 1200px; background: transparent; text-align: center; }
section.gameCoseNomiCitta .section-game .card > .wrap { width: 100%; height: 100%; padding: 0; }
section.gameCoseNomiCitta .section-game .card .card-skip { position: absolute; bottom: -16px;  right: -16px; }
section.gameCoseNomiCitta .section-game .card .card-skip button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 8px 14px; border: 1px solid #060614; border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: #060614; font-size: 14px; line-height: 1; font-weight: 400; text-align: center; min-width: 0; background: var(--yellow, #FFFD77); border-color: var(--yellow, #FFFD77); color: #060614; }
section.gameCoseNomiCitta .section-game .card .card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease; }
section.gameCoseNomiCitta .section-game .card.revealed .card-inner { transform: rotateY(180deg); }
section.gameCoseNomiCitta .section-game .card .card-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 24px; }
section.gameCoseNomiCitta .section-game .card .card-front { background: var(--gameCoseNomiCitta-color-4); color: var(--gameCoseNomiCitta-color-1); }
section.gameCoseNomiCitta .section-game .card .card-back { background: var(--gameCoseNomiCitta-color-1); transform: rotateY(180deg); }
section.gameCoseNomiCitta .section-game .card .category { font-weight: 600; font-size: 24px; line-height: normal; padding: 0; }
section.gameCoseNomiCitta .section-game .card .hint { font-size: 16px; line-height: 1.3; margin-top: 12px; opacity: 0.75; text-transform: uppercase; letter-spacing: 0.08em; }
section.gameCoseNomiCitta .section-game .card .letter { font-size: 72px; font-weight: 600; line-height: 1; margin-top: 0; padding: 0; display: flex; align-items: center; justify-content: center; flex: 0; }
section.gameCoseNomiCitta .section-game .card:focus-visible { outline: 2px solid var(--dark); outline-offset: 4px; }
section.gameCoseNomiCitta .section-game .actions { width: min(100%, 720px); margin: 0 auto; text-align: center; }
section.gameCoseNomiCitta .section-game .actions > .wrap { padding: 8px 0 0; }
section.gameCoseNomiCitta .section-game .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
section.gameCoseNomiCitta .section-game .actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: #060614; font-size: 14px; line-height: 1; font-weight: 400; text-align: center; color: #060614; border: 1px solid var(--gameCoseNomiCitta-color-3); background: var(--gameCoseNomiCitta-color-3); color: var(--gameCoseNomiCitta-color-1); }
section.gameCoseNomiCitta .section-game .actions .title { margin: 0 0 12px; font-size: 16px; line-height: 1; font-weight: 400; }

/* ---------------------------------------------- */
section.gameCoseNomiCitta .section-points { display: none; position: absolute; inset: 0; z-index: 20; align-items: center; justify-content: center; padding: 40px; background: rgba(6, 6, 20, 0.45); }
section.gameCoseNomiCitta .section-points.is-visible { display: flex; }
section.gameCoseNomiCitta .section-points > .wrap { display: flex; flex-direction: column; justify-content: center; width: min(100%, 480px); padding: 24px; border-radius: 24px; background: var(--beige, #EFEBE3); color: #060614; }
section.gameCoseNomiCitta .section-points .subtitle { margin: 0 0 12px; font-size: 18px; line-height: 1.2; font-weight: 600; text-align: center; }
section.gameCoseNomiCitta .section-points .content { text-align: center; }
section.gameCoseNomiCitta .section-points .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }




/* ---------------------------------------------- */
section.gameCoseNomiCitta.is-playing .section-welcome { display: none; }
section.gameCoseNomiCitta.is-playing .section-game { display: block; }
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
/* ---------------------------------------------- */
:root {
    --gamegameDontSayIt-color-1: tomato;
    --gamegameDontSayIt-color-2: aquamarine;
    --gamegameDontSayIt-color-3: #530fff;
    --gamegameDontSayIt-color-4: #EF3F00;
}







section.gameDontSayIt { background: var(--gamegameDontSayIt-color-1); color: var(--gamegameDontSayIt-color-2); }
section.gameDontSayIt * { color: inherit; font-family: inherit; }
section.gameDontSayIt > .wrap { width: 100%; min-height: 100%; }
section.gameDontSayIt .section-welcome > .wrap { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 100%; padding: 40px; }


section.gameDontSayIt .section-welcome .tags { display: flex; flex-direction: row; flex-wrap: wrap; }
section.gameDontSayIt .section-welcome .tags span { font-size: 8px; line-height: 1; padding: 4px; border-radius: 8px; background: transparent; }
section.gameDontSayIt .section-welcome .title { margin: 16px 0 0 0; font-size: 84px; line-height: 1; font-weight: 700; }
section.gameDontSayIt .section-welcome .subtitle { margin: 16px 0 0 0; font-size: 16px; line-height: 1; font-weight: 400; }
section.gameDontSayIt .section-welcome .description { margin: 16px 0 16px 0; font-size: 16px; line-height: 1; font-weight: 200; }

section.gameDontSayIt .section-welcome .label { margin: 16px 0 0 0; font-size: 16px; line-height: 1; font-weight: 400; }
section.gameDontSayIt .section-welcome .options { margin: 8px 0 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
section.gameDontSayIt .section-welcome .options button { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 8px 16px; border: 1px solid var(--gamegameDontSayIt-color-2); border-radius: 999px; background: var(--gamegameDontSayIt-color-1); color: var(--gamegameDontSayIt-color-2); font-size: 14px; line-height: 1; font-weight: 400; text-align: center; }
section.gameDontSayIt .section-welcome .options button.active { background: var(--gamegameDontSayIt-color-2); border-color: var(--gamegameDontSayIt-color-2); color: var(--gamegameDontSayIt-color-1); }
section.gameDontSayIt .section-welcome .players { margin: 8px 0 0 0; display: flex; flex-direction: column; gap: 8px; width: min(100%, 360px); }
section.gameDontSayIt .section-welcome .players input { width: 100%; height: 40px; padding: 0 16px; border: 1px solid var(--gamegameDontSayIt-color-2); border-radius: 999px; background: var(--gamegameDontSayIt-color-2); color: var(--gamegameDontSayIt-color-1); font-size: 14px; line-height: 40px; font-weight: 400; text-align: left; }


section.gameDontSayIt .section-welcome .actions { display: flex; flex-wrap: wrap; gap: 8px; min-height: 0; margin-top: 16px; align-items: center; color: var(--gamegameDontSayIt-color-3); }
section.gameDontSayIt .section-welcome .actions button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 8px 14px; border-radius: 999px; font-size: 14px; line-height: 1; font-weight: 400; text-align: center; border: 1px solid var(--gamegameDontSayIt-color-3); background: var(--gamegameDontSayIt-color-3); color: var(--gamegameDontSayIt-color-1); }
section.gameDontSayIt .section-welcome .actions button:disabled { opacity: 0.5; cursor: default; }


/*section.gameDontSayIt .section-welcome .actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px; min-height: 0;  }
section.gameDontSayIt .section-game .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; width: 100%; }
section.gameDontSayIt .section-welcome .actions button,
section.gameDontSayIt .section-game .actions button,
section.gameDontSayIt .section-points .actions button,
section.gameDontSayIt .tools-gameDontSayIt button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 40px; min-height: 40px; padding: 8px 14px; border: 1px solid #060614; border-radius: 999px; background: rgba(255, 255, 255, 0.88); color: #060614; font-size: 14px; line-height: 1; font-weight: 400; text-align: center; }*/
section.gameDontSayIt .section-welcome .actions .green-3,
section.gameDontSayIt .section-game .actions .green-3,
section.gameDontSayIt .section-points .actions .green-3 { background: var(--green-3, #00EF9F); border-color: var(--green-3, #00EF9F); color: #060614; }
section.gameDontSayIt .section-game .actions .yellow { background: var(--yellow, #FFFD77); border-color: var(--yellow, #FFFD77); color: #060614; }
section.gameDontSayIt .section-welcome .actions button:disabled { opacity: 0.45; cursor: default; }
section.gameDontSayIt .section-game { display: none; width: 100%; }
section.gameDontSayIt .section-game > .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; padding: 40px; text-align: center; }
section.gameDontSayIt.is-playing .section-welcome { display: none; }
section.gameDontSayIt.is-playing .section-game { display: block; }
section.gameDontSayIt .section-game .status { display: flex; flex-direction: column; gap: 8px; width: min(100%, 520px); }
section.gameDontSayIt .section-game .status .subtitle { font-size: 16px; line-height: 1; text-transform: uppercase; letter-spacing: 0.08em; opacity: 0.7; }
section.gameDontSayIt .section-game .status .title { font-size: 40px; line-height: 1; font-weight: 700; }
section.gameDontSayIt .section-game .status.current .title { font-size: 72px; }
section.gameDontSayIt .section-game .start-turn { width: min(100%, 520px); }
section.gameDontSayIt .section-game .turn { display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; }
section.gameDontSayIt .section-game .turn.hide,
section.gameDontSayIt .section-game .start-turn.hide { display: none; }
section.gameDontSayIt .section-game .card { width: min(100%, 520px); aspect-ratio: 1 / 1; position: relative; display: flex; align-items: center; justify-content: center; text-align: center; background: transparent; }
section.gameDontSayIt .section-game .card > .wrap { position: relative; display: flex; flex-direction: column; justify-content: center; width: 100%; height: 100%; padding: 32px 24px; border-radius: 24px; background: var(--gamegameDontSayIt-color-2); color: var(--gamegameDontSayIt-color-1); overflow: hidden; }
section.gameDontSayIt .section-game .card .word { font-weight: 600; font-size: clamp(32px, 7vw, 56px); line-height: 1; }
section.gameDontSayIt .section-game .card .line { padding: 18px 0; }
section.gameDontSayIt .section-game .card .line hr { background: currentColor; opacity: 0.35; }
section.gameDontSayIt .section-game .card .taboo-list { display: flex; flex-direction: column; gap: 10px; }
section.gameDontSayIt .section-game .card .taboo-list .taboo-word { font-size: clamp(18px, 3.5vw, 22px); line-height: 1.1; }
section.gameDontSayIt .section-game .card .card-skip { position: absolute; right: -16px; bottom: -16px; z-index: 1; width: auto; }
section.gameDontSayIt .section-game .card .card-skip button { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; padding: 8px 14px; border: 1px solid var(--yellow, #FFFD77); border-radius: 999px; background: var(--yellow, #FFFD77); color: #060614; font-size: 14px; font-weight: 400; line-height: 1; text-align: center; }
section.gameDontSayIt .section-game .guessed { width: min(100%, 720px); text-align: center; }
section.gameDontSayIt .section-game .guessed > .wrap { padding: 8px 0 0; }
section.gameDontSayIt .section-game .guessed .title { margin: 0 0 12px; font-size: 18px; line-height: 1.2; font-weight: 600; }
section.gameDontSayIt .section-game .button-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
section.gameDontSayIt .section-points { display: none; position: absolute; inset: 0; z-index: 20; align-items: center; justify-content: center; padding: 40px; background: rgba(6, 6, 20, 0.45); }
section.gameDontSayIt .section-points.is-visible { display: flex; }
section.gameDontSayIt .section-points > .wrap { display: flex; flex-direction: column; justify-content: center; width: min(100%, 480px); padding: 24px; border-radius: 24px; background: #EFEBE3; color: #060614; text-align: center; }
section.gameDontSayIt .section-points .subtitle { margin: 0 0 12px; font-size: 18px; line-height: 1.2; font-weight: 600; }
section.gameDontSayIt .section-points .content ul { margin: 0; padding: 0; list-style: none; }
section.gameDontSayIt .section-points .content li + li { margin-top: 8px; }
section.gameDontSayIt .section-points .actions { margin-top: 16px; }































@media screen and (max-width: 1794px) { /* 1366 */

}
@media screen and (max-width: 1454px) { /* 1455 / col-4 */

}
@media screen and (max-width: 1114px) { /* 1115 / col-3 */

}
@media screen and (max-width: 774px) { /* 775 / col-2 */

    /*section.gameSpelling .section-newwords .section-actions { top: 16px; right: 8px; }
    section.gameSpelling .feedback .emoji { top: 40px; right: 40px; }
    .emoji { top: 64px; right: 24px; }*/

}
@media screen and (max-width: 688px) { /* 689 */

}