/* =====================================================================
   Kitsu Library · мобильный интерфейс (телефоны и небольшие планшеты)
   Подключается ПОСЛЕ style.css. На компьютере (>820px) ничего не меняет.
   Идея: компактная верхняя панель, нижняя навигация, всё в одну колонку,
   крупные зоны нажатия, никаких горизонтальных «вылезаний».
   ===================================================================== */

html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-x:clip;-webkit-tap-highlight-color:transparent}
img,video,canvas,svg{max-width:100%}
#mtab,#msheet,#msearch,.msrch,.m-ft{display:none}

@keyframes msUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes msFade{from{opacity:0}to{opacity:1}}

@media(max-width:820px){
  :root{--pad:16px;--mh:54px;--mb:62px;--hh:calc(var(--mh) + env(safe-area-inset-top,0px))}
  body{font-size:15px;line-height:1.5}
  body.m-lock{overflow:hidden}

  /* ---------- Верхняя панель ---------- */
  header{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:1px solid var(--bd);padding-top:env(safe-area-inset-top,0px);max-height:none;overflow:visible}
  header .bar,.bar{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:6px;height:var(--mh);padding:0 var(--pad)!important;grid-template-columns:none!important}
  header .bl,header .br{display:contents!important}
  header nav,header .bc,.mnav-x,.burger{display:none!important}
  .logo{order:1;margin:0!important;font-size:19px;letter-spacing:-.015em;white-space:nowrap}
  .msrch{order:2;margin-left:auto;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:transparent;color:var(--fg);cursor:pointer}
  .msrch svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .msrch:active{background:var(--s2)}
  #acct{order:3;flex:none;display:flex!important;align-items:center;gap:6px}
  #acct a[href="/settings"],#acct a[href="/register"],#acct a[href="#/settings"],#acct a[href="#/register"]{display:none!important}
  #acct .btn.s,#acct .btn{padding:0 16px!important;min-height:36px!important;height:36px;font-size:13.5px!important;border-radius:999px;display:inline-flex;align-items:center}
  #acct summary{list-style:none;display:block;cursor:pointer;line-height:0}
  #acct summary::-webkit-details-marker{display:none}
  #acct summary .av,#acct summary img{width:34px!important;height:34px!important;font-size:14px}

  /* меню аккаунта — нижняя шторка */
  .dd .mn{position:fixed!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;width:auto!important;min-width:0!important;max-width:none!important;max-height:84dvh;overflow-y:auto!important;margin:0!important;border-radius:24px 24px 0 0!important;border-width:1px 0 0!important;padding-bottom:env(safe-area-inset-bottom,0px)!important;z-index:70;box-shadow:0 -24px 60px #000c!important;animation:msUp .28s cubic-bezier(.2,.8,.2,1)}
  .dd[open] summary::after{content:"";position:fixed;inset:0;background:#000a;z-index:69;animation:msFade .2s}

  /* ---------- Нижняя навигация ---------- */
  #mtab{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--bg);border-top:1px solid var(--bd);padding:4px 6px calc(4px + env(safe-area-inset-bottom,0px))}
  #mtab a,#mtab button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:50px;padding:4px 0;border:0;background:none;color:var(--mu);font-family:inherit;font-size:10.5px;font-weight:600;line-height:1.1;letter-spacing:.01em;cursor:pointer;border-radius:12px;transition:color .15s}
  #mtab svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
  #mtab .on{color:var(--fg)}
  #mtab .on svg{stroke-width:2.1}
  #mtab .on::before{content:"";position:absolute;top:-5px;left:50%;width:22px;height:2px;margin-left:-11px;border-radius:2px;background:var(--fg)}
  #mtab a:active svg,#mtab button:active svg{transform:scale(.88)}
  body[data-route=watch] #mtab{display:none}
  body[data-route=watch] main{padding-bottom:28px!important}

  /* шторка «Ещё» */
  #msheet{display:block;position:fixed;inset:0;z-index:60;visibility:hidden;pointer-events:none}
  #msheet.open{visibility:visible;pointer-events:auto}
  .msh-bd{position:absolute;inset:0;background:#000b;opacity:0;transition:opacity .25s}
  #msheet.open .msh-bd{opacity:1}
  .msh-p{position:absolute;left:0;right:0;bottom:0;max-height:88dvh;overflow:auto;background:var(--sf);border-top:1px solid var(--bd);border-radius:24px 24px 0 0;padding:10px 16px calc(20px + env(safe-area-inset-bottom,0px));transform:translateY(102%);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
  #msheet.open .msh-p{transform:none}
  .msh-h{width:38px;height:4px;border-radius:4px;background:var(--bd);margin:0 auto 14px}
  .msh-t{margin:2px 4px 12px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mu)}
  .msh-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .msh-g a{display:flex;align-items:center;gap:12px;min-height:54px;padding:0 14px;border-radius:16px;background:var(--s2);color:var(--fg);font-weight:600;font-size:14.5px}
  .msh-g a svg{flex:none;width:21px;height:21px;stroke:var(--mu);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .msh-g a:active{background:var(--bd)}
  .msh-g a.on{background:var(--fg);color:var(--bg)}
  .msh-g a.on svg{stroke:var(--bg)}

  /* поиск на весь экран */
  #msearch{position:fixed;inset:0;z-index:60;background:var(--bg);padding:calc(10px + env(safe-area-inset-top,0px)) var(--pad) 24px;overflow:auto}
  #msearch.open{display:block;animation:msFade .18s}
  .mss-f{display:flex;align-items:center;gap:12px}
  .mss-f input{flex:1;min-width:0;height:48px;padding:0 20px;border-radius:999px;border:1px solid transparent;background:var(--s2);color:var(--fg);font:inherit;font-size:16px!important;outline:none;-webkit-appearance:none;appearance:none}
  .mss-f input:focus{border-color:var(--bd)}
  .mss-f input::-webkit-search-cancel-button{-webkit-appearance:none}
  .mss-f button{flex:none;border:0;background:none;color:var(--mu);font:inherit;font-weight:600;font-size:15px;padding:10px 2px;cursor:pointer}
  .mss-t{margin:26px 4px 12px;font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--mu)}
  .mss-c{display:flex;flex-wrap:wrap;gap:8px}
  .mss-c a{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--sf);border:1px solid var(--bd);color:var(--fg);font-size:14px;font-weight:500}

  /* ---------- Основа страницы ---------- */
  main{padding:0 var(--pad) calc(var(--mb) + 30px + env(safe-area-inset-bottom,0px))!important;min-height:70vh}
  main>*:first-child:not(.hero):not(.ban):not(.hs):not(.fo2){margin-top:20px}
  main :where(div,section,article,aside,form,ul,ol,li,a,p,span,h1,h2,h3,label,figure){min-width:0}
  main{overflow-wrap:break-word}
  h1{font-size:25px;line-height:1.2;letter-spacing:-.02em;margin-bottom:12px}
  h2{font-size:18px;line-height:1.25;letter-spacing:-.01em;margin:28px 0 12px}
  h3{font-size:16px}
  input,select,textarea,.in{font-size:16px!important}
  textarea{min-height:92px}
  .btn{min-height:44px;padding:0 20px;display:inline-flex;align-items:center;justify-content:center;border-radius:14px}
  .btn.s{min-height:38px;padding:0 14px;border-radius:12px}
  button,select{min-height:40px}
  a,button{touch-action:manipulation}
  #toast{bottom:calc(var(--mb) + 14px + env(safe-area-inset-bottom,0px))!important;max-width:calc(100vw - 32px);text-align:center;border-radius:14px}
  body[data-route=watch] #toast{bottom:calc(16px + env(safe-area-inset-bottom,0px))!important}
  #achp{left:12px!important;right:12px!important;max-width:none!important;bottom:calc(var(--mb) + 12px)!important}

  /* окна и формы */
  .mdl{padding:0!important;align-items:flex-end!important}
  .mdl .rvf,.mdl>div{width:100%!important;max-width:none!important;max-height:92dvh;overflow:auto;border-radius:24px 24px 0 0!important;padding:20px 16px calc(20px + env(safe-area-inset-bottom,0px))!important}
  .au{margin:20px auto!important;max-width:none!important}
  .au form,.au .card{padding:0}

  /* ---------- Главная ---------- */
  .hs{min-height:min(68svh,520px)!important}
  .hs .hc{padding-bottom:64px}
  .hd{-webkit-line-clamp:3}
  .hdots{bottom:20px}
  .hn,.rnv{display:none!important}
  .row{gap:12px!important;scroll-snap-type:x proximity;scroll-padding-inline:var(--pad);-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .row::-webkit-scrollbar{display:none}
  .row>.c{flex:0 0 118px!important;scroll-snap-align:start}

  /* карточки аниме */
  .grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:18px 10px!important}
  .c b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin-top:8px;font-size:13px;line-height:1.3;font-weight:600}
  .c small{display:block;margin-top:2px;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .c .ph,.c img{border-radius:12px}
  .sc{font-size:11px!important;padding:3px 7px!important;border-radius:8px!important}
  .ov{display:none!important}
  .c:hover .ph{transform:none;box-shadow:none}
  .btn:hover{transform:none}

  /* ---------- Страница аниме ---------- */
  .ban{height:200px!important}
  .top{display:grid!important;grid-template-columns:112px minmax(0,1fr);column-gap:14px;row-gap:0;grid-template-rows:1fr auto auto;margin-top:-72px!important;align-items:start}
  .top>div:first-child{grid-row:1/span 3;align-self:end}
  .top .ph{width:112px!important;border-radius:14px}
  .top>div:last-child{display:contents!important}
  .top>div:last-child>h1{grid-column:2;align-self:end;font-size:21px;margin:0 0 4px}
  .top>div:last-child>small{grid-column:2;display:block;color:var(--mu);font-size:12.5px;margin-bottom:6px}
  .top>div:last-child>p{grid-column:2;margin:0 0 4px;font-size:13px}
  .top>div:last-child>div:not(.dgr){grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
  .top>div:last-child>.dgr{grid-column:1/-1;margin-top:14px}
  .chip{padding:6px 12px;font-size:12.5px}
  .dgr{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
  .dl select,.dl .in{width:100%;min-width:0}
  .mlb{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px;max-width:none!important}
  .dl p.desc{margin:14px 0 8px}
  .stc{grid-template-columns:minmax(0,1fr)!important}
  .afx{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .afs .afx{grid-template-columns:minmax(0,1fr)!important}
  .wbtn,.rvgo{width:100%;justify-content:center}
  .fl.abr{gap:8px}
  .tabs{margin-top:22px!important;gap:2px;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
  .tabs::-webkit-scrollbar{display:none}
  .tabs button{flex:none;padding:12px 14px;white-space:nowrap}
  .chg,.stfg{grid-template-columns:minmax(0,1fr)!important}
  .stfg{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .chk{grid-template-columns:minmax(0,1fr)!important}
  .rg{grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important}


  /* ---------- Каталог и библиотека: компактные фильтры ---------- */
  #cf{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;align-items:stretch}
  #cf>input{grid-column:1/-1}
  #cf>select:nth-of-type(1){grid-column:1/-1}
  #cf>.btn,#cf>button{grid-column:1/-1}
  #cf select,#cf input{width:100%;min-width:0}
  #libn.stn{display:flex!important;flex-wrap:nowrap;gap:8px;overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
  #libn.stn::-webkit-scrollbar{display:none}
  #libn.stn a{flex:none;white-space:nowrap;border-radius:999px}
  .lib-side>.alb-box{display:none}
  .lib-side.m-open>.alb-box{display:block}
  .m-ft{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:44px;margin:12px 0 4px;border-radius:14px;border:1px solid var(--bd);background:var(--sf);color:var(--fg);font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer}
  .m-ft svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
  .lib-side{display:block}
  .wbtn{background:var(--ac)!important;color:var(--ack)!important;border-color:transparent!important}
  .dl p.desc{font-size:14.5px;line-height:1.55}

  /* ---------- Универсально: многоколонные макеты → одна колонка ---------- */
  .ov2,.sl,.aw,.pfg,.agr,.wg,.pgd,.pgd.rv,.pgd.two,.fo,.fo-p,.fo2-gr,.fo2-p,.fo3-gr,.lb-g,.lb2-gr,.nwl,.ed-g,.spc,
  .chr-hero,.chr-body,.alb-body,.rvhd-in,.w2main,.lb-pd,.lb2-pd,.lbt-pd,.tgd,.rvg,.rvsec .rvg,.plans,.nws-g,
  .ccg,.pn .ccg,.ucg,.stg,.frow,.eg,.ecg,.ocl,.soc-ls,.apg,.agrid,.lgd-c,.fo2-sd,.chg,.stfg.one{grid-template-columns:minmax(0,1fr)!important}
  .pgd{gap:14px!important}
  .plans{justify-items:stretch}
  .lsw{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .frp-g,.soc-cols{grid-template-columns:minmax(0,1fr)!important}
  .kp,.agr aside .kp{grid-template-columns:repeat(3,minmax(0,1fr))!important}

  /* ---------- Профиль ---------- */
  .pin{padding:0 var(--pad)!important}
  .pst{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .pst b{font-size:18px}
  .ptb{overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none}
  .ptb::-webkit-scrollbar{display:none}
  .ptb a{flex:none;padding:12px 14px;white-space:nowrap}
  .fvg{grid-template-columns:repeat(auto-fill,minmax(98px,1fr))!important}
  .fvg.rd{grid-template-columns:repeat(auto-fill,minmax(84px,1fr))!important}
  .apf .fvg.ex,.fvg.ex{grid-template-columns:repeat(auto-fill,minmax(88px,1fr))!important}
  .pv .av,.av.big{width:92px!important;height:92px!important}

  /* ---------- Рецензии, комментарии ---------- */
  .rvf{padding:16px;border-radius:20px}
  .rvsec .rvrow>.rev{flex-basis:86vw}
  .cmf{grid-template-columns:40px minmax(0,1fr)!important;gap:10px!important;padding:12px!important}
  .cav .av,.cmf .av{width:40px;height:40px}
  .cth .cmt{padding:12px}
  .cth .cmt.rp{padding-left:24px}
  .cact{display:flex;flex-wrap:wrap;gap:6px!important}
  .cmt,.rev,.m,.rpc-tx{overflow-wrap:anywhere}

  /* ---------- Форум ---------- */
  .fo2 .fo2-r,.fo2 .fo2-r.fo4-r,.fo3 .fo2-r{grid-template-columns:44px minmax(0,1fr)!important}
  .fo2-th,.fo3 .fo2-th,.fo2-lp,.fo4-lp{display:none!important}
  .fo2-sd{gap:12px}
  .fb-t td{padding:10px!important}
  .fb-t .hm,.fb-t th.hm{display:none}
  .fb-cats{grid-template-columns:minmax(0,1fr)!important}

  /* ---------- Лидерборд ---------- */
  .lbt-wrap,.lb2-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .lbt-t{min-width:540px}
  .lbt-tabs,.lb2-ct,.lb-ct{display:flex;overflow-x:auto;flex-wrap:nowrap;gap:6px;scrollbar-width:none}
  .lbt-tabs::-webkit-scrollbar{display:none}
  .lbt-tabs button{flex:none;white-space:nowrap}

  /* ---------- Чаты ---------- */
  .cx{height:calc(100dvh - var(--hh) - var(--mb) - 20px - env(safe-area-inset-bottom,0px))!important;min-height:360px!important;border-radius:20px;margin-top:10px}
  .cx-f{padding:8px 10px}
  .m{max-width:86%}

  /* ---------- Просмотр ---------- */
  .wp2{padding-top:8px}
  .w2bar{padding:10px 12px}
  .w2ctl{display:flex;gap:8px}
  .w2ctl .btn{flex:1}
  .wep{grid-template-columns:repeat(auto-fill,minmax(46px,1fr))!important;max-height:min(40vh,320px)}
  .wpl{display:flex;overflow-x:auto;scrollbar-width:none}
  .wpl button{flex:none}
  .kpl__btn{width:44px;height:44px}
  .kpl__volume .kpl__vol{display:none}
  .kpl__menu--settings{width:min(300px,86vw)}

  /* ---------- Гайд, документы ---------- */
  .gd-s{grid-template-columns:minmax(0,1fr)!important;padding:18px;gap:12px}
  .gd-rk,.gd-cm{grid-template-columns:minmax(0,1fr)!important}
  .gd-toc{display:flex;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin-inline:calc(var(--pad)*-1);padding-inline:var(--pad)}
  .gd-toc::-webkit-scrollbar{display:none}
  .gd-toc a{flex:none;white-space:nowrap}
  .doc{padding-top:6px}

  /* ---------- Подвал ---------- */
  #ft{margin-top:36px;padding:32px var(--pad) calc(var(--mb) + 24px + env(safe-area-inset-bottom,0px))}
  .ftg{grid-template-columns:minmax(0,1fr)!important;gap:26px}
  .ftbt{flex-direction:column;gap:8px}
  body[data-route=watch] #ft{padding-bottom:28px}
}

/* ---------- Узкие телефоны ---------- */
@media(max-width:380px){
  .logo .logo-lib{display:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .pst{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .top{grid-template-columns:96px minmax(0,1fr)}
  .top .ph{width:96px!important}
  .msh-g{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Планшеты: чуть шире сетка ---------- */
@media(min-width:560px) and (max-width:820px){
  .grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))!important}
  .row>.c{flex-basis:138px!important}
  .msh-g{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- Сенсорные экраны: без эффектов наведения ---------- */
@media(hover:none){
  .c:hover .ph{transform:none;box-shadow:none}
  .ov{display:none}
  .btn:hover{transform:none}
}

/* ---------- Ландшафт на телефоне ---------- */
@media(max-height:480px) and (orientation:landscape) and (max-width:900px){
  .hs{min-height:100svh!important}
  header{position:static}
}