/* ABAB · «Pausa caffè», il gioco nascosto */
.abab-g, .abab-g-peek {
	--g-yellow: #FBDA5A; --g-ink: #1D1B16; --g-ink-2: #2E2A1F; --g-paper: #FFFBEA; --g-red: #B3241B;
	--g-cond: 'Barlow Condensed', 'Arial Narrow', sans-serif; --g-body: 'Barlow', system-ui, sans-serif;
}

/* Il gioco */
html.abab-g-open, html.abab-g-open body { overflow: hidden; }
.abab-g { position: fixed; inset: 0; z-index: 2000; background: var(--g-yellow); color: var(--g-ink); font-family: var(--g-body); display: flex; flex-direction: column; padding: calc(10px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom)); opacity: 0; transform: translateY(24px); transition: opacity .2s ease, transform .22s ease; overscroll-behavior: contain; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.abab-g[hidden] { display: none; }
.abab-g.is-in { opacity: 1; transform: none; }
.abab-g-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 520px; width: 100%; margin: 0 auto; }
.abab-g-brand { margin: 0; font: 800 22px/1 var(--g-cond); text-transform: uppercase; letter-spacing: .04em; }
.abab .abab-g-x, .abab-g-x { width: 44px; height: 44px; display: grid; place-items: center; border: 2.5px solid var(--g-ink); border-radius: 8px; background: var(--g-paper); color: var(--g-ink); padding: 0; cursor: pointer; box-shadow: 3px 3px 0 var(--g-ink); }
.abab-g-x svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }

