.the_champ_horizontal_sharing {
    position: relative;
    top: -5px;
}
.the_champ_horizontal_sharing > ul {
    margin: 0;
}
.the_champ_horizontal_sharing > ul > li {
    height: initial;
}
.sharing-btn {
    margin: 0;
}
/*.gag-item .badge-gif-play {
	background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCA0ODUuNzQgNDg1Ljc0IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA0ODUuNzQgNDg1Ljc0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgd2lkdGg9IjMycHgiIGhlaWdodD0iMzJweCI+CjxnPgoJPGc+CgkJPHBhdGggZD0iTTI0Mi44NzIsMEMxMDguNzMyLDAsMC4wMDQsMTA4LjczNiwwLjAwNCwyNDIuODY0YzAsMTM0LjE0LDEwOC43MjgsMjQyLjg3NiwyNDIuODY4LDI0Mi44NzYgICAgYzEzNC4xMzYsMCwyNDIuODY0LTEwOC43MzYsMjQyLjg2NC0yNDIuODc2QzQ4NS43MzYsMTA4LjczNiwzNzcuMDA4LDAsMjQyLjg3MiwweiBNMzM4LjQxMiwyNjMuOTRsLTEzNC4zNiw5Mi43MzIgICAgYy0xNi43NzYsMTEuNTg4LTMwLjU4NCw0LjI0OC0zMC41ODQtMTYuMzE2VjE0NS4zOGMwLTIwLjU1NiwxMy44MDgtMjcuOSwzMC41ODQtMTYuMzEybDEzNC4zMiw5Mi43MzIgICAgQzM1NS4xMzYsMjMzLjM4NCwzNTUuMTc2LDI1Mi4zNDgsMzM4LjQxMiwyNjMuOTR6IiBmaWxsPSIjMDAwMDAwIi8+Cgk8L2c+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg==);
	background-size: 93%;
	display: none;
	position: absolute;
	top: 50%;
	margin-top: -36px;
	left: 50%;
	margin-left: -36px;
	height: 72px;
	width: 72px;
	text-align: center;
	overflow: hidden;
	background-color: rgba(255,255,255,.8);
	line-height: 72px;
	border-radius: 50%;
	cursor: pointer;
	padding: 0;
	background-repeat: no-repeat;
	background-position: center center;
}*/
/*.gag-item--alignment .badge-gif-play {
	background-size: 88%;
	margin-top: -21px;
	margin-left: -21px;
	height: 42px;
	width: 42px;
}*/
.gag-item .gag-item__media--pause ~ .badge-gif-play {
    display: block;
}
.gag-item .gag-video {
    position: relative;
	line-height:0;
}
.gag-item .gag-video {
    cursor: pointer;
}
#theChampGoogleButton {
    background-color: #C54523;
    position: relative;
}
.theChampFacebookLogin {
    background-color: #354F88;
    position: relative;
}
.theChampLogin::after {
    background-color: #DC4D28;
    color: white;
    content: "";
    display: block;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 1.2em;
    font-style: normal;
    left: 35px;
    line-height: 2.4;
    position: absolute;
    top: 0;
    width: 228px;
    text-align: center;
    height: 35px;
}
#theChampGoogleButton::after {
    background-color: #DC4D28;
    content: "Continue with Google";
}
.theChampFacebookLogin::after {
    background-color: #45609D;
    content: "Continue with Facebook";
}
.box-inset .the_champ_login_ul > li {
    display: block;
    position: relative;
    width: 400px !important;
    height: 35px;
    left: 0;
    padding: 0;
    margin: 0 0 0.5em 0 !important;
}
ul.the_champ_login_ul {
    margin: 3px 0!important;
    padding: 0;
    line-height: 0;
    position: relative;
    display: block;
    width: 274px;
    height: 73px;
}
.box-inset .cleanlogin-container {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
}
.custom-login-form {
    padding-top: 0.5em;
}
.custom-login-form .cleanlogin-full-width form fieldset {
    margin-bottom: 0;
}
.custom-login-form input[type="submit"] {
    margin-top: 0;
    width: 100% !important;
    padding: 8px 0 9px;
    margin-bottom: 1em;
}
.custom-login-form .reg-form-group {
    margin: 5px;
    padding: 4px 0;
}
.custom-login-form .reg-form-group > input[type="text"] {
    margin-top: 0 !important;
}
.custom-login-form .log_forms {
    width: 100%;
    padding: 0;
    border: 0;
    margin: 0;
    box-sizing: border-box;
}
.custom-login-form .log-form-group {
    padding: 5px 0;
}
.log_forms input[type="submit"] {
    width: 100%;
    padding: 7px;
    border: none;
}

