:root{
  --bna-yellow:#F5CA01; --bna-ink:#33241A; --bna-bone:#ECDBBF; --bna-cream:#FBF6E8;
  --bna-leaf:#4C661B; --bna-line:#E2D3B2; --bna-shadow:#C9AE6B;
  --bna-kick:#7C6011; --bna-quiet:#63543F;
  --bna-max:1100px; --bna-gut:22px; --bna-r:14px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Radio Canada Big',system-ui,sans-serif;font-size:17px;line-height:1.65;
  color:var(--bna-ink);background:var(--bna-cream)}
h1,h2,h3,.bnalogo{font-family:'Baloo Bhaijaan 2',system-ui,sans-serif;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(30px,5vw,46px)}
h2{font-size:clamp(23px,3.4vw,31px);margin-top:1.4em}
h3{font-size:19px;margin-top:1.2em}
p{margin:0 0 1em}
a{color:var(--bna-leaf)}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto;display:block}
table{border-collapse:collapse;width:100%;margin:0 0 1.2em}
th,td{padding:9px 12px;border-bottom:2px solid var(--bna-line);text-align:left;vertical-align:top}
th{font-family:'Baloo Bhaijaan 2',sans-serif;font-size:15px;letter-spacing:.02em}
.bnawrap{max-width:var(--bna-max);margin:0 auto;padding:0 var(--bna-gut)}
.bnasr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.bnaskip{position:absolute;left:-999px;top:0;background:var(--bna-ink);color:#fff;padding:10px 16px;z-index:9}
.bnaskip:focus{left:8px}

/* --- верхняя полоса --- */
.bnabar{background:var(--bna-yellow);border-bottom:4px solid var(--bna-ink)}
.bnabarin{display:flex;align-items:center;gap:18px;padding:10px var(--bna-gut);max-width:var(--bna-max);margin:0 auto;flex-wrap:wrap}
.bnalogo{display:flex;align-items:center;gap:10px;font-size:22px;font-weight:800;color:var(--bna-ink);text-decoration:none}
.bnalogo img{width:40px;height:40px}
.bnamenu{display:flex;gap:4px 14px;list-style:none;margin:0 0 0 auto;padding:0;flex-wrap:wrap}
.bnamenu a{color:var(--bna-ink);text-decoration:none;font-weight:600;font-size:15px;padding:6px 2px;border-bottom:3px solid transparent}
.bnamenu a:hover,.bnamenu a[aria-current]{border-bottom-color:var(--bna-ink)}
.bnaburger{display:none;margin-left:auto;background:var(--bna-ink);color:var(--bna-yellow);border:0;border-radius:9px;padding:8px 14px;font:inherit;font-weight:700;cursor:pointer}
@media(max-width:820px){
  .bnaburger{display:block}
  .bnamenu{display:none;width:100%;flex-direction:column;gap:0}
  .bnamenu.open{display:flex}
  .bnamenu a{display:block;padding:10px 2px;border-bottom:2px solid rgba(51,36,26,.18)}
}

/* --- общие элементы --- */
.bnakick{font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:700;font-size:14px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--bna-kick);margin:0 0 .5em}
.bnalead{font-size:19px;color:var(--bna-quiet)}
.bnacrumb{font-size:14px;padding:14px 0 0;color:var(--bna-quiet)}
.bnacrumb a{color:var(--bna-quiet)}
.bnacrumb span[aria-current]{font-weight:600;color:var(--bna-ink)}
.bnameta{font-size:14px;color:var(--bna-quiet)}
.bnaupd{font-size:14px;color:var(--bna-quiet);margin:0 0 1.4em;border-bottom:2px solid var(--bna-line);padding-bottom:14px}
.bnapeel{display:inline-block;background:var(--bna-yellow);color:var(--bna-ink);border:0;cursor:pointer;
  font:inherit;font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:800;font-size:17px;
  padding:13px 26px;border-radius:12px;border-bottom:4px solid var(--bna-shadow);text-decoration:none}
.bnapeel:hover{filter:brightness(1.04)}
.bnapeel:active{transform:translateY(2px);border-bottom-width:2px}
.bnatag{font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:800;font-size:24px}
.bnastars{color:var(--bna-quiet);font-size:15px}

/* --- буквенные плитки --- */
.bnaletters{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 1.2em;padding:0;list-style:none}
.bnalet{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  min-width:46px;min-height:46px;padding:4px 7px;background:var(--bna-bone);color:var(--bna-ink);
  border-radius:8px;border-bottom:4px solid var(--bna-shadow);
  font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:800;font-size:19px;line-height:1.1}
.bnacount{font-size:12px;font-weight:600;color:var(--bna-quiet)}

