/* Acchiappa i siti brutti — il gioco di Clic (pagina scura, un telefono dove si gioca) */
.g-body { background: var(--nero); color: #EEF1EA; }
.g-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--gutter, 16px); }
.g-head .logo { color: #EEF1EA; width: 84px; display: block; }
.g-head .logo svg { width: 100%; display: block; }
.g-head .lang-switch button { color: #EEF1EA; }

.g-main { display: grid; gap: 36px; justify-items: center; padding: 12px 16px 64px; }
@media (min-width: 960px) { .g-main { grid-template-columns: 1fr auto; align-items: center; max-width: 1180px; margin-inline: auto; column-gap: 72px; padding-top: 32px; } .g-cta { grid-column: 1 / -1; } }
.g-intro { max-width: 520px; }
.g-intro h1 { margin-top: 16px; font-size: clamp(40px, 7vw, 76px); line-height: .96; letter-spacing: -.05em; font-weight: 600; }
.g-intro h1 .soft { color: #9BE3B4; display: block; }
.g-rules { margin-top: 18px; font-size: 17px; line-height: 1.5; color: rgba(238, 241, 234, .72); max-width: 42ch; }
.g-rules b { color: #fff; font-weight: 600; }

/* telefono */
.g-phone { position: relative; width: min(88vw, 360px); aspect-ratio: 390 / 800; border-radius: 13% / 6.2%; background: #1A201D; padding: 3.2%; box-shadow: 0 40px 90px -40px rgba(0,0,0,.8), inset 0 0 0 1.5px rgba(255,255,255,.08); }
.g-screen { container-type: inline-size; position: relative; width: 100%; height: 100%; border-radius: 10.5% / 5%; overflow: hidden; background: #fff; isolation: isolate; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.g-screen::before { content: ""; position: absolute; top: 2.6cqw; left: 50%; width: 27cqw; height: 7.4cqw; margin-left: -13.5cqw; border-radius: 99px; background: #0E1311; z-index: 9; }

/* il sito dietro: da brutto a pulito (--clean da 0 a 1) */
.g-site { position: absolute; inset: 0; padding: 22cqw 7cqw 7cqw; display: flex; flex-direction: column; gap: 4cqw; transition: opacity .4s; }
.g-messy { background: #FFFBE0 repeating-linear-gradient(45deg, rgba(0,0,255,.05) 0 6px, transparent 6px 12px); color: #00008B; font-family: "Times New Roman", serif; opacity: calc(1 - var(--clean)); }
.g-messy .m1 { font-size: 5.4cqw; font-weight: 700; color: #C00; text-align: center; }
.g-messy .m2 { font-size: 3.4cqw; text-align: center; }
.g-messy .m3 { height: 36cqw; background: #bbb linear-gradient(135deg, #ddd 25%, #aaa 25% 50%, #ddd 50% 75%, #aaa 75%); background-size: 8cqw 8cqw; border: 3px ridge #888; }
.g-messy .m4 { font-size: 3.8cqw; }
.g-clean { background: #F5F3EE; color: #0E1311; opacity: var(--clean); }
.g-clean .c1 { font-size: 9cqw; letter-spacing: -.04em; line-height: 1; }
.g-clean .c2 { font-size: 3.8cqw; color: #1F4A3F; }
.g-clean .c3 { height: 44cqw; border-radius: 5cqw; background: linear-gradient(135deg, #CFE3D6, #9BC4AE); }
.g-clean .c4 { align-self: start; padding: 3cqw 6cqw; border-radius: 99px; background: #1F4A3F; color: #fff; font-size: 4cqw; font-weight: 600; }

/* punteggio e tempo */
.g-hud { position: absolute; z-index: 8; top: 12cqw; left: 5cqw; right: 5cqw; display: flex; align-items: center; gap: 3cqw; }
.g-score { min-width: 11cqw; padding: 1.6cqw 3cqw; border-radius: 99px; background: #0E1311; color: #fff; font: 700 4.4cqw/1 var(--font); text-align: center; font-variant-numeric: tabular-nums; }
.g-score.bump { animation: g-bump .3s var(--ease-out); }
.g-score.ouch { background: #D8322E; animation: g-shake .35s; }
@keyframes g-bump { 40% { transform: scale(1.25); } }
@keyframes g-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.g-time { flex: 1; height: 1.6cqw; border-radius: 99px; background: rgba(14,19,17,.15); overflow: hidden; }
.g-time i { display: block; height: 100%; background: #1F4A3F; transform-origin: left; transform: scaleX(var(--t, 1)); }

/* le cose che spuntano */
.g-field { position: absolute; inset: 20cqw 0 22cqw; z-index: 5; }
.g-it { position: absolute; transform: translate(-50%, -50%) scale(.2); opacity: 0; border: 0; cursor: pointer; font: inherit; white-space: nowrap; padding: 2.4cqw 3.6cqw; font-size: 3.8cqw; line-height: 1.2; animation: g-in .25s var(--ease-out) forwards; -webkit-tap-highlight-color: transparent; }
.g-it.bye { animation: g-out .25s ease-in forwards; pointer-events: none; }
.g-it.hit { animation: g-hit .35s ease-in forwards; pointer-events: none; }
@keyframes g-in { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes g-out { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } to { transform: translate(-50%, -50%) scale(.6); opacity: 0; } }
@keyframes g-hit { from { transform: translate(-50%, -50%) scale(1); opacity: 1; } 40% { transform: translate(-50%, -50%) scale(1.15) rotate(-6deg); } to { transform: translate(-50%, -50%) scale(0) rotate(20deg); opacity: 0; } }
/* brutte */
.g-it.flash { background: #FF0; color: #F00; font-weight: 900; font-family: "Comic Sans MS", "Chalkboard SE", cursive; border: 3px dashed #F00; animation: g-in .25s var(--ease-out) forwards, g-blink .35s steps(2) .25s infinite; }
@keyframes g-blink { 50% { background: #F0F; } }
.g-it.cookie { background: #fff; color: #333; border: 1px solid #aaa; box-shadow: 0 6px 18px rgba(0,0,0,.25); font-family: Arial, sans-serif; }
.g-it.cons { background: repeating-linear-gradient(45deg, #FC0 0 10px, #000 10px 20px); color: #fff; font-weight: 900; font-family: Impact, "Arial Black", sans-serif; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.g-it.count { background: #000; color: #0F0; font-family: "Courier New", monospace; border: 2px inset #666; }
.g-it.ie { background: #D4D0C8; color: #000; border: 2px outset #fff; font-family: Tahoma, Verdana, sans-serif; }
.g-it.pdf { background: #fff; color: #B00; border: 1px solid #B00; font-family: Arial, sans-serif; text-decoration: underline; }
.g-it.pop { background: #1E90FF; color: #fff; font-family: Verdana, sans-serif; border: 3px double #fff; box-shadow: 0 0 0 3px #1E90FF; }
.g-it.qui { background: none; color: #00E; font-family: "Times New Roman", serif; font-size: 5cqw; text-decoration: underline; font-weight: 700; }
.g-it.music { background: #800080; color: #fff; font-family: "Comic Sans MS", "Chalkboard SE", cursive; border-radius: 4px; }
/* belle: non si toccano */
.g-it.good { background: #1F4A3F; color: #fff; border-radius: 99px; font-weight: 600; font-family: var(--font); box-shadow: 0 6px 16px -6px rgba(31,74,63,.6); }
.g-it.good.soft { background: #E3EFE8; color: #1F4A3F; }
.g-it.oops { animation: g-shake .35s, g-out .3s ease-in .35s forwards; pointer-events: none; background: #D8322E; }

/* Clic che vola a cliccare */
.g-clic { position: absolute; z-index: 7; left: 0; top: 0; width: 16cqw; overflow: visible; filter: drop-shadow(0 4px 8px rgba(0,0,0,.3)); pointer-events: none;
  transform: translate(var(--cx, 44cqw), var(--cy, 150cqw)); transition: transform .22s cubic-bezier(.3,.9,.4,1.1); }
.g-clic .gb { transform-origin: 10px 5px; transform-box: view-box; }
.g-clic.tap .gb { animation: g-tap .3s var(--ease-out); }
@keyframes g-tap { 35% { transform: scale(1.18, .82); } }

/* schermate sopra il gioco */
.g-over { position: absolute; inset: 0; z-index: 10; display: grid; place-content: center; justify-items: center; gap: 4cqw; padding: 10cqw; text-align: center; background: rgba(14,19,17,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: #fff; font-size: 4.4cqw; }
.g-over[hidden] { display: none; }
.g-over .btn { font-size: 16px; }
.g-best-line { font-size: 3.8cqw; color: rgba(255,255,255,.7); }
.g-final { font-size: 5cqw; }
.g-final b { display: block; font-size: 26cqw; line-height: .9; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.g-rank { font-size: 5.6cqw; font-weight: 600; color: #9BE3B4; }
.g-rec { font-size: 3.8cqw; padding: 1.4cqw 3.4cqw; border-radius: 99px; background: #F4C542; color: #3A2A00; font-weight: 700; }
.g-acts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.g-over .g-acts { margin-top: 2cqw; flex-direction: column; align-items: stretch; }

/* invito finale */
.g-cta { width: 100%; max-width: 760px; text-align: center; padding: 40px 20px; border-radius: 28px; background: #171D1A; display: grid; gap: 14px; justify-items: center; }
.g-cta h2 { font-size: clamp(30px, 5vw, 48px); letter-spacing: -.04em; line-height: 1; font-weight: 600; }
.g-cta h2 .soft { color: rgba(238,241,234,.5); }
.g-cta p { color: rgba(238,241,234,.72); max-width: 44ch; }
.g-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 28px 44px; font-size: 13px; color: rgba(238,241,234,.5); border-top: 1px solid rgba(255,255,255,.08); }
.g-foot nav { display: flex; gap: 18px; }

@media (prefers-reduced-motion: reduce) {
  .g-it, .g-it.flash { animation: none; opacity: 1; transform: translate(-50%, -50%); }
  .g-clic { transition: none; }
}