/* Klassiskt luffarschack på 3 × 3 */
.c3-game{--c3-x:#1b2a6b;--c3-o:#c2412d;--c3-board:#fbfaf6;--c3-line:#cfd6e4}
.c3-game,.c3-demo,.c3-guide{--c3-x:#1b2a6b;--c3-o:#c2412d;--c3-board:#fbfaf6;--c3-line:#cfd6e4}
.c3-options{display:flex;flex-wrap:wrap;gap:10px 24px;margin:8px 0 16px}
.c3-switch{display:flex;flex-wrap:wrap;gap:8px}
.c3-switch .button{margin:0}
.learning-widget .c3-switch [aria-pressed=true]{background:#171d33;color:#fff;border-color:#171d33}
.c3-levels[hidden]{display:none}
.c3-play{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:24px;align-items:start}
.c3-turn{display:flex;align-items:center;gap:12px;min-height:44px;margin:0 0 10px;font-weight:800;font-size:17px}
.c3-turn-mark{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#fff;border:2px solid #cbd5e1;font:900 24px/1 Nunito,sans-serif;flex:none}
.c3-turn-mark.mark-x{color:var(--c3-x)}.c3-turn-mark.mark-o{color:var(--c3-o)}
.c3-board{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:6px;background:var(--c3-line);border-radius:16px;width:100%;max-width:420px;aspect-ratio:1;touch-action:manipulation;isolation:isolate}
.c3-board-small{max-width:300px;margin:12px 0}
.c3-cell{display:grid;place-items:center;border:0;border-radius:10px;background:var(--c3-board);font:900 clamp(40px,14vw,84px)/1 Nunito,sans-serif;padding:0;min-width:44px;min-height:44px;color:#171d33;position:relative;transition:background-color .15s ease,opacity .2s ease}
.c3-board-small .c3-cell{font-size:clamp(32px,10vw,56px)}
.c3-cell.mark-x{color:var(--c3-x)}.c3-cell.mark-o{color:var(--c3-o)}
button.c3-cell{cursor:pointer}
button.c3-cell:disabled{cursor:default;opacity:1}
button.c3-cell:not(:disabled):hover{background:#eef1fb}
.c3-board[data-turn=X] button.c3-cell:not(:disabled):hover::after{content:'X';color:var(--c3-x);opacity:.28}
.c3-board[data-turn=O] button.c3-cell:not(:disabled):hover::after{content:'O';color:var(--c3-o);opacity:.28}
button.c3-cell:focus-visible{outline:3px solid #254bff;outline-offset:-3px;z-index:2}
.c3-dim .c3-cell:not(.c3-win){opacity:.45}
.c3-cell.c3-win{background:#e6f4ea;box-shadow:inset 0 0 0 3px #1f7a45}
.c3-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.c3-line line{stroke-width:.09;stroke-linecap:round;stroke-dasharray:4;stroke-dashoffset:4;animation:c3-draw .45s ease-out forwards}
.c3-line .c3-line-x{stroke:var(--c3-x)}.c3-line .c3-line-o{stroke:var(--c3-o)}
.c3-line line.c3-line-static{animation:none;stroke-dashoffset:0}
@keyframes c3-draw{to{stroke-dashoffset:0}}
.c3-pulse::before{content:'';position:absolute;inset:14%;border-radius:50%;border:4px solid #254bff;animation:c3-pulse 1.3s ease-in-out infinite}
@keyframes c3-pulse{0%,100%{transform:scale(.85);opacity:1}50%{transform:scale(1);opacity:.55}}
.c3-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.c3-actions .button,.c3-result-actions .button,.c3-guide-done .button,.c3-demo .button,.c3-guide .button{margin:0}
.c3-side{border:1px solid #cbd5e1;border-radius:14px;background:#fff;padding:18px}
.c3-side-title{margin:0 0 10px;font-size:20px}
.c3-score{display:grid;gap:6px;margin:0}
.c3-score div{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid #e1e6f0}
.c3-score dt{font-weight:700;display:flex;gap:8px;align-items:center}
.c3-score dt .mark-x{color:var(--c3-x);font-weight:900}.c3-score dt .mark-o{color:var(--c3-o);font-weight:900}
.c3-score dd{margin:0;font-weight:900;font-size:22px;font-variant-numeric:tabular-nums}
.c3-result{margin-top:16px;padding:14px;border-radius:12px;background:#f0f2fc;border:2px solid #254bff}
.c3-result p{margin:0 0 6px}
.c3-result-title{font-weight:900;font-size:19px}
.c3-result-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.c3-figure{margin:20px 0}
.c3-figure figcaption{font-size:14px;color:#535c70;margin-top:8px}
.c3-mini{display:grid;grid-template-columns:repeat(3,56px);gap:4px;padding:4px;background:var(--c3-line,#cfd6e4);border-radius:10px;width:max-content}
.c3-mini-cell{width:56px;height:56px;display:grid;place-items:center;background:#fbfaf6;border-radius:6px;font:900 32px/1 Nunito,sans-serif}
.c3-mini-cell.mark-x{color:#1b2a6b}.c3-mini-cell.mark-o{color:#c2412d}
.c3-mini-cell.c3-target{box-shadow:inset 0 0 0 3px #254bff;background:#eef1fb}
.c3-demo-layout{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center}
.c3-demo-text,.c3-guide-text{font-weight:800;font-size:18px;min-height:28px}
.c3-demo-progress,.c3-guide-progress{color:#535c70;font-size:14px;margin:0}
.c3-guide-feedback{min-height:28px;color:#302584;font-weight:700}
.c3-guide-done{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.c3-guide-done[hidden]{display:none}
@media(max-width:760px){.c3-play{grid-template-columns:1fr}.c3-board{max-width:none}.c3-board-small{max-width:320px}.c3-actions .button,.c3-result-actions .button{flex:1 1 auto}}
@media(prefers-reduced-motion:reduce){.c3-pulse::before{animation:none}.c3-cell{transition:none}}