:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg:#10141c;--felt:#161b26;--ink:#e8e8ec;--red:#d1495b;--black:#1a1a1a;--card-bg:#f4f1e8;--card-w:4.4rem;--card-h:6.4rem;--card-w-grid:4.6rem;--card-h-grid:6.7rem}*{box-sizing:border-box}body{background:var(--bg);min-height:100vh;color:var(--ink);margin:0;font-family:system-ui,sans-serif}nav{padding:.75rem 1.25rem}nav a{color:inherit;opacity:.6;font-size:.85rem;text-decoration:none}.stage{flex-direction:column;align-items:center;gap:1.5rem;max-width:60rem;margin:0 auto;padding:1rem 1rem 3rem;display:flex}.title{letter-spacing:.35em;text-transform:uppercase;opacity:.55;margin:.5rem 0 0;font-size:1.1rem}#app{justify-content:center;width:100%;display:flex}.opening{justify-content:center;padding:3rem 0;animation:.2s fade-in;display:flex}.round{flex-direction:column;align-items:center;gap:1.5rem;width:100%;animation:.2s fade-in;display:flex}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.timer{font-variant-numeric:tabular-nums;opacity:.85;font-size:2rem}.timer.low{color:var(--red);animation:1s ease-in-out infinite timer-pulse}@keyframes timer-pulse{0%,to{opacity:1}50%{opacity:.35}}.row{flex-wrap:wrap;justify-content:center;gap:.75rem;width:100%;display:flex}.candidate-grid{grid-template-columns:repeat(auto-fill, minmax(var(--card-w-grid), 1fr));justify-content:center;gap:.6rem;width:100%;max-width:54rem;display:grid}.card{width:var(--card-w);height:var(--card-h);color:var(--black);border-radius:.5rem;font-family:Georgia,Times New Roman,serif;position:relative;box-shadow:0 .15rem .4rem #00000059}.card-face{object-fit:contain;pointer-events:none;width:100%;height:100%;display:block}.candidate-grid .card{width:var(--card-w-grid);height:var(--card-h-grid);justify-self:center}button.card{cursor:pointer;transition:transform .15s,box-shadow .15s}.candidate-grid button.card{appearance:none;font:inherit;background:0 0;border:none;margin:0;padding:0}button.card:hover{transform:translateY(-.6rem)rotate(-1deg);box-shadow:0 .6rem 1rem #00000073}button.card:active{transform:translateY(-.2rem)scale(.97)}.card.back{background:repeating-linear-gradient(135deg,#2a4d69,#2a4d69 6px,#23415a 6px 12px);border:1px solid #ffffff26}.card.back.big{width:calc(var(--card-w) * 1.8);height:calc(var(--card-h) * 1.8);cursor:pointer}.card.back.big:hover{transform:translateY(-.6rem)rotate(1deg);box-shadow:0 .8rem 1.4rem #00000080}.card.back.big:active{transform:translateY(-.2rem)rotate(1deg)scale(.97)}.card.slot{box-shadow:none;background:0 0;border:1px dashed #fff3}.card.flip-in{animation:.35s ease-out flip-in}@keyframes flip-in{0%{opacity:0;transform:rotateY(90deg)}to{opacity:1;transform:rotateY(0)}}.card.place-in{animation:.2s ease-out place-in}@keyframes place-in{0%{opacity:0;transform:translateY(-.6rem)scale(.9)}to{opacity:1;transform:translateY(0)scale(1)}}.card.correct{outline:2px solid #3fb56c;animation:.6s correct-glow}@keyframes correct-glow{0%,to{box-shadow:0 .15rem .4rem #00000059}50%{box-shadow:0 0 .9rem #3fb56cd9}}.card.wrong{outline:2px solid var(--red);animation:.4s wrong-shake}@keyframes wrong-shake{0%,to{transform:translate(0)}20%{transform:translate(-.25rem)}40%{transform:translate(.25rem)}60%{transform:translate(-.15rem)}80%{transform:translate(.15rem)}}.level-line{opacity:.7;margin:0}.fail-banner{letter-spacing:.06em;text-transform:uppercase;color:var(--red);margin:0;font-size:2.75rem;font-weight:900;animation:.3s ease-out fail-in}@keyframes fail-in{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@media (width<=640px){.fail-banner{font-size:2rem}}.result.win .card.back.big{background:repeating-linear-gradient(135deg,#b58a2a,#b58a2a 6px,#9a7420 6px 12px)}.result.win .card:not(.back){animation:.35s ease-out flip-in,1.4s ease-in-out .35s infinite win-glow}@keyframes win-glow{0%,to{box-shadow:0 .15rem .4rem #00000059}50%{box-shadow:0 0 1rem #b58a2ad9}}@media (width<=640px){:root{--card-w:3.4rem;--card-h:4.9rem;--card-w-grid:2.6rem;--card-h-grid:3.8rem}.row{gap:.5rem}.candidate-grid{gap:.35rem}}@media (width<=400px){:root{--card-w:2.7rem;--card-h:3.9rem;--card-w-grid:2.2rem;--card-h-grid:3.2rem}.card{font-size:1rem}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