.abab-g-screen { display: none; flex: 1; flex-direction: column; max-width: 520px; width: 100%; margin: 0 auto; min-height: 0; }
.abab-g-screen.is-on { display: flex; }
.abab-g-screen[data-g-screen="intro"], .abab-g-screen[data-g-screen="fine"] { justify-content: center; gap: 14px; text-align: left; }
.abab-g-kicker { margin: 0; font: 700 22px/1.1 var(--g-cond); letter-spacing: .02em; }
.abab-g-h { margin: 0; font: 800 clamp(56px, 18vw, 96px)/.9 var(--g-cond); text-transform: uppercase; letter-spacing: -.01em; }
.abab-g-tx { margin: 0; font-size: 18px; line-height: 1.4; }
.abab-g-warn { display: flex; align-items: center; gap: 10px; font-size: 16px; padding: 10px 12px; border: 2px dashed var(--g-ink); border-radius: 8px; }
.abab-g-warn .abab-g-cup { flex: 0 0 auto; width: 30px; height: 30px; }
.abab-g-cup { fill: var(--g-paper); stroke: var(--g-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.abab-g-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 22px; border: 2.5px solid var(--g-ink); border-radius: 8px; background: var(--g-ink); color: var(--g-yellow) !important; font: 800 21px/1 var(--g-cond); text-transform: uppercase; letter-spacing: .04em; text-decoration: none !important; cursor: pointer; box-shadow: 4px 4px 0 rgba(29, 27, 22, .35); }
.abab-g-btn:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(29, 27, 22, .35); }
.abab-g-btn.is-ghost { background: var(--g-paper); color: var(--g-ink) !important; }
.abab-g-btn:focus-visible, .abab-g-x:focus-visible { outline: 3px solid var(--g-ink); outline-offset: 3px; }
.abab-g-best { margin: 0; font: 700 17px/1.2 var(--g-cond); letter-spacing: .02em; }
.abab-g-acts { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
.abab-g-big { margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.abab-g-big strong { font: 800 clamp(88px, 30vw, 140px)/.85 var(--g-cond); }
.abab-g-big span { font: 800 26px/1 var(--g-cond); text-transform: uppercase; }

/* Partita */
.abab-g-screen[data-g-screen="gioco"] { padding-top: 12px; gap: 12px; }
.abab-g-hud { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.abab-g-score { margin: 0; font: 700 18px/1 var(--g-cond); }
.abab-g-score strong { font-size: 34px; font-weight: 800; }
.abab-g-time { position: relative; flex: 0 0 132px; height: 34px; border: 2.5px solid var(--g-ink); border-radius: 999px; background: var(--g-paper); overflow: hidden; }
.abab-g-time span { position: absolute; inset: 0; background: var(--g-ink); transform-origin: left center; }
.abab-g-time b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 18px/1 var(--g-cond); color: var(--g-yellow); mix-blend-mode: difference; }
.abab-g.is-ultimi .abab-g-time span { background: var(--g-red); }
.abab-g.is-ultimi .abab-g-time b { mix-blend-mode: normal; color: var(--g-paper); }

.abab-g-ufficio { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; align-content: center; gap: 10px; }
.abab-g-buca { position: relative; overflow: hidden; border-radius: 10px 10px 4px 4px; background: rgba(29, 27, 22, .08); aspect-ratio: 1 / 1.05; max-height: 22vh; width: 100%; justify-self: center; }
@supports not (aspect-ratio: 1) { .abab-g-buca { height: 120px; } }
.abab-g-desk { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: var(--g-ink); border-top: 5px solid var(--g-ink-2); z-index: 2; pointer-events: none; }
.abab-g-desk span { position: absolute; left: 50%; top: 26%; width: 34%; height: 18%; margin-left: -17%; background: var(--g-yellow); border-radius: 2px; opacity: .85; }
.abab .abab-g-chi, .abab-g-chi { position: absolute; left: 50%; bottom: 0; z-index: 1; width: 84%; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, 102%); transition: transform .16s cubic-bezier(.3, 1.4, .5, 1); -webkit-tap-highlight-color: transparent; }
.abab-g-chi svg { display: block; width: 100%; height: auto; }
.abab-g-buca.is-up .abab-g-chi { transform: translate(-50%, 21%); }
.abab-g-buca.is-cup .abab-g-chi { width: 60%; }
.abab-g-buca.is-cup.is-up .abab-g-chi { transform: translate(-50%, -48%); }
.abab-g-buca.is-hit .abab-g-chi { transform: translate(-50%, 25%) rotate(-8deg); transition-duration: .08s; }
.abab-g-buca.is-oops .abab-g-chi { transform: translate(-50%, -40%) rotate(24deg); }
.abab-g-buca.is-oops { background: rgba(179, 36, 27, .22); }
.abab-g-chi:focus-visible { outline: 3px solid var(--g-ink); outline-offset: -3px; }
.abab-g-float { position: absolute; left: 50%; top: 4%; z-index: 3; transform: translateX(-50%); font: 800 22px/1 var(--g-cond); color: var(--g-ink); background: var(--g-paper); border: 2px solid var(--g-ink); border-radius: 6px; padding: 2px 6px; pointer-events: none; animation: abab-g-su .7s ease-out forwards; }
@keyframes abab-g-su { to { transform: translate(-50%, -26px); opacity: 0; } }
.abab-g-msg { margin: 0; min-height: 22px; text-align: center; font: 700 17px/1.2 var(--g-cond); color: var(--g-red); }
.abab-g.is-scossa .abab-g-ufficio { animation: abab-g-scossa .32s ease; }
@keyframes abab-g-scossa { 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }

@media (prefers-reduced-motion: reduce) {
	.abab-g, .abab-g-peek-pig, .abab-g-chi { transition: none; }
	.abab-g.is-scossa .abab-g-ufficio, .abab-g-float { animation: none; }
}

/* Condivisione */
.abab-g-btn.is-share { gap: 10px; background: var(--g-yellow); color: var(--g-ink) !important; }
.abab-g-btn.is-share svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.abab-g-btn[disabled] { opacity: .6; }
.abab-g-screen[data-g-screen="fine"] { overflow-y: auto; -webkit-overflow-scrolling: touch; padding-bottom: 8px; }
.abab-g-story { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.abab-g-story img { width: 46%; max-width: 220px; height: auto; border: 2.5px solid var(--g-ink); border-radius: 8px; box-shadow: 4px 4px 0 var(--g-ink); }
.abab-g-story-acts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; }
.abab-g-story-acts .abab-g-btn { min-height: 48px; font-size: 18px; padding: 0 10px; }
.abab-g-story-nota { margin: 0; font-size: 15px; line-height: 1.35; text-align: center; }
.abab-g-screen[data-g-screen="fine"] { justify-content: flex-start; }
.abab-g-screen[data-g-screen="fine"] > :first-child { margin-top: auto; }
.abab-g-screen[data-g-screen="fine"] > :last-child { margin-bottom: auto; }

/* 1.15 · La toilette: tre giochi */
.abab-g { overflow-y: auto; -webkit-overflow-scrolling: touch; }
.abab-g-top { min-height: 44px; }
.abab-g-brand { flex: 1; }
.abab-g-x.is-back svg { stroke-width: 3; }
.abab-g-x[hidden] { display: none; }
.abab-g-h.is-hub { font-size: clamp(40px, 11.5vw, 68px); line-height: .92; }
.abab-g-h.is-game { font-size: clamp(46px, 14vw, 84px); }
.abab-g-screen[data-g-screen="hub"] { justify-content: flex-start; padding-top: 18px; }
.abab-g-screen[data-g-screen="hub"] > :first-child { margin-top: auto; }
.abab-g-screen[data-g-screen="hub"] > :last-child { margin-bottom: auto; }
.abab-g-screen[data-g-screen="hub"] .abab-g-kicker { font-size: 26px; }
.abab-g-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.abab .abab-g-card, .abab-g-card { display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; width: 100%; padding: 12px 14px; text-align: left; border: 2.5px solid var(--g-ink); border-radius: 10px; background: var(--g-paper); color: var(--g-ink); box-shadow: 4px 4px 0 var(--g-ink); cursor: pointer; font: inherit; text-transform: none; letter-spacing: 0; }
.abab-g-card:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--g-ink); }
.abab-g-card:focus-visible { outline: 3px solid var(--g-ink); outline-offset: 3px; }
.abab-g-card-ic { width: 64px; height: 64px; display: block; overflow: hidden; border-radius: 8px; background: var(--g-yellow); position: relative; }
.abab-g-card-ic svg { display: block; width: 100%; height: 100%; }
.abab-g-card-ic.is-porco svg { width: 46px; height: auto; position: absolute; left: 9px; top: 5px; }
.abab-g-card-tx { display: flex; flex-direction: column; gap: 2px; }
.abab-g-card-tx strong { font: 800 23px/1.05 var(--g-cond); text-transform: uppercase; letter-spacing: .02em; }
.abab-g-card-tx span { font-size: 15px; line-height: 1.3; }
.abab-g-card-tx em { font: 700 15px/1.2 var(--g-cond); font-style: normal; letter-spacing: .02em; margin-top: 2px; }
.abab-g-card-tx em:empty { display: none; }

