.cl-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
.cl-timer{height:6px;border-radius:99px;background:var(--border);overflow:hidden;margin:-6px 0 18px}
.cl-timer span{--left:1;display:block;height:100%;width:calc(var(--left) * 100%);background:var(--accent);transition:width .1s linear}
.cl-intro{display:flex;flex-direction:column;align-items:center;gap:16px;padding:48px 16px;border:1px dashed var(--border);border-radius:16px;text-align:center}
.cl-intro p{margin:0;max-width:420px;color:var(--muted)}
.cl-grid{--size:2;display:grid;grid-template-columns:repeat(var(--size),minmax(0,1fr));gap:clamp(3px,1vw,6px);width:min(100%,440px);aspect-ratio:1;margin:0 auto}
.cl-tile{border-radius:clamp(4px,1.4vw,10px);touch-action:manipulation}
.cl-tile:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.cl-tile.wrong{animation:cl-shake .3s}
.cl-tile.answer{outline:4px solid var(--ink);outline-offset:-4px}
#message{text-align:center}
@keyframes cl-shake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
@media(max-width:720px){.cl-stats{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){.cl-timer span{transition:none}}