:root{--green:#6baa53;--green-dark:#4f8a3a;--text:#414042;--muted:#8a8a8a;--ok:#2e7d32;--ko:#c52d3c;--bg:#fff;--panel:#f4f6f2;color:var(--text);background:var(--bg);font-family:Quicksand,system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;max-width:1200px;margin-inline:auto;padding:0 16px;line-height:1.5}img{max-width:100%}#app{flex-direction:column;height:100dvh;display:flex}main>*,header,footer{flex-shrink:0}header{flex-wrap:wrap;align-items:center;gap:12px;padding-block:12px;display:flex}header .logo{height:48px}#title{background:var(--green);color:#fff;border-radius:6px;flex:300px;margin:0;padding:8px 16px;font-size:1.15rem;font-weight:600}.icon-btn{color:#fff;cursor:pointer;background:#3097d1;border:none;border-radius:50%;width:36px;height:36px;font-size:1.1rem;font-weight:700}#progress{border:1px solid #ddd;border-radius:4px;width:200px;height:28px;position:relative;overflow:hidden}#progress div{background:var(--green);height:100%;transition:width .4s}#progress span{place-items:center;font-size:.85rem;display:grid;position:absolute;inset:0}main{flex-direction:column;flex:1;min-height:0;display:flex;overflow-y:auto}.text{width:100%;max-width:820px;margin-inline:auto}.text h2{text-align:center;font-weight:500}footer{justify-content:flex-end;padding-block:12px;display:flex}.btn{background:var(--green);color:#fff;cursor:pointer;border:none;border-radius:4px;padding:10px 20px;font-family:inherit;font-size:1rem;font-weight:600;box-shadow:0 1px 4px #0004}.btn:hover{background:var(--green-dark)}.btn:disabled{opacity:.5;cursor:wait}.login{grid-template-columns:1fr auto;gap:12px;width:100%;max-width:460px;margin:16px auto;display:grid}.login label,.login .feedback{grid-column:1}.login label{gap:4px;font-weight:600;display:grid}.login input{font:inherit;border:1px solid #ccc;border-radius:4px;padding:8px 10px}.login .btn{grid-area:2/2;align-self:end}.logos{flex-wrap:wrap;flex-shrink:0;justify-content:center;align-items:center;gap:24px;padding-block:0 12px;display:flex}.logos img{object-fit:contain;width:auto;height:min(40px,6vh)}.images{flex-wrap:wrap;justify-content:center;gap:16px;margin-block:24px;display:flex}.images img{width:auto;max-height:320px}.images img[src*="/badges/"]{max-height:min(140px,18vh)}.game-bar{justify-content:flex-end;align-items:center;gap:16px;margin-block:12px;display:flex}.timer{margin:0;font-weight:700}.feedback{min-height:1.5em;font-weight:700}.feedback.ok{color:var(--ok)}.feedback.ko{color:var(--ko)}.game{background:var(--panel);border-radius:8px;padding:16px}.game h3{margin-top:0}.cards{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;display:grid}.card{perspective:1000px;cursor:pointer;-webkit-user-select:none;user-select:none;touch-action:manipulation;border-radius:10px;position:relative}.card:focus-visible{outline-offset:2px;outline:3px solid #3097d1}.card-label{text-align:center;margin:0 0 4px;font-size:.9rem;font-weight:600}.card-inner{aspect-ratio:600/566;transform-style:preserve-3d;transition:transform .5s;position:relative}.card.flipped .card-inner{transform:rotateY(180deg)}.card-inner img{object-fit:contain;backface-visibility:hidden;background:#fff;border-radius:10px;width:100%;height:100%;position:absolute;inset:0;box-shadow:0 1px 4px #0003}.card-inner .back{transform:rotateY(180deg)}.card:hover:not(.disabled) .card-inner img{box-shadow:0 0 0 3px var(--green)}.card.disabled{opacity:.35;cursor:not-allowed}.card.chosen{opacity:1}.card.chosen .card-inner img{box-shadow:0 0 0 4px var(--green)}.card.reveal .card-inner img{animation:1s ease-in-out infinite alternate reveal}@keyframes reveal{0%{box-shadow:0 0 0 2px var(--ok);transform:scale(1)}to{box-shadow:0 0 0 6px var(--ok), 0 0 18px var(--ok);transform:scale(1.06)}}.card.right .card-inner img{animation:.6s ease-out both right}@keyframes right{0%{box-shadow:0 0 0 0 var(--ok);transform:scale(1)}40%{box-shadow:0 0 0 6px var(--ok), 0 0 24px var(--ok);transform:scale(1.12)}to{box-shadow:0 0 0 5px var(--ok);transform:scale(1)}}.question{animation:.45s ease-out question-in}.question.leaving{animation:.4s ease-in forwards question-out}@keyframes question-in{0%{opacity:0;transform:translate(40px)scale(.95)}}@keyframes question-out{to{opacity:0;transform:translate(-40px)scale(.95)}}@media (prefers-reduced-motion:reduce){.card.right .card-inner img,.card.reveal .card-inner img,.question,.question.leaving,.suspense *,.reveal-you{animation-duration:10ms;animation-iteration-count:1}}.loader{border:5px solid #0002;border-top-color:var(--green);border-radius:50%;width:48px;height:48px;margin:40px auto;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.flip-btn{cursor:pointer;background:#fffd;border:none;border-radius:50%;width:32px;height:32px;font-size:1.1rem;position:absolute;bottom:6px;right:6px;box-shadow:0 1px 3px #0005}.definition,.threat{grid-template-columns:minmax(200px,1fr) 2fr;align-items:start;gap:24px;display:grid}.threat{grid-template-columns:2fr minmax(200px,1fr)}.question-side{gap:8px;display:grid;position:sticky;top:12px}.question{border-radius:10px;width:100%;box-shadow:0 1px 4px #0003}.choice{flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;display:flex}.choice .card{width:min(280px,40vw)}.or{font-size:1.2rem;font-weight:700}.slots{grid-template-columns:repeat(7,1fr);gap:8px;display:grid}.slot{aspect-ratio:600/566;border:2px dashed #bbb;border-radius:10px}.slot .card{pointer-events:none}.actor{gap:16px;display:grid}.actor-answer{text-align:center;justify-items:center;gap:8px;scroll-margin-bottom:9em;display:grid}.actor-answer img{max-height:min(240px,30vh)}.last-actor{text-align:center;background:var(--panel);border-radius:0 0 8px 8px;padding:0 16px 16px;position:sticky;bottom:0;box-shadow:0 -6px 8px -6px #0003}.last-actor p{margin-top:0;padding-top:12px}.suspense{grid-template-columns:repeat(3,12px);justify-content:center;gap:16px 10px;margin:24px 0;display:grid}.suspense span{background:var(--green);color:#fff;border-radius:50%;grid-column:1/-1;justify-self:center;place-items:center;width:120px;height:120px;font-size:4rem;font-weight:700;animation:1.2s ease-in-out infinite heartbeat;display:grid}.suspense i{background:var(--green);border-radius:50%;width:12px;height:12px;animation:1.2s ease-in-out infinite dot}.suspense i:nth-of-type(2){animation-delay:.2s}.suspense i:nth-of-type(3){animation-delay:.4s}@keyframes heartbeat{0%,to{transform:scale(1);box-shadow:0 0 #6baa5366}15%{transform:scale(1.08)}30%{transform:scale(1)}45%{transform:scale(1.05);box-shadow:0 0 0 16px #6baa5300}}@keyframes dot{0%,80%,to{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-8px)}}.reveal-you{justify-items:center;gap:8px;animation:.8s cubic-bezier(.2,1.4,.4,1) both reveal-you;display:grid}@keyframes reveal-you{0%{opacity:0;filter:blur(6px);transform:scale(.6)}}.end-game-text{font-size:1.3rem}.results{text-align:center;margin-top:32px}.table-wrap{overflow-x:auto}table{border-collapse:collapse;min-width:320px;margin:0 auto 24px}th,td{border-bottom:1px solid #ddd;padding:6px 14px}tr.me{background:#e3f1dc;font-weight:700}dialog{border:none;border-radius:8px;max-width:min(640px,90vw);box-shadow:0 4px 24px #0005}dialog form{text-align:right;margin-top:12px}@media (max-width:700px){.definition,.threat{grid-template-columns:1fr}.question-side{position:static}.threat .question-side{order:-1}.threat .question-side .card{justify-self:center;width:min(220px,60vw)}.definition .question{justify-self:center;max-width:320px}.slots{grid-template-columns:repeat(4,1fr)}.cards{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}}
