/* g-test.css · guida «Test d'ingresso Psicologia a Roma»: foglio risposte, matita, cronometro */
.g-test { --clay: #B4573E; --clay-soft: #E2B4A6; }

/* caselle del foglio risposte: il pallino le annerisce scendendo (g-test.js) */
.g-test .art .test-cell { fill: transparent; transition: fill .45s var(--ease, ease); }
.g-test .art .test-cell.is-on { fill: var(--clay); stroke: var(--clay); }
.g-test .art .test-done { fill: var(--clay); stroke: var(--clay); fill-opacity: .85; }
.g-test .art .card { fill: var(--paper); }

/* effetti di scena: base comune (zoom leggero e dissolvenza come «draw») */
.g-test .scene[data-fx="fan"] .scene-art .art,
.g-test .scene[data-fx="highlight"] .scene-art .art,
.g-test .scene[data-fx="stick"] .scene-art .art,
.g-test .scene[data-fx="tick"] .scene-art .art,
.g-test .scene[data-fx="breathe"] .scene-art .art,
.g-test .scene[data-fx="turn"] .scene-art .art { transform: scale(calc(1 + var(--p) * .2)); opacity: calc(1.15 - var(--p) * .9); }

/* fan: i fogli dei quattro atenei si aprono a ventaglio */
.g-test .fan { transform-box: view-box; transform-origin: 260px 300px; transition: transform .1s linear; }
.g-test .fan-1 { transform: rotate(calc(min(1, var(--p) * 2.4) * -36deg)); }
.g-test .fan-2 { transform: rotate(calc(min(1, var(--p) * 2.4) * -12deg)); }
.g-test .fan-3 { transform: rotate(calc(min(1, var(--p) * 2.4) * 12deg)); }
.g-test .fan-4 { transform: rotate(calc(min(1, var(--p) * 2.4) * 36deg)); }

/* highlight: l'evidenziatore passa sulla riga */
.g-test .art .hl { transform-box: view-box; transform-origin: 92px 138px; transform: scaleX(min(1, calc(var(--p) * 2.6))); }

/* stick: i post-it del piano si attaccano uno dopo l'altro */
.g-test .drop { transform: translateY(calc(max(0, .25 - var(--p)) * -240px)); opacity: clamp(0, calc(var(--p) * 6), 1); }
.g-test .drop-2 { transform: translateY(calc(max(0, .4 - var(--p)) * -240px)); opacity: clamp(0, calc(var(--p) * 6 - 1), 1); }
.g-test .drop-3 { transform: translateY(calc(max(0, .55 - var(--p)) * -240px)); opacity: clamp(0, calc(var(--p) * 6 - 2), 1); }

/* tick: la lancetta del cronometro gira con lo scroll */
.g-test .hand { transform-box: view-box; transform-origin: 260px 200px; transform: rotate(calc(var(--p) * 330deg)); }

/* breathe: il cerchio si allarga e si stringe, come un respiro */
.g-test .breath { transform-box: view-box; transform-origin: 260px 130px; transform: scale(calc(1 + sin(calc(var(--p) * 2turn)) * .14)); }

/* turn: il primo foglio scivola via e lascia il secondo tentativo */
.g-test .turn { transform-box: view-box; transform-origin: 110px 320px; transform: translateX(calc(min(1, var(--p) * 2) * -70px)) rotate(calc(min(1, var(--p) * 2) * -9deg)); }

/* ---------- widget ---------- */
.g-test .test-out { margin: .8rem 0 0; padding: .9rem 1rem; border-radius: 10px; background: var(--paper-2); font-size: .95rem; line-height: 1.5; }
.g-test .test-out b { font-family: var(--display); font-weight: 600; }
.g-test .test-out:empty { display: none; }

/* rispondere o lasciare in bianco */
.tguess__boxes { display: flex; gap: .45rem; margin: .2rem 0 .2rem; }
.tguess__boxes i { position: relative; width: 34px; height: 22px; border: 1.5px solid var(--ink); border-radius: 6px; transition: opacity .3s, border-color .3s; }
.tguess__boxes i.is-out { opacity: .35; border-color: var(--mute); }
.tguess__boxes i.is-out::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 1.5px; background: var(--clay); transform: rotate(-24deg); }