.abab-g-livelli { border: 0; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; min-width: 0; }
.abab-g-livelli legend { padding: 0; margin: 0 0 8px; font: 700 17px/1 var(--g-cond); letter-spacing: .03em; }
.abab-g-livelli label { position: relative; cursor: pointer; }
.abab-g-livelli input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.abab-g-livelli label > span { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-height: 62px; padding: 8px 8px; border: 2.5px solid var(--g-ink); border-radius: 8px; background: var(--g-paper); text-align: center; }
.abab-g-livelli strong { font: 800 18px/1 var(--g-cond); text-transform: uppercase; }
.abab-g-livelli small { font-size: 13px; line-height: 1.1; }
.abab-g-livelli input:checked + span { background: var(--g-ink); color: var(--g-yellow); }
.abab-g-livelli input:focus-visible + span { outline: 3px solid var(--g-ink); outline-offset: 2px; }
.abab-g-screen[data-g-screen="intro"] { justify-content: flex-start; }
.abab-g-screen[data-g-screen="intro"] > :first-child { margin-top: auto; }
.abab-g-screen[data-g-screen="intro"] > :last-child { margin-bottom: auto; }

.abab-g-screen[data-g-screen="tela"] { padding-top: 12px; gap: 10px; }
.abab-g-score.is-rec { font-size: 16px; }
.abab-g-tela { position: relative; flex: 1; min-height: 300px; border: 2.5px solid var(--g-ink); border-radius: 10px; overflow: hidden; background: var(--g-paper); touch-action: none; }
.abab-g-tela canvas { display: block; touch-action: none; }
.abab-g-tela-hint { position: absolute; left: 50%; top: 18%; transform: translateX(-50%); margin: 0; padding: 8px 14px; background: var(--g-ink); color: var(--g-yellow); border-radius: 999px; font: 800 18px/1 var(--g-cond); text-transform: uppercase; letter-spacing: .03em; white-space: nowrap; pointer-events: none; animation: abab-g-pulse 1.4s ease-in-out infinite; }
.abab-g-tela-hint[hidden] { display: none; }
@keyframes abab-g-pulse { 50% { transform: translateX(-50%) scale(1.06); } }
.abab-g-link { align-self: center; margin-top: 6px; font: 700 17px/1.2 var(--g-cond); color: var(--g-ink) !important; text-underline-offset: 3px; letter-spacing: .02em; }
@media (prefers-reduced-motion: reduce) { .abab-g-tela-hint { animation: none; } }
.abab-g-warn[hidden] { display: none; }