/* --- карточки игр --- */
.bnabunch{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;margin:1.2em 0}
.bnatile{background:#fff;border-radius:var(--bna-r);border:2px solid var(--bna-line);border-bottom-width:5px;
  padding:16px;display:flex;flex-direction:column;gap:8px;min-height:0}
.bnatile h3{margin:0}
.bnatile a{color:var(--bna-ink);text-decoration:none}
.bnatile a:hover{text-decoration:underline}
.bnashot{aspect-ratio:1;position:relative;border-radius:10px;overflow:hidden;background:#fff}
.bnashot img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.bnafam{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;margin:1em 0}

/* --- главная --- */
.bnahero{background:var(--bna-yellow)}
.bnaheroin{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;
  max-width:var(--bna-max);margin:0 auto;padding:44px var(--bna-gut)}
.bnahero h1{font-size:clamp(34px,5.6vw,54px)}
.bnahero .bnakick{color:var(--bna-ink);opacity:.75}
.bnahero .bnalead{color:var(--bna-ink);font-size:20px}
@media(max-width:820px){.bnaheroin{grid-template-columns:1fr;padding:30px var(--bna-gut)}}
.bnarail{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bnarail .bnatile{padding:10px;font-size:14px}
@media(max-width:820px){.bnarail{display:flex;overflow-x:auto;padding-bottom:8px}
  .bnarail .bnatile{min-width:150px}}
.bnastrip{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:1.2em 0}
.bnacall{background:#fff;border:2px solid var(--bna-line);border-bottom-width:5px;border-radius:var(--bna-r);padding:16px}
.bnacall h3{margin:0 0 .3em;display:flex;align-items:center;gap:10px}
.bnabadge{display:inline-block;background:var(--bna-bone);color:var(--bna-ink);border-radius:99px;
  padding:2px 11px;font-size:12.5px;font-weight:700;font-family:'Baloo Bhaijaan 2',sans-serif;letter-spacing:.03em}
.bnachips{display:flex;flex-wrap:wrap;gap:10px;margin:1em 0;padding:0;list-style:none}
.bnachips a{display:inline-block;background:var(--bna-bone);color:var(--bna-ink);text-decoration:none;
  font-weight:600;font-size:15px;padding:9px 16px;border-radius:9px;border-bottom:3px solid var(--bna-shadow)}
.bnachips a:hover{background:var(--bna-yellow)}
.bnaboard{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;margin:1.2em 0}
.bnaboard article{background:#fff;border:2px solid var(--bna-line);border-bottom-width:5px;border-radius:var(--bna-r);padding:18px}
.bnaboard h3 a{color:var(--bna-ink);text-decoration:none}
.bnaboard h3 a:hover{text-decoration:underline}
.bnaboard ul{margin:.4em 0 0;padding-left:1.2em;font-size:15px}
.bnaduo{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:1.4em 0}
@media(max-width:820px){.bnaduo{grid-template-columns:1fr}}
.bnaslab{border-radius:var(--bna-r);padding:28px;display:flex;flex-direction:column;gap:10px}
.bnaslab h2{margin:0}
.bnaspot{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;align-items:center;background:#fff;
  border:2px solid var(--bna-line);border-bottom-width:6px;border-radius:var(--bna-r);padding:26px;margin:1.4em 0}
@media(max-width:820px){.bnaspot{grid-template-columns:1fr}}

/* --- тёмные полосы: контраст чинится переменными один раз для всех потомков --- */
.bnaband{background:var(--bna-ink);color:var(--bna-cream);
  --bna-kick:#F5CA01; --bna-quiet:#CBB795; --bna-line:#5A4634; --bna-leaf:#BFD68A}
.bnaband a{color:var(--bna-leaf)}
.bnaband h2{color:#fff}
.bnaband .bnapeel{background:var(--bna-yellow);color:#33241A}
.bnafoot{background:var(--bna-ink);color:var(--bna-cream);margin-top:56px;
  --bna-kick:#F5CA01; --bna-quiet:#CBB795; --bna-line:#5A4634; --bna-leaf:#BFD68A}
.bnafootin{max-width:var(--bna-max);margin:0 auto;padding:38px var(--bna-gut);display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:26px}
.bnafoot h3{color:#fff;font-size:16px;margin-top:0}
.bnafoot ul{list-style:none;margin:0;padding:0;font-size:15px}
.bnafoot li{margin:0 0 8px}
.bnafoot a{color:var(--bna-cream);text-decoration:none}
.bnafoot a:hover{text-decoration:underline}
/* <address> по умолчанию курсив — тег берём за смысл, вид возвращаем руками */
.bnapost{font-style:normal;margin:14px 0 4px;font-size:15px;color:var(--bna-cream)}
.bnanote{max-width:var(--bna-max);margin:0 auto;padding:0 var(--bna-gut) 30px;font-size:13.5px;color:var(--bna-quiet)}
.bnanote img{max-width:min(380px,100%);margin-top:10px}

/* --- статьи --- */
.bnamain{min-height:60vh}
.bnaread{max-width:850px;margin:0 auto;padding:8px var(--bna-gut) 30px}
.bnalede{font-size:19.5px;color:var(--bna-quiet);margin:0 0 .9em}
.bnatldr{background:#fff;border:2px solid var(--bna-line);border-left:8px solid var(--bna-yellow);
  border-radius:10px;padding:18px 22px;margin:0 0 1.6em}
.bnatldr h2{margin:0 0 .5em;font-size:19px}
.bnatldr ul{margin:0;padding-left:1.2em}
.bnatldr li{margin:0 0 6px}
.bnaside{background:var(--bna-bone);border-radius:10px;padding:16px 20px;margin:1.4em 0}
.bnaside h3{margin-top:0}
.bnakey{font-weight:700}
.bnaflow{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:1.2em 0}
.bnastep{background:#fff;border:2px solid var(--bna-line);border-bottom-width:5px;border-radius:12px;padding:14px;font-size:15px}
.bnastep h3{margin:0 0 .4em;font-size:16.5px;display:flex;align-items:center;gap:8px}
.bnastep p{margin:0}
.bnasteps{counter-reset:s;list-style:none;margin:0 0 1.2em;padding:0}
.bnasteps li{position:relative;padding:0 0 14px 58px;counter-increment:s}
.bnasteps li::before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;background:var(--bna-bone);
  border-radius:8px;border-bottom:3px solid var(--bna-shadow);
  font-family:'Baloo Bhaijaan 2',sans-serif;font-weight:800;font-size:18px}
.bnaqa h3{margin-top:1.1em}
.bnatoc{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:1.2em 0;padding:0;list-style:none}
.bnatoc a{display:block;background:#fff;border:2px solid var(--bna-line);border-bottom-width:4px;
  border-radius:11px;padding:13px 16px;color:var(--bna-ink);text-decoration:none;font-weight:600;font-size:15.5px}
.bnatoc a:hover{border-color:var(--bna-shadow)}
.bnatable td:first-child,.bnatable th:first-child{white-space:nowrap}
.bnaquick{background:#fff;border:2px solid var(--bna-line);border-radius:11px;padding:6px 16px;margin:0 0 1.2em}
.bnaquick table{margin:0}
.bnaquick tr:last-child td,.bnaquick tr:last-child th{border-bottom:0}
.bnaart{border-radius:var(--bna-r);border:2px solid var(--bna-line)}
.bnado,.bnadont{border-radius:11px;padding:16px 20px}
.bnado{background:#EDF3DC}
.bnadont{background:#F6E3D3}
.bnado h3,.bnadont h3{margin-top:0}
.bnado ul,.bnadont ul{margin:0;padding-left:1.2em}
.bnaquotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin:1.2em 0}
.bnaquotes blockquote{margin:0;background:#fff;border:2px solid var(--bna-line);border-bottom-width:5px;
  border-radius:var(--bna-r);padding:16px;font-size:15.5px}
.bnaseo{border-top:3px solid var(--bna-line);margin-top:2em;padding-top:1em}
.bnanums{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;margin:1em 0;text-align:center}
.bnanums strong{display:block;font-family:'Baloo Bhaijaan 2',sans-serif;font-size:34px}
.bnanums span{font-size:14px;color:var(--bna-quiet)}
.bnavals{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:1.2em 0}

/* --- подборщик --- */
.bnapick{max-width:850px;margin:0 auto;padding:8px var(--bna-gut) 30px}
.bnapickq{background:#fff;border:2px solid var(--bna-line);border-bottom-width:5px;border-radius:var(--bna-r);
  padding:20px 22px;margin:0 0 18px}
.bnapickq h2{margin:0 0 .7em;font-size:21px}
.bnapicka{display:flex;flex-wrap:wrap;gap:10px}
.bnapicka button{background:var(--bna-bone);color:var(--bna-ink);border:0;border-bottom:4px solid var(--bna-shadow);
  border-radius:10px;padding:11px 18px;font:inherit;font-weight:600;cursor:pointer}
.bnapicka button:hover{background:var(--bna-yellow)}
.bnapicka button[aria-pressed="true"]{background:var(--bna-ink);color:var(--bna-yellow);border-bottom-color:var(--bna-ink)}
.bnapickout{margin-top:6px}

/* --- 404 --- */
.bnalost{text-align:center;padding:70px var(--bna-gut)}
.bnalost .bnaletters{justify-content:center}