/* prova da 3 minuti */
.tmini__clock { font-family: var(--display); font-size: 1.25rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.tmini__clock.is-low { color: var(--clay); }
.tmini__qs { margin: .4rem 0 0; padding: 0; list-style: none; display: grid; gap: .9rem; counter-reset: tq; }
.tmini__q { padding: .9rem 1rem; border-radius: 12px; background: var(--paper-2); }
.tmini__q > p { margin: 0 0 .6rem; line-height: 1.5; }
.tmini__k { font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); font-weight: 600; margin-bottom: .3rem !important; }
.tmini__opts { display: grid; gap: .4rem; }
.tmini__opts button { display: flex; gap: .7rem; align-items: baseline; text-align: left; padding: .55em .8em; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-size: .9rem; line-height: 1.4; transition: background .3s, border-color .3s, color .3s; }
.tmini__opts button b { font-family: var(--display); }
.tmini__opts button:not(:disabled):hover { border-color: var(--ink); }
.tmini__opts button.is-picked { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tmini__opts button.is-ok { border-color: var(--clay); box-shadow: inset 0 0 0 1.5px var(--clay); }
.tmini__opts button.is-ko { background: var(--paper); color: var(--ink); text-decoration: line-through; text-decoration-color: var(--clay); }
.tmini__opts button:disabled { cursor: default; }
.tmini__sol { margin: .7rem 0 0 !important; font-size: .9rem; color: var(--ink-soft); }
.tmini__again { margin-left: .4rem; text-decoration: underline; text-underline-offset: 3px; font-size: .9rem; }

/* piano di studio */
.tplan__label { margin: .4rem 0 .45rem; font-size: .92rem; }
.tchips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.tchips button { padding: .4em .9em; border-radius: 999px; border: 1px solid var(--line); font-size: .84rem; font-weight: 500; transition: background .3s, color .3s, border-color .3s; }
.tchips button.is-on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tplan__phases { display: flex; gap: 4px; margin-bottom: .9rem; }
.tplan__phases div { min-width: 0; padding: .55rem .6rem; border-radius: 8px; background: var(--paper-2); font-size: .8rem; line-height: 1.3; transition: flex-grow .4s var(--ease, ease); }
.tplan__phases div b { display: block; font-family: var(--display); font-size: .95rem; }
.tplan__phases div:last-child { background: color-mix(in srgb, var(--clay) 18%, var(--paper)); }
.tplan__areas { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.tplan__areas li { display: grid; grid-template-columns: 11rem 1fr 3.4rem; align-items: center; gap: .6rem; font-size: .86rem; }
.tplan__areas li span:nth-child(2) { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.tplan__areas li span:nth-child(2) i { display: block; height: 100%; background: var(--clay); border-radius: 3px; transition: width .4s var(--ease, ease); }
.tplan__areas li b { text-align: right; font-family: var(--display); font-weight: 600; }

@media (max-width: 860px) {
  .tplan__areas li { grid-template-columns: 1fr 3.2rem; }
  .tplan__areas li span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; }
  .tplan__phases { flex-direction: column; }
  .tplan__phases div { flex: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .g-test .fan, .g-test .art .hl, .g-test .drop, .g-test .hand, .g-test .breath, .g-test .turn { transform: none !important; opacity: 1 !important; }
  .g-test .fan-1 { transform: rotate(-36deg) !important; } .g-test .fan-2 { transform: rotate(-12deg) !important; }
  .g-test .fan-3 { transform: rotate(12deg) !important; } .g-test .fan-4 { transform: rotate(36deg) !important; }
  .g-test .art .test-cell, .tplan__phases div, .tplan__areas i { transition: none; }
}