:root {
    --size: 420px;
    --circle-size: 18px;
    --cross-len: 25%;
    --cross-thickness: 24px;
    --panel: #111827;
    --accent: #3b82f6;
    --ok: #22c55e;
    --err: #ef4444;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
html, body { overflow-x: hidden; }

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-items: center;
    background: #0b1022;
    color: #e5e7eb;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

.app {
    width: min(100vw, 900px);
    display: grid;
    gap: 18px;
    padding: clamp(12px, 3vw, 20px);
    background: var(--panel);
    border-radius: 16px;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.controls {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    width: 100%;
}

button {
    appearance: none;
    border: none;
    background: var(--accent);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
}

button.secondary { background: #374151; }

@media (max-width: 480px) {
    .controls button { flex: 1; min-width: 120px; }
}

.stage-wrap {
    display: grid;
    place-items: center;
    padding: 12px;
    background: #0b1222;
    border-radius: 14px;
    width: 100%;
}

.target {
    position: relative;
    width: clamp(240px, 92vmin, 720px);
    max-width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    background: #fff;
    border-radius: 8px;
    border: 2px solid #0f172a;
    overflow: hidden;
    box-shadow: inset 0 0 0 2px #e5e7eb;
}

.target::before,
.target::after {
    content: "";
    position: absolute;
    background: #111827;
    opacity: .7;
    pointer-events: none;
    border-radius: 6px;
}

.target::before {
    width: var(--cross-len);
    height: var(--cross-thickness);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.target::after {
    height: var(--cross-len);
    width: var(--cross-thickness);
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

.dot {
    position: absolute;
    width: var(--circle-size);
    height: var(--circle-size);
    border-radius: 50%;
    background: #000;
    border: 1px solid #000;
    transform: translate(-50%, -50%);
    transition: box-shadow .2s, transform .1s, background .2s, border-color .2s;
}

.dot.active {
    background: #ef4444;
    border-color: #ef4444;
    box-shadow: 0 0 0 4px #ef4444, 0 2px 6px rgba(0,0,0,.35);
}

.dot.ok { box-shadow: 0 0 0 3px var(--ok); }
.dot.err { box-shadow: 0 0 0 3px var(--err); }

.quiz {
    display: grid;
    gap: 12px;
    background: #0b1222;
    border-radius: 12px;
    padding: 14px;
    max-width: 100%;
}

.q {
    background: #0f162b;
    border: 1px solid #1f2937;
    border-radius: 10px;
    padding: 10px;
}

.q h3 { margin: 0 0 8px; font-size: 1rem; }

.answers {
    display: grid;
    gap: 6px;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

.answers label {
    display: flex;
    align-items: center;
    gap: 8px;
    word-break: break-word;
}

.q footer {
    margin-top: 8px;
    font-size: .9rem;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
}

.result { font-weight: 700; }
.result.ok { color: var(--ok); }
.result.err { color: var(--err); }

@media (max-width: 380px) {
    .answers { grid-template-columns: 1fr; }
}