/* ============================================================
a11y.css · Кръгозор — добавки за достъпност (WCAG 2.2 AA)
------------------------------------------------------------
Включва се ПОСЛЕДЕН, след app.css и всички duel*.css:
Файлът е адитивен: не сменя шрифтове, размери на текста или
палитрата. Пипа само фокус, тъч цели, три текста под нормата,
skip-link, reduced motion и състояния на грешка.
============================================================ */
:root{
/* месингово-жълто за фокус: 12.5:1 на #0e1211 */
--a11y-focus:#f2cf6b;
/* цвят за грешка: 6.97:1 на #0e1211 · 6.42:1 на #141c19 */
--a11y-error:#e2846f;
}
/* ------------------------------------------------------------
1) ВИДИМ ФОКУСЕН ПРЪСТЕН
2px контур + 2px отстояние, месингово-жълто.
`*:focus-visible` + !important е нарочно: app.css има
`outline:none` върху textarea:focus (ред 339), .replybox (499),
.profsheet (834) и върху .rail-card/.news-card:focus-visible
(640, 712) — без !important тези правила печелят по специфичност.
------------------------------------------------------------ */
*:focus-visible{
outline:2px solid var(--a11y-focus) !important;
outline-offset:2px !important;
}
/* Фокус върху тъмна месингова повърхност (primary бутони, чипове):
контурът се вижда срещу тъмния фон на страницата, но за сигурност
добавяме тънка тъмна линия в отстоянието. */
.primary:focus-visible,
.btn-gold:focus-visible,
.ha-btn:focus-visible,
.jchip:focus-visible{
box-shadow:0 0 0 2px rgba(8,11,10,.9);
}
/* Програмно фокусирани контейнери (dialog/sheet с tabindex="-1")
не бива да рисуват пръстен — той е за клавиатура, не за мишка. */
[tabindex="-1"]:focus:not(:focus-visible){outline:none !important}
/* ------------------------------------------------------------
2) ТЪЧ ЦЕЛИ 44×44 при ≤700px
Само padding / min-height / min-width — типографията не се пипа.
------------------------------------------------------------ */
@media (max-width:700px){
.tab,
.mini-btn,
.ghost,
.jchip,
.modebtn,
.ladder-row{
min-height:44px !important;
}
.tab,
.mini-btn,
.ghost,
.jchip{
min-width:44px !important;
}
/* центриране на съдържанието в по-високата кутия, без смяна на шрифт */
.tab,
.mini-btn,
.ghost,
.jchip{
display:inline-flex;
align-items:center;
justify-content:center;
}
.ladder-row{padding-top:12px; padding-bottom:12px}
.modebtn{padding-top:12px; padding-bottom:12px; justify-content:center}
}
/* ------------------------------------------------------------
3) КОНТРАСТ — трите пропадания от одита
------------------------------------------------------------ */
/* .play-sub (duel, под „Играй“): беше rgba(25,20,6,.68) върху златото
= 3.29:1 при 11px. Ново .97:
5.14:1 на #a9851c (най-тъмният семплиран златен фон)
7.30:1 на #c9a227 · 8.69:1 на #d8b25a · 10.19:1 на #e3c274 */
.btn-gold .play-sub{color:rgba(25,20,6,.97)}
/* .eyebrow върху hero снимката: #d8b25a даваше 4.29:1 при 10px.
#f0d27f върху същия най-лош пиксел = 5.85:1 (на #141c19 = 11.76:1).
Сянката е за четимост върху светлите петна на фотографията — тя не
се брои в коефициента, затова цветът също е вдигнат. */
.heroband .eyebrow{
color:#f0d27f;
text-shadow:0 1px 2px rgba(0,0,0,.92), 0 0 14px rgba(0,0,0,.85);
}
/* textarea::placeholder: #6f7d74 = 4.34:1 на композитния фон #0e1311.
#7d8b82 = 5.26:1 (5.14:1 на #0f1614). opacity:1 за Firefox. */
textarea::placeholder{
color:#7d8b82;
opacity:1;
}
/* ------------------------------------------------------------
4) SKIP-LINK — скрит, докато не получи фокус
Текст #12180f върху #f2cf6b = 11.96:1.
------------------------------------------------------------ */
.skip-link{
position:fixed;
top:8px;
left:8px;
z-index:9999;
padding:12px 18px;
border-radius:2px;
background:var(--a11y-focus);
color:#12180f;
font:600 14px/1 var(--sans, system-ui, sans-serif);
letter-spacing:.02em;
text-decoration:none;
transform:translateY(-150%);
transition:transform .18s ease;
box-shadow:0 8px 28px rgba(0,0,0,.55);
}
.skip-link:focus,
.skip-link:focus-visible{
transform:translateY(0);
outline-color:#12180f !important; /* контурът не бива да е жълт върху жълто */
}
/* ------------------------------------------------------------
5) PREFERS-REDUCED-MOTION — обща защита
app.css вече гаси анимациите; това е гаранция и за нови правила,
добавени след него (вкл. transition на .skip-link).
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
*,
*::before,
*::after{
animation-duration:.001ms !important;
animation-delay:0s !important;
animation-iteration-count:1 !important;
transition-duration:.001ms !important;
transition-delay:0s !important;
scroll-behavior:auto !important;
}
.skip-link{transition:none}
.skip-link:focus,
.skip-link:focus-visible{transform:translateY(0)}
}
/* ------------------------------------------------------------
6) СЪСТОЯНИЕ НА ГРЕШКА ВЪВ ФОРМА
[aria-invalid="true"] се слага от JS; .field-error е текстът под полето.
Текстът #ffb4a2 = 10.17:1 на #141c19 · 11.05:1 на #0e1211.
------------------------------------------------------------ */
[aria-invalid="true"]{
border-color:var(--a11y-error) !important;
box-shadow:0 0 0 3px rgba(226,132,111,.18) !important;
}
[aria-invalid="true"]:focus,
[aria-invalid="true"]:focus-visible{
border-color:var(--a11y-error) !important;
box-shadow:0 0 0 3px rgba(226,132,111,.30) !important;
}
.field-error{
display:block;
margin:6px 0 0;
font-size:12.5px;
line-height:1.5;
letter-spacing:.01em;
color:#ffb4a2;
}
.field-error::before{
content:"⚠";
margin-right:5px;
color:var(--a11y-error);
}
.field-error[hidden]{display:none !important}
/* ------------------------------------------------------------
7) ПОМОЩЕН КЛАС за текст само за екранен четец
(нужен за live региона и за скритите заглавия на диалозите —
виж docs/review/a11y-plan.md)
------------------------------------------------------------ */
.sr-only{
position:absolute !important;
width:1px;
height:1px;
padding:0;
margin:-1px;
overflow:hidden;
clip:rect(0 0 0 0);
clip-path:inset(50%);
white-space:nowrap;
border:0;
}
/* ------------------------------------------------------------
8) Ф1 · ХОРИЗОНТАЛЕН СКРОЛ (docs/finish/07-mobile-a11y.md §2)
Причината при 768 беше .wheelwrap::before с inset:-16%: 792px
кръг в 722px панел, 17px извън екрана. Отстъпът вече е -10%
(app.css), а clip-ът тук пази и тесните ширини, където панелът
едва надвишава колелото.
`clip`, не `hidden`: не създава скрол контейнер и не чупи
sticky на класацията в Арената.
------------------------------------------------------------ */
.view,
.wheelpanel{overflow-x:clip}
/* ------------------------------------------------------------
9) Ф6 · ЦЕЛИ ЗА НАТИСКАНЕ 44px — на всяка ширина
Извън media(max-width:700px) нарочно: при 768 и 1440 целите
бяха 25–42px. Само min-height и подредба; шрифтът не се пипа.
------------------------------------------------------------ */
.lb-tab,
.modebtn,
.dc-play,
#areaFilter,
#chipId,
#logoutBtn{min-height:44px !important}
.lb-tab,
.dc-play,
#logoutBtn{display:inline-flex; align-items:center; justify-content:center}
#chipId{align-items:center}
.modebtn{justify-content:center}
/* ------------------------------------------------------------
10) Ф5 · КОНТРАСТ — дребният текст в Арената и класацията
#a9a190 не е нов цвят: същият се ползва в слоя (.lb-tab,
.dc-daily-sub, .lb-me). Мерки върху реалните фонове:
3.40:1 → 7.14:1 на #101613 · 6.77:1 на най-светлия #141c19
`.dc-board .lb-name small` е нужен: arena-deco.css:442 задава
8px върху същия селектор и печели по специфичност.
------------------------------------------------------------ */
.lb-note,
.dc-foot{color:#a9a190}
.lb-name small,
.dc-board .lb-name small{color:#a9a190; font-size:11px}
/* ------------------------------------------------------------
11) КОНТРАСТ — дребният текст под 4.5:1 (одит 13.11.2026)
Числата са мерени по реалния фон: снимка на страницата с
прозрачен текст, после всеки пиксел под глиф се сравнява с
цвета на текста (не по номиналния цвят на панела). Само цвят —
нито размер, нито тегло, нито подредба се пипат.
------------------------------------------------------------ */
/* Новини, дясна релса: „преди 22 мин“ беше rgba(236,229,211,.42)
= 2.95:1 върху най-светлата карта (#353c36) при 9.5px.
.66 дава 4.94:1 на същия фон, 5.91:1 на #232b28 и 6.65:1 на #141c19. */
.rail-foot span{color:rgba(236,229,211,.66)}
/* Номерата на релсовите карти (01, 02…): .40 = 3.27:1 на #141c19.
.58 = 5.43:1 — същата сива гама, само по-плътна. */
.rail-num{color:rgba(236,229,211,.58)}
/* Арена: надписът над заглавието („състезание“, „класация“)
#8d8574 = 4.46:1 при 8.5px. #9c9484 = 5.42:1 на #1f2116, 5.77:1 на #141c19. */
.dc-kicker{color:#9c9484}
/* Арена: „/10“ до брояча и „следва I“ — #7f7a6c = 4.04–4.13:1 при 15px.
#948c7b = 5.18:1 на мобилния фон #181c14, 5.30:1 на #141a14. */
.dc-pnum span,
.dc-next{color:#948c7b}
/* Арена: заключените карти. Римската цифра е 34px/600 → нормата е 3:1,
а rgba(246,239,220,.3) даваше 2.50:1. .42 = 3.72:1: картата пак
изглежда заключена, защото контурът, фонът и катинарът не се пипат. */
.dc-card.locked .dc-roman{color:rgba(246,239,220,.42)}
/* Арена: „Играй“ в дневната лента — златен текст #d8b25a върху златистата
лента (#726020) = 3.06:1 при 11px. #f6e6b0 = 4.95:1, същата топла гама. */
.dc-daily-btn{color:#f6e6b0}
/* Арена: чиповете „0 точки · 0 опита · 0 XP“ — #a9a190 върху
затъмненото злато (#413d1e) = 4.28:1. #b3ab99 = 4.82:1. */
.dc-chip{color:#b3ab99}
/* Дуел, лоби: бележката под класацията #6f6a5d = 3.42:1 върху
златистия панел (#3d391a). #b3ab99 = 5.12:1. */
.lb-foot{color:#b3ab99}
/* Дуел, лоби: „срещу“ между двата портрета — #7f7a6c = 4.41:1 при 9px.
#9c9484 = 5.65:1. */
.dt-vs span{color:#9c9484}
/* /ach.html: целият вторичен текст (ранг, броячи „0 / 14“, „/ 45 отключени“,
етикетите на постиженията) ползва --dim от ach.css = #6f6a5e,
което дава 2.97–3.51:1. #9a9385 дава 5.09:1 на най-светлата карта
(#23251c) и 6.20:1 на страницата.
Стойността се слага на контейнерите на тази страница, не на :root,
за да не пипа --dim на duel3.css (там е #6d7a70).
ВАЖНО: файлът се зарежда на /ach едва когато в ach.html се добави
— виж docs/launch/a11y.md. */
.ac-top,
.ac-wrap,
.ac-toast{--dim:#9a9385}