/* 1.15.1 · Protezione dagli stili del tema (Hello Elementor colora e blocca su una riga tutti i pulsanti) */
.abab-g p { margin: 0; }
.abab-g h2 { margin: 0; }
.abab-g button { white-space: normal; transition: none; text-decoration: none; letter-spacing: inherit; line-height: inherit; min-width: 0; }
.abab-g .abab-g-card, .abab-g .abab-g-card:hover, .abab-g .abab-g-card:focus, .abab-g .abab-g-card:active {
	background: var(--g-paper); color: var(--g-ink); border: 2.5px solid var(--g-ink); border-radius: 10px;
	padding: 12px 12px; font-size: 16px; font-weight: 400; text-align: left; white-space: normal; text-transform: none; letter-spacing: 0; line-height: 1.3;
}
.abab-g .abab-g-card { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; align-items: center; width: 100%; box-sizing: border-box; }
.abab-g .abab-g-card-ic { width: 56px; height: 56px; }
.abab-g .abab-g-card-ic.is-porco svg { width: 40px; left: 8px; top: 4px; }
.abab-g .abab-g-card-tx { min-width: 0; overflow-wrap: break-word; }
.abab-g .abab-g-card-tx strong { font-size: 21px; }
.abab-g .abab-g-card-tx span { font-size: 14px; line-height: 1.3; }
.abab-g .abab-g-btn, .abab-g .abab-g-btn:hover, .abab-g .abab-g-btn:focus, .abab-g .abab-g-btn:active {
	background: var(--g-ink); color: var(--g-yellow); border: 2.5px solid var(--g-ink); border-radius: 8px;
	padding: 0 18px; font: 800 21px/1.1 var(--g-cond); text-transform: uppercase; letter-spacing: .04em; white-space: normal; text-align: center;
}
.abab-g .abab-g-btn.is-ghost, .abab-g .abab-g-btn.is-ghost:hover, .abab-g .abab-g-btn.is-ghost:focus, .abab-g .abab-g-btn.is-ghost:active { background: var(--g-paper); color: var(--g-ink); }
.abab-g .abab-g-btn.is-share, .abab-g .abab-g-btn.is-share:hover, .abab-g .abab-g-btn.is-share:focus, .abab-g .abab-g-btn.is-share:active { background: var(--g-yellow); color: var(--g-ink); }
.abab-g .abab-g-btn[disabled] { opacity: .6; }
.abab-g .abab-g-x, .abab-g .abab-g-x:hover, .abab-g .abab-g-x:focus, .abab-g .abab-g-x:active { background: var(--g-paper); color: var(--g-ink); border: 2.5px solid var(--g-ink); border-radius: 8px; padding: 0; flex: 0 0 44px; }
.abab-g .abab-g-chi, .abab-g .abab-g-chi:hover, .abab-g .abab-g-chi:focus, .abab-g .abab-g-chi:active { background: none; border: 0; padding: 0; color: inherit; }
.abab-g .abab-g-livelli { padding: 0; margin: 4px 0 0; border: 0; }
.abab-g .abab-g-livelli { display: block; min-width: 0; }
.abab-g .abab-g-livelli legend { float: none; display: block; width: auto; }
.abab-g .abab-g-livelli-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.abab-g .abab-g-livelli label { display: block; line-height: inherit; vertical-align: top; margin: 0; }
.abab-g .abab-g-livelli label > span { box-sizing: border-box; height: 100%; }

