/* MINDLAB v0.6 — оформлення чинних DOM-станів; без логіки гри. */
#game-shell {
 --arena-fon:#070b1d; --arena-panel:#111b34; --arena-spokiy:#0c1429;
 --arena-tekst:#f4f7ff; --arena-muted:#c8d4ed; --arena-cyan:#23f2ff;
 --arena-purple:#c8a5ff; --arena-success:#6ef0ac; --arena-error:#ff8195;
 --arena-border:#6b80a8; --arena-radius:18px;
 font:400 17px/1.6 system-ui,-apple-system,"Segoe UI",sans-serif;
 color:var(--arena-tekst); padding:32px;
 background:radial-gradient(ellipse at 100% 0,#a66bff15,transparent 45%),var(--arena-fon);
 border:1px solid #52678d; border-radius:24px;
 box-shadow:0 24px 80px #0008,0 0 32px #23f2ff12;
}
body:has(#game-shell:not([hidden])) { background:radial-gradient(ellipse at 10% 20%,#087a9426,transparent 50%),radial-gradient(ellipse at 90% 10%,#4a25a62e,transparent 45%),#070b1d;align-items:flex-start; }
.mindlab-layout:has(#game-shell:not([hidden])) { width:min(100%,860px); }
#game-shell :is(h2,p,div,span,button) { overflow-wrap:anywhere; }
#game-shell button { font-family:inherit; touch-action:manipulation; }
#game-shell :is(.calibration,.footer,.description,.result-label) { color:var(--arena-muted); font-size:14px;line-height:1.65; }
#game-shell :is(#calibration-progress,#training-progress) { margin:0 0 24px;padding:12px 16px;border:1px solid #52678d;border-radius:12px;background:var(--arena-spokiy);color:var(--arena-purple);font-size:15px;font-weight:650; }
#game-shell :is(#storage-message,#training-storage-message):not(:empty) { margin:16px 0;padding:16px;border:1px solid var(--arena-error);border-radius:12px;background:#301926;color:#ffe0e6;font-size:16px; }
#game-shell .top-line { gap:12px;align-items:center;flex-wrap:wrap;color:var(--arena-muted);font-size:14px;letter-spacing:.035em;margin-bottom:16px; }
#game-shell .top-line span:last-child { font-weight:650; }
#game-shell .progress { height:8px;background:#344665;margin:0 0 24px;border-radius:8px; }
#game-shell .progress-bar { background:linear-gradient(90deg,#a66bff,var(--arena-cyan));box-shadow:0 0 12px #23f2ff80;transition:width .2s ease; }
#game-shell .category { color:var(--arena-cyan);font-size:15px;line-height:1.5;letter-spacing:.035em;font-weight:750;margin:0 0 16px; }
#game-shell .question { font-size:clamp(22px,2.2vw,24px);line-height:1.55;letter-spacing:-.015em;margin:0 0 24px;padding:24px;border:1px solid #344665;border-radius:var(--arena-radius);background:var(--arena-panel);font-weight:650; }
#game-shell .question:empty { display:none; }
#game-shell .answers { display:grid;grid-template-columns:minmax(0,1fr);gap:12px; }
#game-shell :is(.answer,.vidpovid-trenuvannya) { position:relative;display:block;width:100%;min-width:0;min-height:56px;padding:18px 20px;white-space:normal;text-align:left;font-size:17px;line-height:1.55;font-weight:500;color:var(--arena-tekst);background:var(--arena-panel);border:1px solid var(--arena-border);border-radius:12px;cursor:pointer;transition:border-color .15s,background-color .15s; }
#game-shell :is(.answer,.vidpovid-trenuvannya):hover:not(:disabled) { border-color:var(--arena-cyan);background:#173044;box-shadow:0 0 16px #23f2ff15; }
#game-shell :is(.answer,.vidpovid-trenuvannya):active:not(:disabled) { background:#203d51; }
#game-shell :is(.answer,.vidpovid-trenuvannya):disabled { cursor:default;opacity:1;color:var(--arena-muted);background:#10192e; }
#game-shell :is(.answer,.vidpovid-trenuvannya).correct { color:var(--arena-tekst);border:2px solid var(--arena-success);background:#12302d; }
#game-shell :is(.answer,.vidpovid-trenuvannya).wrong { color:var(--arena-tekst);border:2px solid var(--arena-error);background:#331c2e; }
#game-shell :is(.answer,.vidpovid-trenuvannya).correct::after { content:"✓ Правильна відповідь";display:block;margin-top:8px;font-size:14px;font-weight:750;color:var(--arena-success); }
#game-shell :is(.answer,.vidpovid-trenuvannya).wrong::after { content:"× Обрана помилкова відповідь";display:block;margin-top:8px;font-size:14px;font-weight:750;color:var(--arena-error); }
#game-shell .feedback { margin:24px 0 0;padding:22px;border:1px solid #52678d;border-radius:var(--arena-radius);background:var(--arena-spokiy);color:var(--arena-tekst);font-size:17px;line-height:1.75; }
#game-shell .feedback-title { margin-bottom:12px;font-size:20px;line-height:1.4;color:var(--arena-tekst); }
#training-screen:has(.vidpovid-trenuvannya.correct):not(:has(.vidpovid-trenuvannya.wrong)) .feedback { border-color:var(--arena-success); }
#training-screen:has(.vidpovid-trenuvannya.correct):not(:has(.vidpovid-trenuvannya.wrong)) .feedback-title { color:var(--arena-success); }
#game-screen:has(.answer.wrong) .feedback,#training-screen:has(.vidpovid-trenuvannya.wrong) .feedback { border-color:var(--arena-error); }
#game-screen:has(.answer.wrong) .feedback-title,#training-screen:has(.vidpovid-trenuvannya.wrong) .feedback-title { color:var(--arena-error); }
#game-shell :is(#explanation,#training-explanation) { white-space:pre-line; }
#game-shell .main-button { min-height:52px;padding:16px 20px;font-size:16px;line-height:1.5;letter-spacing:.035em;background:linear-gradient(110deg,#23f2ff,#85f8ff);border:1px solid #85f8ff;color:#070b1d;border-radius:12px;box-shadow:0 0 24px #23f2ff20;transition:background-color .15s; }
#game-shell .main-button:hover:not(:disabled) { transform:none;box-shadow:0 0 28px #23f2ff38; }
#game-shell .main-button:active:not(:disabled) { background:#b4fcff; }
#game-shell .main-button:disabled { background:#22334b;color:var(--arena-muted);border-color:#52678d;box-shadow:none;cursor:default; }
#game-shell .next-button { margin-top:20px; }
#game-shell .mode-button { min-height:48px;font-size:14px;line-height:1.5;background:var(--arena-spokiy);border-color:var(--arena-border);color:var(--arena-muted); }
#game-shell .training-actions { gap:12px;margin-top:24px; }
#game-shell :is(button,[tabindex]):focus-visible { outline:3px solid #fff;outline-offset:4px; }
#game-shell .logo { font-size:clamp(30px,4vw,42px);letter-spacing:.06em; }
#game-shell .lab { color:var(--arena-cyan); }
#game-shell .tagline { font-size:clamp(24px,3vw,32px);line-height:1.3;margin-block:20px; }
#game-shell .description { font-size:18px; }
#game-shell .info { gap:16px;font-size:15px;color:var(--arena-muted); }
#game-shell #result-title { color:var(--arena-tekst); }
#game-shell #result-number { color:var(--arena-cyan);font-size:clamp(48px,6vw,72px);line-height:1.2;margin:24px 0 12px; }
#game-shell #result-box { font-size:16px;line-height:2.2;padding:24px;margin:24px 0;background:var(--arena-panel);color:var(--arena-muted);border:1px solid #52678d;border-radius:var(--arena-radius); }
#game-shell #training-result:not(:empty) { padding:24px;margin:24px 0;background:var(--arena-panel);color:var(--arena-tekst);border:1px solid var(--arena-purple);border-radius:var(--arena-radius);font-size:22px;line-height:1.6;font-weight:650; }
#training-screen:has(#training-question:empty) :is(.top-line,#training-category) { display:none; }
/* Активна сесія: renderer заповнює питання; при завершенні/блокуванні очищує його. */
#training-screen:has(#training-question:not(:empty)) :is(#training-start,#training-refresh) { display:none; }
#game-shell #training-screen p.calibration { font-size:15px;line-height:1.75;color:var(--arena-muted); }
@media(max-width:600px) {
 body:has(#game-shell:not([hidden])) { padding:12px; }
 #game-shell { padding:22px 18px;border-radius:20px; }
 #game-shell .question { padding:18px;font-size:19px; }
 #game-shell :is(.answer,.vidpovid-trenuvannya) { padding:16px; }
 #game-shell .feedback { padding:18px; }
 #game-shell #result-box { padding:18px;font-size:15px;line-height:2.15; }
 #game-shell #training-result:not(:empty) { padding:18px;font-size:20px; }
}
@media(prefers-reduced-motion:reduce) {
 #game-shell *,#game-shell *::before,#game-shell *::after { transition:none!important;animation:none!important; }
}