#log_forms input[type="submit"] {
border: none;
}

.link-a span {
    display: block;
    overflow: hidden;
    position: relative;
    padding: 10px 20px;
    border-radius: 2px;
    background: #507299;
    color: #fff;
    cursor: pointer;
}
.end_of_query .link-a {
    display: none;
}

.edit-frame {
    border: 0;
    
}
.follow:before {
    content: '' !important;
}
.unfollow:before {
    content: '' !important;
}
.comment-point {
    display: inline-block;
    color: #999;
    font-size: 12px;
    font-weight: normal;
    margin-left: 13px;
    position: relative;
}
.gag-rating {
    cursor: pointer;
}
.gallery-c ul .gag-rating--active {
    background: #aaa;
    color: #fff;
}
.gag-rating__value {
    display: inline;
}
.gallery-padding {
    padding: 1.8em 1em 0;
}
/* 2026-11-09: local avatar icon, rounded like the other header buttons */
img.avatar, #nav > ul.logged img, #nav2 img { border-radius: 2px; }

/* 2026-11-09: X (formerly Twitter) share buttons in the X colours */
.gallery-c ul li.tw { background: #000; }
.gallery-c ul li.tw a { display: block; text-align: center; }
.gallery-c ul li.tw svg.x-logo { display: inline-block; width: 14px; height: 14px; vertical-align: -2px; }
.social-b li.tw a { background: #000; }
.social-b li.tw a:hover { background: #222; }
.social-b i.icon-x { background: #222; }
.social-b i.icon-x svg.x-logo { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; color: #fff; }

/* 2026-11-09: endless scrolling status line */
.endless-status { clear: both; min-height: 1px; padding: 14px 0; color: #999; font-size: 1.3em; text-align: center; }

/* ==== 2026-11-09: Roboto for all text (self-hosted, SIL OFL / Apache 2.0, variable 400-900) ==== */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
#logo, #logo a { font-family: Roboto, Arial, Helvetica, sans-serif; font-weight: 900; }
#nav, #nav2 { font-family: Roboto, Arial, Helvetica, sans-serif; font-weight: 500; }
.gallery-c > li > a > span { font-family: Roboto, Arial, Helvetica, sans-serif; }

/* 2026-11-09: thin menu icon (2 px lines, 20 px wide) instead of the 4 px burger and X */
#top > .menu:before, #top > .menu:after { width: 20px; margin-left: -10px; border-width: 0; background: none; }
#top > .menu:before { top: 14px; height: 10px; border-top: 2px solid #fff; border-bottom: 2px solid #fff; } /* border-box: 10 px = lines at 14 and 22 */
#top > .menu:after { top: 30px; bottom: auto; height: 2px; border-bottom: 2px solid #fff; } /* third line at 30 */
.menu-active #top > .menu:before, .menu-active #top > .menu:after { top: 22px; bottom: auto; width: 20px; height: 2px; margin-left: -10px; border-width: 0; background: #fff; }

/* 2026-11-09: Apple-style near-black header (colours only; layout, fonts and menu unchanged) */
#top { background: #161617; border-bottom-color: #161617; }
#nav > ul > li.active > a, #nav > ul > li > a:hover { background: rgba(255, 255, 255, 0.12); }
#nav > ul > li.a > a, #nav2 > ul > li > a { background: rgba(255, 255, 255, 0.14); border-radius: 6px; }
#nav > ul.logged > li > a, #nav > ul.logged > li.a > a { background: rgba(255, 255, 255, 0.08); }
#nav > ul.logged > li > a i { color: #d1d1d6; }
.search-active #nav > ul.logged > li.has-search > a { background: rgba(255, 255, 255, 0.2); }
#nav > ul.logged > li > a > span, .js #nav > ul.logged > li > a > span:before { border-color: #161617; }
#nav2 > ul.logged > li.has-img > a { background: none; }

/* 2026-11-09: logo lowercase 22 px, vertically centred in the bar (47 px desktop, 43 px phones) */
#logo { display: flex; align-items: center; height: 47px; font-size: 22px; line-height: 1; text-transform: lowercase; }
#logo a { display: block; line-height: 1; }
@media only screen and (max-width: 53.125em) {
    #logo { justify-content: center; height: 43px; }
}

/* 2026-11-09: the ad network's native widget brings its own Arial; use the site font */
.msg-native-widget, .msg-native-widget * { font-family: Roboto, Arial, Helvetica, sans-serif !important; }

/* 2026-11-10: heading above the related gags on single gag pages */
.related-gags__title {
    margin: 0 0 12px;
    padding: 12px 15px;
    background: #fff;
    color: #31333F;
    font-weight: 700;
    font-size: 1.35em;
    line-height: 1.3;
}
@media only screen and (max-width: 53.125em) {
    .related-gags__title {
        margin-left: -8px;
        margin-right: -8px;
        font-size: 1.2em;
    }
}

/* 2026-11-10: SEO headings and texts (gag H1, tag H1, show intro, dialogue line in lists) */
.page-h1 {
    margin: 0 0 12px;
    padding: 12px 15px;
    background: #fff;
    color: #31333F;
    font-weight: 700;
    font-size: 1.5em;
    line-height: 1.3;
}
.page-h1 small {
    font-weight: 400;
    font-size: .65em;
    color: #888;
}
.page-h1 small a {
    color: #507299;
}
#user > header h1.show-h1 {
    display: inline;
}
.show-h1__sub {
    font-size: .6em;
    color: #DFDFD0;
}
#user > header .show-follow {
    display: inline-block;
    margin: 0 0 0 12px;
    vertical-align: middle;
    position: relative;
    top: -6px;
}
.show-intro p {
    margin: 0 0 12px;
    line-height: 1.5;
}
.show-intro__chars span {
    font-weight: 700;
    margin-right: 6px;
}
.show-intro__chars a {
    color: #31333F;
}
.gag-excerpt {
    margin: -4px 0 10px;
    padding: 0 10px; /* lines up with the gag title above it */
    color: #555;
    font-size: 14px;
    line-height: 1.45;
}
@media only screen and (max-width: 53.125em) {
    .page-h1 {
        margin-left: -8px;
        margin-right: -8px;
        font-size: 1.25em;
    }
}


/* 2026-11-10: Follow button (show header, gag page show box) and the fave heart next to the votes */
.follow-btn {
    display: inline-block;
    padding: 0 12px;
    border-radius: 3px;
    background: #09f;
    color: #fff !important;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 26px;
    text-decoration: none !important;
    white-space: nowrap;
}
.follow-btn:hover {
    background: #0080d6;
}
.follow-btn--on {
    background: #e4e4e4;
    color: #31333F !important;
}
.follow-btn--on:hover {
    background: #d6d6d6;
}
.list-c .follow-btn {
    margin: -4px 0 -4px 8px; /* negative margins keep the row as high as the others */
    padding: 0 9px;
    font-size: 12px;
    line-height: 20px;
    vertical-align: baseline;
}
@media only screen and (max-width: 53.125em) {
    #user > header .show-follow {
        display: block;
        margin: 0 0 4px; /* same gap to the title above and the stats below */
        top: 0;
    }
}
.gag-fave {
    cursor: pointer;
}
.gallery-c ul li.gag-fave a, .gallery-c ul li.gag-fave div {
    display: block;
}
.gallery-c ul li.gag-fave {
    color: #6C6C6C;
}
.gallery-c ul li.gag-fave a {
    color: #6C6C6C;
}
/* vote and fave icons centred in their 33px buttons (the arrows sat ~1px high, the bookmark ~2px low) */
.gallery-c ul li.gag-rating > div, .gallery-c ul li.gag-fave > div, .gallery-c ul li.gag-fave > a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 33px;
    line-height: 1;
}
.gallery-c ul li.gag-rating i, .gallery-c ul li .gag-fave__icon {
    display: block;
    position: static;
    top: auto;
    margin: 0;
}
.gallery-c ul li .gag-rating__value {
    line-height: 1;
}
.gallery-c ul li.gag-fave--active, .gallery-c ul li.gag-fave--active a {
    background: #aaa; /* same as an active upvote */
    color: #fff;
}

/* 2026-11-10: message for visitors who tap the fave button */
.tvgag-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 10000;
    max-width: calc(100% - 32px);
    padding: 12px 16px;
    border-radius: 4px;
    background: #222;
    color: #fff;
    font-family: Roboto, Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.4;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 10px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.tvgag-toast--shown {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
}
.tvgag-toast a {
    display: inline-block;
    margin-left: 10px;
    color: #4db8ff;
    font-weight: 700;
    text-decoration: none;
}

/* =========================================================================
   2026-11-10: type system. 5 sizes, 3 text greys + white/beige on the dark
   header, 1 blue. The theme's base font is 10px (body 62.5%), so the old
   sizes were fractions of 10px (11-15px everywhere); these override them in px.
   ========================================================================= */
:root {
    --tv-fs-page: 28px;      /* page title: show name */
    --tv-fs-section: 20px;   /* section: gag H1, tag H1, "More from ..." */
    --tv-fs-body: 16px;      /* body: gag titles, intro, dialogue box, tabs */
    --tv-fs-secondary: 14px; /* secondary: dialogue line in lists, tags box, sidebar */
    --tv-fs-meta: 12px;      /* meta: vote counts, points/rank, footer */
    --tv-text: #31333F;      /* main text */
    --tv-text-2: #5F6368;    /* secondary text */
    --tv-text-3: #767676;    /* meta text on white (lightest grey that passes contrast) */
    --tv-on-dark: #fff;
    --tv-on-dark-2: #DFDFD0;
    --tv-blue: #0077CC;      /* links and buttons (white text on it passes contrast) */
    --tv-blue-hover: #0066B0;
}
@media only screen and (max-width: 53.125em) {
    :root {
        --tv-fs-page: 24px;
        --tv-fs-section: 18px;
    }
}

/* show header */
#user > header h1.show-h1 { font-size: var(--tv-fs-page); line-height: 1.3; color: var(--tv-on-dark); }
#user > header .show-h1__sub { font-size: var(--tv-fs-body); color: var(--tv-on-dark-2); }
#user > header ul li { font-size: var(--tv-fs-meta); color: var(--tv-on-dark-2); }
#sub li { font-size: var(--tv-fs-body); }

/* headings in the content column */
.page-h1, .related-gags__title { font-size: var(--tv-fs-section); color: var(--tv-text); line-height: 1.3; }
.page-h1 small { font-size: var(--tv-fs-secondary); color: var(--tv-text-2); }

/* show intro */
.show-intro p { font-size: var(--tv-fs-body); color: var(--tv-text); line-height: 1.5; }
.show-intro p.show-intro__chars { font-size: var(--tv-fs-secondary); }

/* gag lists: title is body size and may wrap (was 12-15px and cut off with "..."),
   the dialogue line under it is secondary */
.gallery-c > li > a > span { font-size: var(--tv-fs-body); color: var(--tv-text); line-height: 1.4; white-space: normal; padding-top: 8px; padding-bottom: 6px; }
.gag-excerpt { font-size: var(--tv-fs-secondary); color: var(--tv-text-2); }
.gallery-c ul li.gag-rating, .gallery-c ul li.gag-fave { font-size: var(--tv-fs-meta); color: var(--tv-text-2); }
.gallery-c ul li.gag-fave a { color: var(--tv-text-2); }
.gallery-c ul li.gag-rating--active, .gallery-c ul li.gag-fave--active, .gallery-c ul li.gag-fave--active a { color: #fff; }

/* gag page: dialogue box and tags box */
.single_quote { font-size: var(--tv-fs-body); color: var(--tv-text); line-height: 1.5; }
.list-c { font-size: var(--tv-fs-secondary); color: var(--tv-text); }
.list-c li { padding-left: 80px; font-size: var(--tv-fs-secondary); }
.list-c li > span:first-child { color: var(--tv-text-2); }

/* sidebar top lists */
.gallery-a span { font-size: var(--tv-fs-secondary); color: var(--tv-text); }

/* one blue for links and buttons */
a, .page-h1 small a { color: var(--tv-blue); }
.follow-btn { background: var(--tv-blue); }
.follow-btn:hover { background: var(--tv-blue-hover); }
#sub li.active a:before, .pagination-a li.active a { background: var(--tv-blue); }
.follow-btn.follow-btn--on { background: #e4e4e4; }
.follow-btn.follow-btn--on:hover { background: #d6d6d6; }
#user > header .follow-btn { font-size: var(--tv-fs-secondary); }
.pagination-a li a { font-size: var(--tv-fs-body); }

/* 2026-11-10: gag page, everything under the image (dialogue box, show/tags/stream box with its
   Follow button, "More from ..." heading) in one size, and the titles under the sidebar top lists */
:root { --tv-fs-small: 13px; }
.single_quote, .list-c, .list-c li, .list-c .follow-btn, .related-gags__title { font-size: var(--tv-fs-small); }
.list-c li { padding-left: 74px; }
.list-c .follow-btn { line-height: 20px; margin-top: -3px; margin-bottom: -3px; }
.gallery-a span { font-size: var(--tv-fs-small); }

/* 2026-11-11: gag page, one white box under the gag: H1, dialogue, hashtags (show + characters) */
.gag-text { padding: 14px 15px 12px; }
.gag-text .page-h1 { margin: 0 0 8px; padding: 0; background: none; }
.gag-text .single_quote { padding: 0 0 10px; }
.gag-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 0; padding: 10px 0 0; border-top: 1px solid #eee; font-size: var(--tv-fs-small); line-height: 1.5; }
.gag-tags a { color: var(--tv-blue); }
.gag-tags a.gag-tags__show { font-weight: 700; }
.gag-tags__ep { color: var(--tv-text-2); }
.gag-tags .follow-btn { margin-left: auto; padding: 0 9px; font-size: 12px; line-height: 22px; color: #fff; }
.gag-tags .follow-btn.follow-btn--on { color: var(--tv-text) !important; }
@media only screen and (max-width: 53.125em) {
    .gag-text .page-h1 { margin-left: 0; margin-right: 0; }
}

/* 2026-11-11: gag page box, version 4: dialogue as chat bubbles, plain hashtags */
.gag-text .page-h1 { margin-bottom: 10px; }
.gag-chat { display: flex; flex-direction: column; gap: 6px; }
.gag-chat__msg { max-width: 85%; padding: 7px 11px; border-radius: 10px; background: #f3f3f3; color: var(--tv-text); font-size: var(--tv-fs-small); line-height: 1.5; }
.gag-chat__msg--b { align-self: flex-end; background: #e8f2fb; }
.gag-chat__who { display: block; font-weight: 700; }
.gag-tags { border-top: 0; padding-top: 10px; }
.gag-tags a.gag-tags__show { font-weight: 400; }

/* 2026-11-11: share button next to upvote and bookmark; bold vote numbers */
.gallery-c ul li.gag-share { cursor: pointer; color: var(--tv-text-2); font-size: var(--tv-fs-meta); }
.gallery-c ul li.gag-share > div { display: flex; align-items: center; justify-content: center; gap: 5px; height: 33px; line-height: 1; }
.gag-share__icon { display: block; }
.gag-share__label { display: inline !important; padding: 0 !important; font-size: 13px !important; font-weight: 700; white-space: nowrap; }
.gallery-c ul li .gag-rating__value { font-weight: 700; }

/* 2026-11-11: share menu (Copy link, Facebook, X) */
.tvgag-share-menu { position: fixed; z-index: 10001; min-width: 180px; padding: 6px 0; border-radius: 6px; background: #fff; box-shadow: 0 6px 24px rgba(0, 0, 0, .18); font-family: Roboto, Arial, Helvetica, sans-serif; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .15s, transform .15s, visibility .15s; }
.tvgag-share-menu--open { opacity: 1; visibility: visible; transform: translateY(0); }
.tvgag-share-menu a { display: flex; align-items: center; gap: 10px; padding: 9px 16px; color: var(--tv-text); font-size: 14px; line-height: 1.2; text-decoration: none; }
.tvgag-share-menu a:hover { background: #f3f3f3; color: var(--tv-text); }
.tvgag-share-menu svg { width: 16px; height: 16px; flex: none; color: var(--tv-text-2); }

/* 2026-11-11: gag page = one white card (image, title, dialogue, hashtags) + a white box with the buttons */
.gallery-c.gag-card > li { margin-bottom: 10px; padding-bottom: 0; }
.gag-card__text { padding: 12px 15px 14px; line-height: 1.4; }
.gag-card__text .page-h1, .gag-card .page-h1 { margin: 0 0 10px; padding: 0; background: none; }
.gag-card__text .gag-tags { padding-top: 10px; }
.gallery-c.gag-actions > li { margin-bottom: 20px; padding: 8px 0 4px; }
.gallery-c.gag-actions ul.gag-footer-links { padding-left: 8px; }
.gallery-c .gag-card__text span { font-size: inherit; padding: 0; overflow: visible; white-space: normal; text-overflow: clip; }
.gallery-c .gag-card__text .gag-chat__who { display: block; }
.gallery-c .gag-card__text .gag-tags__ep { display: inline; }

/* 2026-11-11: gag page action bar at the bottom of the card (replaces the separate button box) */
.gallery-c.gag-card > li { margin-bottom: 20px; }
.gag-actionbar { border-top: 1px solid #eee; }
.gallery-c .gag-actionbar ul.gag-footer-links { display: flex; float: none; margin: 0; padding: 0; }
.gallery-c .gag-actionbar ul.gag-footer-links > li { flex: 1; float: none; height: 44px; margin: 0; padding: 0; border-radius: 0; background: none; }
.gallery-c .gag-actionbar ul.gag-footer-links > li + li { border-left: 1px solid #eee; }
.gallery-c .gag-actionbar ul.gag-footer-links > li > div,
.gallery-c .gag-actionbar ul.gag-footer-links > li > a { height: 44px; }
.gallery-c .gag-actionbar ul.gag-footer-links > li:hover { background: #f7f7f7; }
.gallery-c .gag-actionbar li.gag-fave > div::after,
.gallery-c .gag-actionbar li.gag-fave > a::after { content: "Fave"; font-size: 13px; font-weight: 700; }
.gallery-c .gag-actionbar li.gag-rating--active,
.gallery-c .gag-actionbar li.gag-fave--active { background: #aaa; color: #fff; }

/* 2026-11-11: TV show page: intro and hashtags in the gag page text size, list items as gag cards */
.show-intro p, .show-intro p.show-intro__chars { font-size: var(--tv-fs-small); line-height: 1.5; }
.show-intro p.gag-tags { margin: 0; padding-top: 4px; }
.gag-card__title a { color: var(--tv-text); }
.gag-card__title a:hover { color: var(--tv-blue); }

/* 2026-11-11: fixes: upvoted/faved part of the action bar stays visible (the background rule of the bar
   outranked the grey active background, leaving white on white); even padding in the show intro box */
.gallery-c .gag-actionbar ul.gag-footer-links > li.gag-rating--active,
.gallery-c .gag-actionbar ul.gag-footer-links > li.gag-fave--active { background: #aaa; color: #fff; }
.gallery-c .gag-actionbar ul.gag-footer-links > li.gag-fave--active > div,
.gallery-c .gag-actionbar ul.gag-footer-links > li.gag-fave--active > a { color: #fff; }
.article.show-intro { padding: 12px 15px 14px; }
.show-intro p:last-child { margin-bottom: 0; }

/* 2026-11-11: action bar = option 1: rounded grey pills, left aligned (upvote count, Fave, Share);
   an upvoted or faved pill turns solid blue with white text */
.gag-card__text { padding-bottom: 10px; }
.gag-actionbar { border-top: 0; padding: 0 15px 14px; }
.gallery-c .gag-actionbar ul.gag-footer-links { display: flex; gap: 6px; padding: 0; }
.gallery-c .gag-actionbar ul.gag-footer-links > li { flex: none; min-width: 0; height: 32px; padding: 0 12px; border-radius: 16px; background: #f0f0f0; font-size: 12px; }
.gallery-c .gag-actionbar ul.gag-footer-links > li + li { border-left: 0; }
.gallery-c .gag-actionbar ul.gag-footer-links > li > div,
.gallery-c .gag-actionbar ul.gag-footer-links > li > a { height: 32px; }
.gallery-c .gag-actionbar ul.gag-footer-links > li:hover { background: #e6e6e6; }
.gallery-c .gag-actionbar ul.gag-footer-links > li.gag-rating--active,
.gallery-c .gag-actionbar ul.gag-footer-links > li.gag-fave--active { background: var(--tv-blue); color: #fff; }

/* 2026-11-11: pill action bar in every gag list (home, character pages, related gags, Top 10, profile):
   under the title / dialogue line, same pills as on the cards */
.gallery-c:not(.gag-card) > li > .gag-actionbar { padding: 4px 10px 10px; }

/* 2026-11-11: the "next" link of the related gags is only for endless.js */
nav.pagination-a.related-more { display: none; }

/* 2026-11-11: one title style under every gag picture: gag page H1, show and character page cards,
   and the list titles (home, related gags, Top 10, profile): 16px bold */
.gag-card .page-h1, .gag-card__text .page-h1, .gag-card__title,
.gallery-c > li > a > span { font-size: var(--tv-fs-body); font-weight: 700; line-height: 1.4; }

/* 2026-11-11: show header redesign. 80px picture (60px on phones) with 6px corners; next to it the show
   name, "The funniest Quotes & GIFs" in the stats size and the stats line with a small Follow button in
   place of the follower count, as one block 2px inside the picture at the top and the bottom; the subtitle
   stays with the name, the stats line sits at the bottom. Only on show pages (header.show-head).
   The H1 keeps name + subtitle for Google. Hot / Fresh / Top 10 tabs: 13px bold in a 36px bar. */
#user > header.show-head { --pic: 80px; display: grid; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; min-height: calc(var(--pic) + 44px); padding-top: 24px; padding-bottom: 24px; }
#user > header.show-head:after { display: none; }
#user > header.show-head figure img { width: var(--pic); height: var(--pic); border-radius: var(--tv-r-sm); object-fit: cover; }
#user > header.show-head h1.show-h1 { display: contents; }
#user > header.show-head .show-h1__name { display: block; line-height: 1; }
#user > header.show-head .show-h1__sub { display: block; margin: 4px 0 0; font-size: var(--tv-fs-meta); line-height: 1.3; color: var(--tv-on-dark-2); }
#user > header.show-head ul { align-self: end; display: flex; flex-wrap: wrap; align-items: center; overflow: visible; margin: 0; line-height: 1.2; }
#user > header.show-head ul li.show-follow { display: block; position: static; top: 0; margin: 0; }
#user > header.show-head .show-follow .follow-btn { display: inline-block; margin: -3px 0; padding: 0 9px; border-radius: 10px; font-size: var(--tv-fs-meta); font-weight: 700; line-height: 20px; vertical-align: middle; }
#sub ul, #sub li, #sub li a { height: 36px; line-height: 36px; }
#sub li { font-size: 13px; font-weight: 700; }
@media only screen and (max-width: 53.125em) {
    #user > header.show-head { --pic: 60px; text-align: left; min-height: calc(var(--pic) + 28px); padding: 16px 0 16px 74px !important; }
    #user > header.show-head figure { position: absolute; left: 0; top: 50%; right: auto; bottom: auto; }
    #user > header.show-head h1.show-h1 { font-size: 20px; }
    #user > header.show-head ul { justify-content: flex-start; padding: 0; }
    #user > header.show-head ul li { margin-right: 16px; }
    #user > header.show-head ul:last-child { padding-bottom: 0; }
}

/* 2026-11-11: show header: the Follow button reads "Fave" and sits on the bottom of the show picture;
   phones keep the 80px desktop picture */
#user > header.show-head ul li.show-follow { position: absolute; z-index: 3; left: calc(var(--pic) / 2); top: calc(50% + var(--pic) / 2 - 26px); margin: 0; transform: translateX(-50%); }
#user > header.show-head .show-follow .follow-btn { margin: 0; padding: 0 10px; line-height: 20px; white-space: nowrap; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
@media only screen and (max-width: 53.125em) {
    #user > header.show-head { --pic: 80px; padding-left: 94px !important; }
}

/* 2026-11-11: show header without the stats line: show name and subtitle centered vertically
   next to the picture (the ul only holds the Fave button, which sits on the picture) */
#user > header.show-head { grid-template-rows: auto auto; align-content: center; }
#user > header.show-head ul { position: static; height: 0; margin: 0; padding: 0; }

/* 2026-11-11: phones: the white tab bar had a fixed 46px height (screen.css) while the tabs are 36px,
   so the active line floated 10px above the bottom; bar now matches the tabs */
@media only screen and (max-width: 53.125em) {
    #sub { height: 36px; }
}

/* 2026-11-11: phones: burger icon lower, lines 6px apart instead of 8px (at 16, 22 and 28; was 14, 22, 30),
   still centered in the 43px top bar; the open (X) state is unchanged */
#top > .menu:before { top: 16px; height: 8px; }
#top > .menu:after { top: 28px; }

/* 2026-11-11: logo = SVG wordmark (Fredoka Bold as a path), white via currentColor */
#logo a { color: #fff; }
#logo a svg { display: block; }

/* 2026-11-11: rounded corners. 6px for large blocks (gag cards, related gags, Top 10 lists, show intro,
   sidebar boxes, show list box, share box), 4px for small thumbnails (header pictures, show list
   thumbnails). Pictures at the top of a card get only their top corners rounded. On phones the blocks
   that run edge to edge stay square (see the media query below). */
:root { --tv-r: 6px; --tv-r-sm: 4px; }
.gallery-c > li, .article.show-intro, ul.social-b.a { border-radius: var(--tv-r); }
.gallery-c > li > a > img, .gallery-c > li > a > video { border-radius: var(--tv-r) var(--tv-r) 0 0; }
.gallery-a > li:before { border-radius: var(--tv-r); }
.gallery-a > li > a > img { border-radius: var(--tv-r) var(--tv-r) 0 0; }
.gallery-b:before { border-radius: var(--tv-r); }
.gallery-b img { border-radius: var(--tv-r-sm); }
#user > header figure img { border-radius: var(--tv-r-sm); }

/* 2026-11-11: show header 30px taller than the picture on desktop (15px above and below it). On phones
   the picture gets the same 15px gap on top, bottom and left (left lines up with the intro text). */
#user > header.show-head { min-height: calc(var(--pic) + 30px); }
@media only screen and (max-width: 53.125em) {
    #user > header.show-head { min-height: calc(var(--pic) + 30px); padding-left: 101px !important; }
    #user > header.show-head figure { left: 7px; }
    .gallery-c > li, .gallery-c > li > a > img, .gallery-c > li > a > video, .article.show-intro, ul.social-b.a,
    .gallery-a > li:before, .gallery-a > li > a > img, .gallery-b:before { border-radius: 0; }
}

/* 2026-11-11: Top 10 page header uses the show header (header.show-head); the show name in the subline links to the show */
#user > header.show-head .show-h1__sub a { display: inline; position: static; left: auto; top: auto; height: auto; margin: 0; padding: 0; border-radius: 0;
    background: none; color: inherit; font: inherit; line-height: inherit; text-transform: none; }
#user > header.show-head .show-h1__sub a:before { content: none; }
#user > header.show-head .show-h1__sub a:hover { color: #fff; text-decoration: underline; }

/* 2026-11-11: Top 10 titles are long: 22px on desktop, 17px on phones, line height 1.25 and balanced line breaks */
#user > header.top10-head h1.show-h1 { font-size: 22px; }
#user > header.top10-head .show-h1__name { line-height: 1.25; text-wrap: balance; }
@media only screen and (max-width: 53.125em) {
    #user > header.top10-head h1.show-h1 { font-size: 17px; }
}