/* Proporzioni della toilette */
.abab-g .abab-g-screen[data-g-screen="hub"] { gap: 12px; }
.abab-g .abab-g-h.is-hub { font-size: clamp(34px, 9.6vw, 56px); line-height: .95; }
.abab-g .abab-g-screen[data-g-screen="hub"] .abab-g-tx { font-size: 17px; line-height: 1.4; }
.abab-g .abab-g-cards { margin-top: 6px; gap: 12px; }
.abab-g .abab-g-h.is-game { font-size: clamp(42px, 12vw, 72px); line-height: .95; }
.abab-g .abab-g-tx { font-size: 17px; line-height: 1.4; }

/* 1.16 · L'arrivo nella toilette */
.abab-g-scivolo { position: absolute; inset: 0; z-index: 5; overflow: hidden; pointer-events: auto; }
.abab-g-scivolo[hidden] { display: none; }
.abab-g-scivolo svg, .abab-g-scivolo canvas { position: absolute; left: 0; top: 0; }
.abab-g-scivolo-pig { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
.abab-g-scivolo-pig svg { display: block; width: 100%; height: 100%; }
.abab-g-arrivo { position: relative; align-self: center; width: 74px; height: 118px; margin-bottom: -4px; }
.abab-g-arrivo-pig { display: block; width: 74px; height: 117px; transform-origin: 50% 100%; }
.abab-g-arrivo-pig svg { display: block; width: 100%; height: 100%; }
.abab-g-stelle { position: absolute; left: 50%; top: 6px; width: 96px; height: 30px; margin-left: -48px; opacity: 0; pointer-events: none; }
.abab-g-stelle i { position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; }
.abab-g-stelle svg { display: block; width: 100%; height: 100%; fill: var(--g-ink); }
.abab-g.is-scivolo .abab-g-screen[data-g-screen="hub"] > *, .abab-g.is-scivolo .abab-g-top { opacity: 0; }
.abab-g.is-atterrato .abab-g-arrivo-pig { animation: abab-g-atterra .5s ease-out; }
.abab-g.is-atterrato .abab-g-stelle { animation: abab-g-stelle-on 2.6s ease forwards; }
.abab-g.is-atterrato .abab-g-stelle i { animation: abab-g-orbita 1.1s linear infinite; }
.abab-g.is-atterrato .abab-g-stelle i:nth-child(2) { animation-delay: -.37s; }
.abab-g.is-atterrato .abab-g-stelle i:nth-child(3) { animation-delay: -.73s; }
.abab-g.is-atterrato .abab-g-top, .abab-g.is-atterrato .abab-g-screen[data-g-screen="hub"] > :not(.abab-g-arrivo) { animation: abab-g-entra .38s ease-out both; }
.abab-g.is-atterrato .abab-g-screen[data-g-screen="hub"] > :nth-child(3) { animation-delay: .06s; }
.abab-g.is-atterrato .abab-g-screen[data-g-screen="hub"] > :nth-child(4) { animation-delay: .12s; }
.abab-g.is-atterrato .abab-g-screen[data-g-screen="hub"] > :nth-child(5) { animation-delay: .18s; }
@keyframes abab-g-atterra { 0% { transform: scale(1.25, .7); } 35% { transform: scale(.9, 1.12); } 65% { transform: scale(1.05, .95); } 100% { transform: none; } }
@keyframes abab-g-stelle-on { 0%, 75% { opacity: 1; } 100% { opacity: 0; } }
@keyframes abab-g-orbita { from { transform: rotate(0deg) translateX(40px) rotate(0deg) scaleY(2.2); } to { transform: rotate(360deg) translateX(40px) rotate(-360deg) scaleY(2.2); } }
@keyframes abab-g-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.abab-g-stelle { transform: scaleY(.45); }
@media (prefers-reduced-motion: reduce) {
	.abab-g.is-atterrato .abab-g-arrivo-pig, .abab-g.is-atterrato .abab-g-stelle, .abab-g.is-atterrato .abab-g-stelle i, .abab-g.is-atterrato .abab-g-top, .abab-g.is-atterrato .abab-g-screen[data-g-screen="hub"] > * { animation: none; }
}