/* Fragline - prilagodba za mobitele (ucitava se zadnja) */
img,video,iframe{max-width:100%}
body{overflow-x:clip}
.panel,.grid2>*,.pgrid>*,.admingrid>*,.chatpage>*,.pmain,.pside{min-width:0}

/* mreze koje nikad ne smiju biti sire od ekrana */
.vidgrid{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.clanlist{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}
.admingrid{grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.editgrid{grid-template-columns:repeat(auto-fit,minmax(min(250px,100%),1fr))}
.shotgrid,.ashots{grid-template-columns:repeat(auto-fill,minmax(min(160px,46%),1fr))}
.friendgrid{grid-template-columns:repeat(auto-fill,minmax(min(104px,30%),1fr))}
.friendgrid.small{grid-template-columns:repeat(auto-fill,minmax(min(88px,30%),1fr))}
.quick{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.statrow{grid-template-columns:repeat(auto-fit,minmax(min(140px,45%),1fr))}
.tblwrap{-webkit-overflow-scrolling:touch}

@media (max-width:760px){
  input,select,textarea{font-size:16px!important}
  .btn{white-space:normal;text-align:center;line-height:1.25}
  .btn.lg{padding:12px 18px;font-size:15px}
  .cta .btn{flex:1 1 auto}

  .hero{padding:20px;border-radius:20px;gap:18px}
  .hero2{padding:8px 0 24px}
  .hero2 h1{font-size:clamp(28px,8.5vw,40px)}
  .lead{margin-bottom:20px}
  .herostats{gap:20px;margin-top:26px}
  .herostats dd{font-size:24px}

  .grid2{gap:14px;margin-bottom:14px}
  .panel{margin-bottom:14px}
  .tbl{font-size:13.5px}
  .tbl th,.tbl td{padding:8px 6px}
  .tbl .rank{width:22px}
  .tbl .gname,.tbl .uname{white-space:normal;overflow-wrap:anywhere;gap:7px}
  .utbl th:nth-child(2),.utbl td:nth-child(2),.utbl th:nth-child(3),.utbl td:nth-child(3){display:none}
  .actions{justify-content:flex-start}

  .pcover{border-radius:18px}
  .phead{flex-direction:column;align-items:center;text-align:center;gap:10px;margin-top:-60px;padding:0}
  .pid{min-width:0;width:100%}
  .pid .clantags{justify-content:center}
  .pstatus{justify-content:center}
  .pbanner .pid h1::after{margin-left:auto;margin-right:auto}
  .pactions{justify-content:center;width:100%;padding-bottom:4px}
  .pactions>.btn,.pactions>form,.pactions>.pill{flex:1 1 100%;justify-content:center}
  .pactions form .btn{width:100%}
  .pgrid{margin-top:18px;gap:14px}
  .editbox{margin-top:14px}
  .editbox>summary{padding:14px 16px}
  .editgrid{padding:0 12px 14px;gap:12px}

  .gamehead{gap:12px}
  .gamehead>.gtile{width:56px;height:56px;font-size:16px;border-radius:16px}
  .kpis{gap:12px;font-size:13px}
  .kpis b{font-size:18px}

  .clanhead{flex-direction:column;align-items:flex-start;gap:12px}
  .clanactions{width:100%;margin-left:0}
  .clanactions>form,.clanactions>.btn{flex:1 1 auto}
  .clanactions form .btn{width:100%}
  .clanform{grid-template-columns:1fr 1fr}
  .clanform input[name=name]{grid-column:1/-1}

  .livepanel-head{gap:8px}
  .livepanel-head .btn{margin-left:0}
  .lc{height:min(60vh,520px)}
  .lc.compact{height:300px}
  .lc-msg{grid-template-columns:30px minmax(0,1fr);gap:8px;padding:6px 4px}
  .lc-av .av{width:30px;height:30px;border-radius:9px;font-size:12px}
  .lc-game{max-width:120px}
  .lc-del,.lc-side{opacity:1}
  .lc-form{gap:6px}

  .upform{flex-direction:column;align-items:stretch}
  .upform>*{width:100%;flex:1 1 auto}
  .shotmeta{gap:10px}
  .shotmeta form{margin-left:0!important}
  .vidgrid figcaption{font-size:13.5px}

  .act{grid-template-columns:auto minmax(0,1fr)}
  .act-thumb{grid-column:2;width:100%;height:auto;aspect-ratio:16/9;max-width:220px}

  .search{flex-wrap:wrap}
  .search input{flex:1 1 100%}
  .adminhead{gap:10px}
  .adminhead h1{font-size:22px}
  .uhead{flex-direction:column;align-items:flex-start}
  .amsg{grid-template-columns:auto minmax(0,1fr)}
  .amsg-act{grid-column:1/-1;justify-content:flex-start}
  .gform2 .file{flex-wrap:wrap}
  .ownerform{flex-wrap:wrap}
  .ownerform input{width:100%}
  .btnrow{flex-direction:column;align-items:stretch}
  .btnrow>form .btn,.btnrow>select{width:100%}

  .facts3 div{padding:12px}
  .yes li,.no li{font-size:14px}
  .announce-in{padding:9px 14px;font-size:13.5px}
  .sitefoot{flex-direction:column;gap:6px;text-align:center;align-items:center}
}

@media (max-width:400px){
  .sitebar-in{gap:8px;padding:8px 10px}
  .brand{font-size:18px;gap:7px}
  .brand img{width:24px;height:24px}
  .sitebar-right{gap:6px}
  .iconbtn{width:34px;height:34px}
  .sitenav a{padding:7px 10px;font-size:14px}
  .page{padding:16px 10px 40px}
  .panel{padding:14px;border-radius:16px}
  .av.xxl{width:96px;height:96px;font-size:40px;border-radius:26px}
  .phead{margin-top:-48px}
  .herostats{gap:16px}
  .livecard{padding:10px 12px}
}

/* messenger */
@media (max-width:899px){
  .top{padding:10px 12px;gap:8px}
  .logo{font-size:18px}
  .me{gap:8px}
  .me .status{max-width:34vw}
  .colhead{padding:14px 12px 10px}
  .friend{width:calc(100% - 8px);margin:2px 4px}
  .chathead{padding:10px 12px;gap:10px}
  .chathead .btn{padding:5px 9px}
  .msgs{padding:12px}
  .msg{max-width:85%}
  .composer{padding:10px;gap:6px}
  .section{padding:14px 12px}
  .nowplaying{margin:10px 12px 0}
}

/* fragline-code-wrap: duge putanje i kod se lome u vise redova */
code{overflow-wrap:anywhere;word-break:break-word;white-space:normal}
.yes li code,.no li code,.panel p code,.tbl code{word-break:break-all}