section.coseNomiCitta {  }
section.coseNomiCitta * { color: inherit; }
section.coseNomiCitta > .wrap {  }
section.coseNomiCitta .section-welcome {  }
section.coseNomiCitta .section-welcome .actions { margin: 8px 0 0 0; }
/* ---------------------------------------------- */
section.coseNomiCitta .section-game { display: none; }
section.coseNomiCitta .section-game > .wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; width: 100%; padding: 24px; }
section.coseNomiCitta .section-game .card { width: 320px; aspect-ratio: 3 / 4; position: relative; display: flex; align-items: center; justify-content: center; cursor: pointer; perspective: 1200px; background: transparent; text-align: center; }
section.coseNomiCitta .section-game .card > .wrap { width: 100%; height: 100%; padding: 0; }
section.coseNomiCitta .section-game .card .card-skip { position: absolute; bottom: -16px; right: -16px; }
section.coseNomiCitta .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 var(--rududu-yellow); border-radius: 999px; background: var(--rududu-yellow); color: var(--rududu-black); font-size: 16px; line-height: 1; font-weight: 400; text-align: center; }
section.coseNomiCitta .section-game .card .card-inner { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.6s ease; }
section.coseNomiCitta .section-game .card.revealed .card-inner { transform: rotateY(180deg); }
section.coseNomiCitta .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.coseNomiCitta .section-game .card .card-front { background: var(--rududu-tan); color: var(--rududu-white); border: 4px solid var(--rududu-white); }
section.coseNomiCitta .section-game .card .card-back { background: var(--rududu-white); color: var(--rududu-tan); border: spx solid var(--rududu-tan); transform: rotateY(180deg); }
section.coseNomiCitta .section-game .card .category { font-weight: 600; font-size: 40px; line-height: normal; padding: 0; }
section.coseNomiCitta .section-game .card .hint { font-size: 16px; line-height: 1.3; margin-top: 12px; opacity: 0.75; text-transform: uppercase; }
section.coseNomiCitta .section-game .card .letter { font-size: 80px; font-weight: 600; line-height: 1; margin-top: 0; padding: 0; display: flex; align-items: center; justify-content: center; flex: 0; }
section.coseNomiCitta .section-game .card:focus-visible { outline: 2px solid var(--rududu-black); outline-offset: 4px; }

section.coseNomiCitta .section-game .title {  }
section.coseNomiCitta .section-game .actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
section.coseNomiCitta .section-game .actions button { display: inline-flex; align-items: center; justify-content: center; padding: 8px 16px; border-radius: 999px; background: var(--rududu-white); color: var(--rududu-black); font-size: 16px; line-height: 1; font-weight: 400; text-align: center; border: 1px solid var(--rududu-black); }
/* ---------------------------------------------- */
section.coseNomiCitta .section-points { display: none; position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; background: var(--rududu-black); color: var(--rududu-white) }
section.coseNomiCitta .section-points > .wrap { padding: 24px; }
section.coseNomiCitta .section-points .subtitle { font-size: 16px; line-height: 16px; font-weight: 600; }
section.coseNomiCitta .section-points .content { margin: 16px 0 0 0; /*display: flex; flex-direction: column; gap: 8px;*/ }
section.coseNomiCitta .section-points .content .player { /*display: flex; align-items: center; justify-content: space-between; gap: 16px;*/ }
section.coseNomiCitta .section-points .content .player-score {  }
section.coseNomiCitta .section-points .content .player-name { font-weight: 600; }

section.coseNomiCitta .section-points  > .wrap > button {
    position: absolute;
    top: 24px;
    right: 24px;
    font-size: 40px;
    color: var(--rududu-white);
}
/* ---------------------------------------------- */
section.coseNomiCitta.is-playing .section-welcome { display: none; }
section.coseNomiCitta.is-playing .section-game { display: block; }