/* Phone and tablet. Desktop tables stay tables; phones get tappable cards. */

.ptitle{font-size:36px;line-height:1.15;letter-spacing:-.03em}
img.lg{object-fit:cover;background:#fff;border:1px solid var(--line);padding:0}
.lg.hero{width:52px;height:52px;border-radius:12px;font-size:18px}
.phone{display:none}
.scorebits{max-width:220px}
.phone .scorebits{align-items:flex-end;text-align:right}
.id{min-width:0}
.hit{position:relative}
tr.hit{position:static}
tr.hit td.who,.item.hit,.sc.hit,.result.hit,li.hit,.clip.hit{position:relative}
a.stretched::after{content:"";position:absolute;inset:0;z-index:1}
.hit a:not(.stretched),.hit button,.hit input,.hit select,.hit label,.hit .tg,.hit .tags,.hit .tag{position:relative;z-index:2}
tr.hit{cursor:pointer}
.result.hit{display:flex;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid var(--line2)}
.filters-toggle{display:none}

@media (max-width:800px){
.wrap{padding:0 16px}
.top .wrap{flex-wrap:wrap;height:auto;gap:10px 12px;padding-top:12px;padding-bottom:12px}
.logo{order:1}
.nav-auth{order:2;margin-left:auto}
.nav-submit{order:3}
.search{order:4;flex:1 1 100%;max-width:none;min-width:0;margin-left:0}
.nav{order:5;flex:1 1 100%;gap:16px;overflow-x:auto;padding-bottom:2px}
.hero h1,.ptitle{white-space:normal;font-size:28px}
.hero .row{flex-wrap:wrap;gap:8px}
.boxes,.two,.cats,.clips,.spons{grid-template-columns:1fr}
.counts{grid-template-columns:1fr 1fr}
.news .f,.feed li{display:flex;flex-direction:column;align-items:stretch}
.feed li{display:grid;grid-template-columns:1fr;gap:6px}
.subnav,.fnav{flex-wrap:wrap}
footer .wrap{flex-direction:column;gap:12px}
.cookie-banner{flex-direction:column;align-items:stretch}
.cookie-actions{width:100%}
.cookie-actions .btn{flex:1}
.filters-toggle{display:inline-flex;margin-bottom:12px}
.toolfilters{display:none}
.toolfilters.open{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#fff;border-top:1px solid var(--line);border-radius:16px 16px 0 0;padding:18px 16px 28px;max-height:80vh;overflow:auto;box-shadow:0 -12px 40px rgba(15,27,45,.18);flex-direction:column}
.toolfilters .country{width:auto}
.layout{grid-template-columns:1fr}
.idrow{flex-wrap:wrap}
.phead h1,.ptitle{font-size:30px}
.item{grid-template-columns:36px 44px 1fr}
.item .side{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;text-align:left;align-items:center}
}

@media (max-width:760px){
.tablewrap thead{display:none}
.tablewrap table,.tablewrap tbody{display:block;width:100%}
.tablewrap tr.hit{display:block;border-bottom:1px solid var(--line2)}
.tablewrap tr.hit > td{display:none;border:0}
.tablewrap tr.hit > td.who{display:block;padding:12px 14px;white-space:normal}
.tablewrap tr.sepr{display:block}
.tablewrap tr.sepr td{display:block}
.phone{display:flex;flex-direction:column;align-items:flex-end;gap:2px;margin-left:auto;flex:none}
.tool .d{display:none}
.tg > :nth-child(n+3),.tags > :nth-child(n+3){display:none}
.tabs{overflow-x:auto;flex-wrap:wrap;padding:0 8px}
.tabs .meta{flex:1 1 100%;margin-left:0;padding:8px}
.tabs .meta form,.sel{flex-wrap:wrap;max-width:100%}
.sel{margin-left:0;width:100%;min-width:0}
.sel select{width:100%;max-width:calc(100vw - 32px);min-width:0}
.fbar{flex-wrap:wrap}
.fbar .taglegend{margin-left:0}
footer .wrap{min-width:0}
footer .wrap div{min-width:0;overflow-wrap:anywhere}
.hot li{grid-template-columns:16px 22px minmax(0,1fr) auto;height:auto;min-height:36px;padding:4px 0}
.hot .rc{display:none}
.lnews li{height:auto;align-items:flex-start;padding:8px 0;gap:8px}
.lnews .nbody{flex-direction:column;gap:2px}
.lnews .nm{max-width:100%;text-align:left;white-space:normal}
.tablewrap .model.who{display:flex}
.layout .card table thead{display:none}
.layout .card table,.layout .card tbody{display:block}
.layout .card tr.hit{display:block;padding:12px 14px;border-bottom:1px solid var(--line2)}
.layout .card tr.hit > td{display:none;border:0;padding:0;white-space:normal}
.layout .card tr.hit > td.who{display:flex}
.layout .card tr.sepr{display:block}
.layout .card tr.sepr td{display:block}
}

/* The ranking table stays inside the card. Narrow widths may scroll the wrapper. */
#board{max-width:100%;min-width:0;overflow:hidden}
#board .tabs{flex-wrap:wrap;min-width:0}
#board .tabs .meta{min-width:0;flex-wrap:wrap;max-width:100%}
#board .tablewrap{max-width:100%;overflow-x:auto}
#board .tool{min-width:0;max-width:100%}
#board .tool .id{min-width:0;flex:1 1 auto;max-width:100%}
#board .tool b,#board .tool .d{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#board .tg{flex-wrap:wrap;min-width:0;max-width:100%}
#board .tg .tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}
#board .scorebits,#board .lchg{white-space:normal;max-width:100%}
@media (min-width:1100px){
#board .tablewrap{overflow-x:hidden}
#board .tablewrap table{width:100%;table-layout:fixed}
#board .tablewrap th,#board .tablewrap td{overflow:hidden}
#board .tablewrap th:nth-child(1),#board .tablewrap td:nth-child(1){width:46px}
#board .tablewrap th:nth-child(3),#board .tablewrap td:nth-child(3){width:148px}
#board .tablewrap th:nth-child(4),#board .tablewrap td:nth-child(4){width:64px}
#board .tablewrap th:nth-child(5),#board .tablewrap td:nth-child(5){width:108px}
#board .tablewrap th:nth-child(6),#board .tablewrap td:nth-child(6){width:120px}
#board .tablewrap th:nth-child(7),#board .tablewrap td:nth-child(7){width:136px;overflow:visible;text-overflow:clip}
#board .tablewrap td.who{white-space:normal}
#board .tool b{display:block}
#board .tool .d{display:block;margin-left:0}
}
@media (max-width:1099px) and (min-width:761px){
#board .tablewrap table{min-width:960px}
}