body,p{font-style:normal}a{color:#ff1c9d}.card-grid{background-color:var(--bg);padding-top:2px;padding-bottom:50px;width:100%;display:grid;grid-template-columns:repeat(4,auto);gap:5px;justify-content:center}@media (min-width: 768px){.card-grid{margin-top:50px}}.card-grid-container{display:flex}.card{border:2px solid var(--border-neutral);border-width:2px 2px 2px 2px;background-color:var(--card-bg);box-sizing:border-box;width:87px;height:118px;display:flex;flex-direction:column;justify-content:top;align-items:center;cursor:pointer;border-radius:8px;box-shadow:0 4px 8px #0000001a;position:relative}.card.innocent{border:1px solid var(--border-innocent);background-color:var(--background-innocent)}.card.criminal{border:1px solid var(--border-criminal);background-color:var(--background-criminal)}.card-grid-container.in-progress .card.consumed .hint{opacity:.3;transition:all .1s ease-in-out}.card-grid-container.in-progress .card.consumed.innocent{border:1px solid var(--background-innocent-consumed);background-color:var(--background-innocent-consumed)}.card-grid-container.in-progress .card.consumed.criminal{border:1px solid var(--background-criminal-consumed);background-color:var(--background-criminal-consumed)}.card-grid-container.in-progress .card.consumed hr{opacity:0}.card-grid-container.completed .card.consumed,.card-grid-container.completed .card.consumed *{transition:all .25s ease-in-out}.card-grid-container.completed{transform:scale(.98);transition:all .7s ease-in-out;transition-delay:.25s}.card hr{width:82px;margin:2px 0 0;background-color:#7b7b7b5a;height:1.5px;border-width:0px;border-radius:5px}img{margin-bottom:0}.card img,.modal img{opacity:.5}.card-front,.card-back{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;width:100%;color:var(--text);padding:0}.card-back{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;color:var(--text);margin-top:5px}.card-back p.hint{font-size:11px;color:var(--text);opacity:.87;margin-top:auto;margin-bottom:auto;padding:0 1px}.card-front p.face{font-size:30px;margin-bottom:3px}.card-back p.face{font-size:17px;margin-bottom:2px}.card p.profession{font-size:11px;opacity:.65}.in-progress .profession-referenced p.profession{opacity:.95;font-weight:700}.card-front img,.card-back img{height:30px;width:auto;object-fit:contain}.card h3,.card p{font-size:12px;margin:0;line-height:1em;text-align:center}.card-back h3.name{font-size:14px;text-shadow:0px 0px 5px rgb(0,0,0)}div.name{background-color:#0000002c;width:100%;padding:0 0 3px;text-transform:uppercase}h3.name{text-transform:capitalize;opacity:.85;font-weight:700;transform:scale(.95)}.in-progress .name-referenced h3.name{opacity:.95;font-weight:700;transform:scale(1)}.card-front h3.name{font-size:16px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:var(--overlay);display:flex;justify-content:center;align-items:center;z-index:20}.modal{width:300px;background:var(--modal-bg);padding:15px;border-radius:10px;text-align:center;box-sizing:border-box;box-shadow:0 6px 12px #0000001a;color:var(--text)}.modal img{max-height:50%;max-width:50%;width:auto;object-fit:contain;margin-bottom:10px}button.share{background-color:transparent;border-color:var(--innocent);color:var(--button-color);background-color:var(--innocent);font-weight:700;width:110px}button.close{background-color:transparent;border-color:var(--criminal);color:var(--criminal)}.btn-innocent{min-width:100px;background-color:transparent;border-color:var(--innocent);color:var(--innocent);font-weight:700}.btn-warn{min-width:100px;background-color:transparent;border-color:var(--warn);color:var(--warn);font-weight:700}.btn-warn:hover{border-color:var(--warn)}.btn-innocent:hover{background-color:#00bc8c33;box-shadow:0 0 10px #00bc8c33;border-color:var(--innocent)}.btn-innocent:focus{background-color:#00bc8c33;border-color:var(--criminal);box-shadow:0 0 10px #00bc8c33}.btn-criminal{min-width:100px;background-color:transparent;border-color:var(--criminal);color:var(--criminal)}.btn-criminal:hover{background-color:#e74c3c33;border-color:var(--criminal);box-shadow:0 0 10px #e74c3c33}.btn-criminal:focus{border-color:var(--criminal);background-color:#e74c3c33;box-shadow:0 0 10px #e74c3c33}.btn-close:focus{background-color:var(--border-neutral);border-color:var(--border-neutral)}.empty-card{border:2px dashed var(--border-neutral);padding:20px;min-height:120px;box-sizing:border-box;background-color:var(--card-bg);border-radius:8px;text-align:center}label{opacity:.9;font-size:.8rem}input[type=checkbox]{width:12px;height:12px;padding:0;margin:0 4px 0 0}.name{text-transform:capitalize}.card .coord{position:absolute;left:2px;top:2px;color:var(--text-muted);font-size:10px}.identity{display:flex;padding-top:5px;align-items:center}.identity .face{margin-top:auto}.modal .face{font-size:52px;margin:5px}.speech-bubble{position:absolute;top:13px;left:50%;transform:translate(-50%),translateY(-50%);background:#262626;border:2px solid rgb(172,172,172);color:#ddd;padding:.3em .6em;border-radius:1rem;font-weight:700;box-shadow:0 0 5px #0003;animation:pop-fade 1.2s ease-out;animation-fill-mode:forwards;pointer-events:none;z-index:10}@keyframes pop-fade{0%{opacity:.5;transform:translate(-50%) translateY(0) scale(.8)}15%{opacity:1;transform:translate(-50%) translateY(-5px) scale(1)}80%{opacity:1;transform:translate(-50%) translateY(-5px) scale(1)}to{opacity:0;transform:translate(-50%) translateY(-10px) scale(.9)}}.title,.instructions b{color:#939acf}.toast{position:fixed;top:20px;left:50%;transform:translate(-50%);background-color:#1f2937;border:2px solid white;box-shadow:0 4px 10px #0003;padding:15px;border-radius:10px;z-index:1000;pointer-events:none}.change-to-red-from,.change-to-red-to{display:inline-block;transition:opacity 1.5s ease,transform .5s ease;position:absolute}.change-to-red-from{opacity:0;transform:scale(0)}.change-to-red-to{opacity:1;transform:scale(1)}.insta-link{display:inline-flex;align-items:center;text-decoration:none;color:inherit;gap:3px;background-color:#333649;border-radius:5px;padding:1px 6px 3px;margin-top:6px;border:1px solid rgb(90,87,120)}a{color:#d222e9}button .icon{width:15px;margin:0;padding:0;transform:scale(1.5) translate(3px,2px);opacity:1}
