/* Anime5D skin — dark surfaces, Google Sans, calmer episode list.
   Layered over AnimeStream; the theme is ionCube-encoded so nothing here
   patches it. Deactivating the plugin removes all of it. */

:root {
    /* One ramp, dark to light, so surfaces stack without inventing new greys. */
    --a5d-bg:        #0b0d11;
    --a5d-surface:   #131720;
    --a5d-surface-2: #1a1f2b;
    --a5d-line:      #232a38;

    --a5d-text:      #e7eaf0;
    --a5d-muted:     #98a2b3;

    --a5d-accent:    #7c5cff;
    --a5d-accent-dim:#5b41c9;

    --a5d-radius:    10px;
    --a5d-shadow:    0 1px 2px rgb(0 0 0 / .4), 0 8px 24px rgb(0 0 0 / .28);
}

/* ---------- base ---------------------------------------------------- */

body,
button, input, select, textarea {
    font-family: var(--a5d-font, "Google Sans"), "Segoe UI", Roboto,
                 "Noto Sans Thai", system-ui, -apple-system, sans-serif;
}

body {
    background: var(--a5d-bg);
    color: var(--a5d-text);
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
a:hover { color: var(--a5d-accent); }

/* AnimeStream paints several wrappers white; pull them onto the ramp rather
   than fighting each one with its own colour. */
#main, #content, .wrapper, .postbody, .bixbox, .listupd,
.releases, .pagination, .hpage, .single-info, .bigcontent,
.serieslist, .widget, .sidebar, footer, .footer {
    background-color: transparent;
    color: inherit;
    border-color: var(--a5d-line);
}

.bixbox {
    background: var(--a5d-surface);
    border: 1px solid var(--a5d-line);
    border-radius: var(--a5d-radius);
    box-shadow: var(--a5d-shadow);
}

/* ---------- header ---------------------------------------------------- */

#header, .header, .headerz, .mobile-menu, .nav, #menu, .menu {
    background: var(--a5d-surface);
    border-bottom: 1px solid var(--a5d-line);
    color: var(--a5d-text);
}

#header a, .menu a, .nav a { color: var(--a5d-text); }

.search-form input,
input[type="search"], input[type="text"] {
    background: var(--a5d-surface-2);
    border: 1px solid var(--a5d-line);
    color: var(--a5d-text);
    border-radius: 8px;
}
input::placeholder { color: var(--a5d-muted); }

/* ---------- cards ------------------------------------------------------ */

.bs .bsx {
    background: var(--a5d-surface);
    border: 1px solid var(--a5d-line);
    border-radius: var(--a5d-radius);
    overflow: hidden;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.bs .bsx:hover {
    transform: translateY(-3px);
    border-color: var(--a5d-accent-dim);
    box-shadow: var(--a5d-shadow);
}
.bs .bsx .tt {
    color: var(--a5d-text);
    font-weight: 500;
    line-height: 1.35;
}

/* The "Ep 5" badge and the type chip: readable, not shouting. */
.bs .bsx .limit .ep,
.bs .bsx .limit .epx,
span.epx {
    background: rgb(0 0 0 / .72);
    color: #fff;
    border-radius: 6px;
    font-weight: 500;
    letter-spacing: .01em;
}
.bs .bsx .limit .typez,
.typez {
    background: var(--a5d-accent);
    color: #fff;
    border-radius: 6px;
}

/* ---------- series page ------------------------------------------------ */

.bigcontent, .infox, .infozin, .info-content {
    color: var(--a5d-text);
}
.infox .desc, .entry-content, .desc, .synp {
    color: var(--a5d-muted);
    line-height: 1.75;
}
.infox h1, .entry-title, h1, h2, h3 {
    color: var(--a5d-text);
    letter-spacing: -.01em;
}

.spe span { color: var(--a5d-muted); }
.spe span b { color: var(--a5d-text); font-weight: 500; }
.spe span a { color: var(--a5d-accent); }

.genxed a, .bottom.tags a {
    display: inline-block;
    background: var(--a5d-surface-2);
    border: 1px solid var(--a5d-line);
    color: var(--a5d-muted);
    padding: 3px 10px;
    margin: 0 4px 6px 0;
    border-radius: 999px;
    font-size: .85em;
    transition: border-color .16s ease, color .16s ease;
}
.genxed a:hover, .bottom.tags a:hover {
    color: var(--a5d-text);
    border-color: var(--a5d-accent-dim);
}

.rating, .rating i { color: var(--a5d-text); }

/* ---------- episode list ----------------------------------------------- */

/* Asked for: drop the release date and the "Ep" column header. The date is
   the source's upload date, not an air date, and it says nothing useful next
   to a numbered list; the header just repeats what the numbers already are. */
.eplister .epl-date,
.eplister .eph-date,
.eplister .eph-num {
    display: none;
}

/* A grid of numbers, not 450 rows.
 *
 * One row per episode is 56px, so Wan Jie Du Zun's 450 episodes were a
 * 25,200px list -- twelve on screen at a time, and the newest one was half
 * an hour of scrolling away. What made the row that tall was never the
 * episode: it was the title beside the number, and that title is the SAME
 * STRING on every row ("<series> ตอนที่ N - Anime5D", the stored post title).
 * It carries nothing the number does not.
 *
 * Drop it and a row is just a number, so the list can be a grid: 8-10 per
 * line, 2,800px, and the whole run of a long series fits in two screens.
 * Measured on that page: 27,043px of document became 4,687px.
 *
 * `auto-fill` rather than a fixed column count -- the same rule then holds
 * for a 12-episode season (one line of 12) and for the narrower column a
 * phone gives it. */
.eplister ul {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.eplister ul li {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    float: none;
    width: auto;
}
.eplister ul li a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin: 0;
    padding: 10px 6px;
    background: var(--a5d-surface);
    border: 1px solid var(--a5d-line);
    border-radius: 8px;
    color: var(--a5d-text);
    transition: background .14s ease, border-color .14s ease, color .14s ease;
}

/* Hover was a filled accent slab across a 796px row -- the widest, loudest
   thing on the page for pointing at one episode. On a tile the border and
   the number are enough: the target is small, so it does not need shouting
   at to be found. */
.eplister ul li a:hover {
    background: var(--a5d-surface-2);
    border-color: var(--a5d-accent-dim);
    color: var(--a5d-accent);
}

.eplister .epl-num {
    min-width: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    color: inherit;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

.eplister .epl-title { display: none; }

/* Specials are stored without a number (§9 of the handoff: an OVA gives up
   the number rather than fight the real episode for it), which would leave a
   blank tile. Those rows -- and only those -- get the whole line back and
   show their title instead. */
.eplister ul li:has(.epl-num:empty) { grid-column: 1 / -1; }
.eplister ul li:has(.epl-num:empty) a { justify-content: flex-start; gap: 12px; }
.eplister ul li:has(.epl-num:empty) .epl-title {
    display: block;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--a5d-muted);
}

/* Marks the episode you are on while reading the list from its own page. */
.eplister ul li.epcurrent a,
.eplister ul li a[aria-current] {
    border-color: var(--a5d-accent);
}

/* ---------- player + episode page -------------------------------------- */

#pembed, .player-embed, .video-content {
    background: #000;
    border-radius: var(--a5d-radius);
    overflow: hidden;
}

select.mirror,
.mirror, .select-mirror {
    background: var(--a5d-surface-2);
    color: var(--a5d-text);
    border: 1px solid var(--a5d-line);
    border-radius: 8px;
    padding: 7px 10px;
}

.naveps, .nvs, .nvsc {
    background: var(--a5d-surface-2);
    border: 1px solid var(--a5d-line);
    border-radius: 8px;
}
.naveps a, .nvs a, .nvsc a { color: var(--a5d-text); }
.nvs:hover, .nvsc:hover { border-color: var(--a5d-accent-dim); }

/* ---------- pagination, footer, misc ----------------------------------- */

.pagination a, .page-numbers, .hpage a {
    background: var(--a5d-surface-2);
    border: 1px solid var(--a5d-line);
    color: var(--a5d-text);
    border-radius: 8px;
}
.pagination .current, .page-numbers.current {
    background: var(--a5d-accent);
    border-color: var(--a5d-accent);
    color: #fff;
}

footer, .footer, .copyright { color: var(--a5d-muted); }

hr, .bixbox .releases { border-color: var(--a5d-line); }

::selection { background: var(--a5d-accent); color: #fff; }

/* Dark scrollbars, or a long episode list leaves a bright stripe down the
   side of an otherwise dark page. */
* { scrollbar-color: var(--a5d-line) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--a5d-line);
    border-radius: 999px;
    border: 2px solid var(--a5d-bg);
}
::-webkit-scrollbar-thumb:hover { background: #2f394b; }

@media (prefers-reduced-motion: reduce) {
    .bs .bsx, .eplister ul li a { transition: none; }
    .bs .bsx:hover { transform: none; }
}

/* ======================================================================
   Home + chrome. Everything below targets what the live page actually
   renders (div.th header, nav.mm menu, .releases section bars), checked
   in a browser rather than guessed from the theme source -- which is
   ionCube-encoded and unreadable anyway.
   ====================================================================== */

/* An empty slider reserving ~190px of blank page above the first real
   section. It renders nothing but a jQuery init. */
.slidtop:empty,
.postbody > .slidtop { display: none; }

/* ---------- header ----------------------------------------------------- */

.th {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgb(11 13 17 / .82);
    backdrop-filter: saturate(140%) blur(12px);
    -webkit-backdrop-filter: saturate(140%) blur(12px);
    border-bottom: 1px solid var(--a5d-line);
    padding: 10px 0;
}
.th .bound,
.th > div {
    display: flex;
    align-items: center;
    gap: 18px;
}
.th .logo img { max-height: 34px; width: auto; }

/* The search sat in a fixed narrow box with dead space beside it. Let it
   take the room that was empty. */
.th .search-form,
.th form {
    flex: 1 1 auto;
    max-width: 560px;
    margin: 0;
}
.th input[type="text"],
.th input[type="search"] {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: var(--a5d-surface-2);
    border: 1px solid var(--a5d-line);
    border-radius: 999px;
    color: var(--a5d-text);
    transition: border-color .15s ease, background .15s ease;
}
.th input[type="text"]:focus,
.th input[type="search"]:focus {
    outline: none;
    background: var(--a5d-surface);
    border-color: var(--a5d-accent-dim);
}
.th button, .th .search-form button { background: none; border: 0; color: var(--a5d-muted); }
.th button:hover { color: var(--a5d-text); }

/* ---------- menu bar --------------------------------------------------- */

/* Was a solid magenta strip that stopped halfway across the page. Now a
   full-width dark rail that reads as part of the header. */
nav.mm,
#main-menu {
    background: var(--a5d-surface);
    border-bottom: 1px solid var(--a5d-line);
    position: sticky;
    top: 60px;
    z-index: 55;
}
#main-menu .centernav,
#main-menu .bound { background: none; width: auto; }

#main-menu ul.menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
    background: none;
}
#main-menu ul.menu > li { background: none; float: none; }
#main-menu ul.menu > li > a {
    display: block;
    padding: 11px 16px;
    color: var(--a5d-muted);
    font-weight: 500;
    font-size: .95rem;
    line-height: 1.2;
    border-radius: 8px;
    background: none;
    transition: color .15s ease, background .15s ease;
}
#main-menu ul.menu > li > a:hover,
#main-menu ul.menu > li.current-menu-item > a {
    color: var(--a5d-text);
    background: var(--a5d-surface-2);
}
/* The current page gets the accent, once, as a thin underline rather than
   a filled block. */
#main-menu ul.menu > li.current-menu-item > a {
    box-shadow: inset 0 -2px 0 var(--a5d-accent);
}

/* ---------- section headers -------------------------------------------- */

/* "Popular Today" / "Latest Release" were full-width magenta bars. Keep the
   accent as a 3px marker and let the type carry the heading. */
.releases {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid var(--a5d-line);
    border-radius: 0;
    padding: 4px 0 12px;
    margin-bottom: 16px;
}
.releases h1, .releases h2, .releases h3, .releases span {
    color: var(--a5d-text);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.01em;
    background: none;
    padding: 0;
    margin: 0;
}
.releases h1::before, .releases h2::before, .releases h3::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 1.05em;
    margin-right: 10px;
    vertical-align: -.16em;
    background: var(--a5d-accent);
    border-radius: 2px;
}
.releases a, .releases .vl, .releases .viewall {
    margin-left: auto;
    font-size: .82rem;
    font-weight: 500;
    color: var(--a5d-muted);
    background: var(--a5d-surface-2);
    border: 1px solid var(--a5d-line);
    border-radius: 999px;
    padding: 5px 12px;
}
.releases a:hover { color: var(--a5d-text); border-color: var(--a5d-accent-dim); }

/* ---------- sidebar ---------------------------------------------------- */

/* The Gutenberg search block shipped unstyled: white field, grey button. */
.wp-block-search__input {
    width: 100%;
    height: 40px;
    padding: 0 14px;
    background: var(--a5d-surface-2);
    border: 1px solid var(--a5d-line);
    border-radius: 999px;
    color: var(--a5d-text);
}
.wp-block-search__input:focus { outline: none; border-color: var(--a5d-accent-dim); }
.wp-block-search__button {
    height: 40px;
    padding: 0 18px;
    margin-left: 8px;
    background: var(--a5d-accent);
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
}
.wp-block-search__button:hover { background: var(--a5d-accent-dim); }

/* Popular-list tabs (Weekly / Monthly / All) were magenta pills. */
.bixbox .tab a, .serieslist .tab a, ul.tab li a {
    background: var(--a5d-surface-2);
    color: var(--a5d-muted);
    border-radius: 999px;
    padding: 5px 14px;
}
.bixbox .tab a.active, ul.tab li a.active, ul.tab li.active a {
    background: var(--a5d-accent);
    color: #fff;
}

/* Ranked list rows in the sidebar. */
.serieslist ul li { border-bottom: 1px solid var(--a5d-line); padding: 10px 0; }
.serieslist ul li:last-child { border-bottom: 0; }
.serieslist .ctr { color: var(--a5d-muted); background: var(--a5d-surface-2); border-radius: 6px; }
.serieslist h2, .serieslist h3, .serieslist .leftseries h2 { font-size: .95rem; line-height: 1.35; }
.serieslist .leftseries span { color: var(--a5d-muted); font-size: .82rem; }

/* ---------- layout ----------------------------------------------------- */

/* Give the grid room to breathe; the content column was a narrow strip in a
   wide black field. */
.wrapper, .bound { max-width: 1320px; }
#content .wrapper { padding-top: 22px; }

/* ======================================================================
   Beating the theme's inline colour block.

   AnimeStream prints a 4.6 KB <style> at the END of the body, generated
   from the `themecolor` option, which therefore loads after this file and
   wins on equal specificity. Two of its rules are what made the page look
   dated: a full-width saturated bar for the menu, and another for every
   section heading. Those need !important -- there is no later stylesheet
   to put them in.

   The accent itself is NOT fought here: `themecolor` was changed from
   #ae57c6 to #7c5cff so badges, buttons and pagination stay coherent with
   this file. Revert with:
     UPDATE wp_options SET option_value='#ae57c6' WHERE option_name='themecolor';
   ====================================================================== */

#main-menu,
nav.mm {
    background: var(--a5d-surface) !important;
    background-image: none !important;
}

.releases,
.bixbox .releases {
    background: none !important;
    background-image: none !important;
}

/* Its "View All" pill is drawn from the accent; keep it quiet next to the
   heading and let hover bring the colour. */
.releases .vl,
.releases .vl a {
    background: var(--a5d-surface-2) !important;
    color: var(--a5d-muted) !important;
    border-radius: 999px;
}
.releases .vl:hover, .releases .vl a:hover { color: var(--a5d-text) !important; }

/* ======================================================================
   Header + sidebar search, targeted at the real markup:
     .th > .centernav.bound > [.shme] [header.mainheader] [.searchx] [#thememode]
     #sidebar form.wp-block-search > label + .wp-block-search__inside-wrapper
   ====================================================================== */

.th .centernav.bound {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
}

/* Hamburger belongs to the mobile layout; on desktop it just sat next to the
   logo doing nothing. */
@media (min-width: 900px) {
    .th .shme, .th .srcmob { display: none; }
}

.th .mainheader { flex: 0 0 auto; margin: 0; }
.th .logos, .th .logos a { margin: 0; display: block; line-height: 0; }
.th .logos img, .th .mobilelogo img { max-height: 36px; width: auto; }

/* The search had a fixed width with dead space beside it. Let it take the gap. */
.th .searchx {
    flex: 1 1 auto;
    max-width: 620px;
    margin: 0;
    position: relative;
}
.th .searchx form { margin: 0; display: flex; align-items: center; }

.th input.search-live,
.th #s {
    width: 100%;
    height: 40px;
    padding: 0 44px 0 16px;
    background: var(--a5d-surface-2);
    border: 1px solid var(--a5d-line);
    border-radius: 999px;
    color: var(--a5d-text);
    font-size: .95rem;
    transition: border-color .15s ease, background .15s ease;
}
.th input.search-live:focus, .th #s:focus {
    outline: none;
    background: var(--a5d-surface);
    border-color: var(--a5d-accent-dim);
}
.th #submitsearch {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    height: 32px;
    width: 32px;
    display: grid;
    place-items: center;
    background: none;
    border: 0;
    color: var(--a5d-muted);
    cursor: pointer;
}
.th #submitsearch:hover { color: var(--a5d-text); }

/* The theme's Switch Mode toggle is gone. This site is dark, the skin is written
   for dark, and a control that lets a visitor into a half-styled light mode is
   not worth carrying -- several rules in this file are scoped `.darkmode ...`
   and simply stop applying under `.lightmode`.

   Hiding it is only half the job: the theme's own inline script reads
   `localStorage.thememode` on every page load, so anyone who had already clicked
   the toggle would be stuck in light with nothing left to click. The plugin
   clears that key in wp_head, before the theme's script runs. */
.th #thememode { display: none; }

/* Mobile header: the bar was clipping its own contents.
   Measured at 464px wide, not guessed -- two earlier guesses (a too-wide logo, then
   the card slider) were both wrong, and the numbers are the only reason this one is
   right. `.th` is the purple bar: the theme fixes it at height 60px, 50px under
   800px, with overflow:hidden. Inside it .centernav.bound stood 91px tall, so
   everything past 50px -- the search icon and the lower half of the header -- was
   simply cut off.

   Two causes, both ours:

   1. BOTH logos rendered, stacked. The theme ships .logos for desktop and
      .mobilelogo for mobile and hides one of them; the desktop rule further up this
      file sets `.th .logos { display: block }`, which overrode the theme's own rule
      hiding it on mobile. .mainheader became 83px tall. Hiding .logos here took the
      overflow from 47px to 14px.
   2. .shme (the hamburger) carries its own height:50px, which alone exceeds the
      38px of usable space left inside a 50px bar with 6px padding top and bottom.

   The breakpoint is 800px to match the theme's own -- the earlier attempt used
   899px, which left 801-899px applying mobile rules to the 60px desktop bar.
   Verified after the fix: bound sits 3px INSIDE .th, nothing clipped, no horizontal
   overflow. */
@media (max-width: 800px) {
    .th .centernav.bound { gap: 10px; padding-top: 0; padding-bottom: 0; }

    .th .logos { display: none; }
    .th .mobilelogo, .th .mobilelogo a { display: block; line-height: 0; margin: 0; }
    /* line-height:0 above matters as much as the cap: an inline <img> otherwise
       carries ~6px of baseline descender space that counts toward the row height. */
    .th .mobilelogo img { max-height: 28px; width: auto; }

    .th .mainheader { flex: 0 1 auto; min-width: 0; }
    .th .shme {
        height: 38px; padding: 0; line-height: 1;
        display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    }
    .th .srcmob { flex: 0 0 auto; }
}

/* ---------- sidebar search --------------------------------------------- */

/* Scoped through #sidebar so it outranks the theme's own `#sidebar input`
   rule -- the block shipped as a white field with a grey button. */
#sidebar .wp-block-search__label { display: none; }

#sidebar .wp-block-search__inside-wrapper { gap: 8px; }

#sidebar .wp-block-search__input,
#sidebar input.wp-block-search__input {
    height: 40px;
    padding: 0 16px;
    background: var(--a5d-surface-2);
    border: 1px solid var(--a5d-line);
    border-radius: 999px;
    color: var(--a5d-text);
    font-size: .92rem;
}
#sidebar .wp-block-search__input:focus {
    outline: none;
    border-color: var(--a5d-accent-dim);
    background: var(--a5d-surface);
}
#sidebar .wp-block-search__button,
#sidebar button.wp-block-search__button {
    height: 40px;
    padding: 0 18px;
    margin: 0;
    background: var(--a5d-accent);
    border: 0;
    border-radius: 999px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s ease;
}
#sidebar .wp-block-search__button:hover { background: var(--a5d-accent-dim); }

/* ---------- card titles ------------------------------------------------- */

/* Two ragged lines that clipped mid-word. Give them a fixed two-line box so
   every card in a row ends at the same height. */
.bs .bsx .tt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
    font-size: .88rem;
}

/* ======================================================================
   Second pass, against yomi.to opened side by side.

   What it does that AnimeStream does not, and that CSS alone can reach:
   cards are a rounded poster with text under it -- no box, no border, no
   play-circle overlay; the chrome is one slim bar rather than two stacked
   coloured rows; the page is nearer black so posters carry the colour.

   What it does that CSS alone CANNOT reach, and is left undone: the hero
   carousel (the theme's .slidtop renders empty, there is nothing to style)
   and per-card rating badges (the markup carries no rating in the card).
   Both need theme or plugin work, not a stylesheet.
   ====================================================================== */

:root {
    --a5d-bg:        #08090c;
    --a5d-surface:   #101319;
    --a5d-surface-2: #171b24;
    --a5d-line:      #1f2431;
}

/* ---------- one slim bar, not two stacked ------------------------------ */

.th { padding: 6px 0; }
.th .centernav.bound { gap: 14px; }
.th input.search-live, .th #s { height: 36px; }

/* No divider between header and menu: they read as a single unit. */
.th { border-bottom: 0; }
#main-menu, nav.mm { top: 52px; }
#main-menu ul.menu > li > a { padding: 9px 14px; font-size: .9rem; }

/* ---------- cards: poster + text, no box ------------------------------- */

.bs .bsx,
.listupd .bs .bsx {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
}
.bs .bsx:hover { transform: none; box-shadow: none; border: 0; }

.bs .bsx .limit {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: var(--a5d-surface);
    transition: transform .18s ease, box-shadow .18s ease;
}
.bs .bsx:hover .limit {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgb(0 0 0 / .5);
}
.bs .bsx .limit img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform .35s ease;
}
.bs .bsx:hover .limit img { transform: scale(1.04); }

/* The episode chip goes top-left, dark and legible over any poster. */
.bs .bsx .limit .bt {
    position: absolute;
    top: 8px;
    left: 8px;
    right: auto;
    bottom: auto;
    z-index: 2;
}
.bs .bsx .limit .bt .epx,
.bs .bsx .limit .epx {
    display: inline-block;
    padding: 3px 8px;
    background: rgb(8 9 12 / .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 7px;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Type chip to the opposite corner, quiet -- it is the least useful thing
   on the card and was the loudest. */
.bs .bsx .limit .typez {
    position: absolute;
    top: 8px;
    right: 8px;
    left: auto;
    padding: 3px 8px;
    background: rgb(8 9 12 / .72);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--a5d-muted);
    border-radius: 7px;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .02em;
}

/* The permanent play-circle sat on every poster. Reveal it on hover only. */
.bs .bsx .limit .ply {
    opacity: 0;
    transition: opacity .18s ease;
}
.bs .bsx:hover .limit .ply { opacity: .92; }

/* Title under the poster, on the page -- not inside a panel. */
.bs .bsx .tt {
    padding: 9px 2px 0;
    background: none;
    color: var(--a5d-text);
    font-size: .85rem;
    font-weight: 500;
    line-height: 1.4;
    height: auto;
    min-height: 0;
    overflow: visible;
}
.bs .bsx .tt h2 {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bs .bsx:hover .tt { color: #fff; }

/* The "TV / Episode 5" strip under Latest Release cards. */
.listupd .bsx .bt, .listupd .status, .listupd .epz, .listupd .sb {
    color: var(--a5d-muted);
    font-size: .76rem;
}

/* ---------- Popular Today: kept as a grid ------------------------------ */

/* yomi runs its "New Today" strip horizontally, and this was built that way
   to match -- then reverted after looking at it. That strip works there
   because it holds dozens of items; Popular Today holds five, which already
   fit the grid, so scrolling only clipped the last card against the panel
   edge and bought nothing. Copying the reference where it does not apply is
   not the same as matching it. */

/* ---------- section spacing -------------------------------------------- */

/* Padding is NOT set here. The theme's card grid is fixed-width and does its
   own maths against the panel's inner width -- narrowing it pushed the fifth
   card out past the panel edge. Spacing between sections only. */
.bixbox { margin-bottom: 20px; }

/* The meta strip under a Latest Release card ("TV / Episode 5") was a filled
   panel competing with the poster. Muted text on the page, like yomi's. */
.listupd .bsx > :not(a),
.listupd .bsx .status,
.listupd .bsx .epz,
.listupd .bsx .sb {
    background: none;
    border: 0;
    padding: 2px 2px 0;
    color: var(--a5d-muted);
    font-size: .76rem;
    display: flex;
    justify-content: space-between;
    gap: 8px;
}
.listupd .bsx > :not(a) a { color: inherit; }

/* ======================================================================
   Poster chips: bottom, not the corners.

   The source burns its own badges into the poster JPEG -- the green
   "พากย์ไทย" flash is pixels in the image, not an element, so it cannot be
   moved or measured. Any chip placed in a top corner therefore lands on
   whatever the uploader happened to paint there, which is what made these
   collide with the "TV" chip and look a mess.

   The bottom edge is the one strip that is reliably plain artwork, and a
   scrim makes a chip legible over any of it. .epx also has to survive
   holding "Completed", not just "Ep 173", so nothing here is fixed-width.
   ====================================================================== */

/* Scrim so text at the bottom is readable on light artwork. */
.bs .bsx .limit::after {
    content: "";
    position: absolute;
    inset: auto 0 0 0;
    height: 42%;
    background: linear-gradient(to top, rgb(6 7 10 / .92), rgb(6 7 10 / .55) 42%, transparent);
    pointer-events: none;
    z-index: 1;
}

.bs .bsx .limit .bt {
    position: absolute;
    top: auto;
    bottom: 8px;
    left: 8px;
    right: 8px;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
}

.bs .bsx .limit .bt .epx,
.bs .bsx .limit .epx {
    display: inline-block;
    max-width: 100%;
    padding: 2px 8px;
    background: rgb(255 255 255 / .14);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / .16);
    border-radius: 6px;
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* "TV" joins it on the same line instead of sitting in the opposite corner
   on top of the artwork. Quieter than the episode, which is what people
   actually scan for. */
.bs .bsx .limit .typez {
    position: absolute;
    top: auto;
    bottom: 8px;
    right: 8px;
    left: auto;
    z-index: 2;
    padding: 2px 7px;
    background: rgb(0 0 0 / .5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgb(255 255 255 / .1);
    border-radius: 6px;
    color: rgb(255 255 255 / .82);
    font-size: .68rem;
    font-weight: 600;
    line-height: 1.35;
}

/* Keep the episode chip clear of the type chip on narrow cards. */
.bs .bsx .limit .bt { padding-right: 46px; }

/* The hover panel sits above both. */
.bs .bsx .limit .egghead { z-index: 3; }
.bs .bsx .limit .ply { z-index: 3; }

/* The theme colours each type separately (.typez.TV, .typez.Movie, ...), which
   outranks a single-class rule. Repeating the class matches that specificity
   and this file loads later, so it wins without !important and without having
   to list every type the theme knows about. */
.bs .bsx .limit .typez.typez {
    background: rgb(0 0 0 / .55);
    color: rgb(255 255 255 / .85);
    border: 1px solid rgb(255 255 255 / .12);
}

/* ======================================================================
   Three reported faults, all traced to specific theme rules.
   ====================================================================== */

/* 1. "View All" broke out of its pill.
   The theme fixes .releases .vl to height:18px/line-height:18px and then
   .releases.latesthome .vl overrides the line-height to 21px inside that
   same 18px box. Adding padding on top pushed the text clean out.
   .vl.vl matches the theme's own 0,3,0 specificity and this file is later,
   so no !important is needed. */
.releases .vl.vl,
.releases .vl.vl:hover {
    height: auto;
    line-height: 1;
    padding: 5px 12px;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    white-space: nowrap;
}

/* 2. Lists that scrolled inside a fixed box.
   The theme caps several of them and hands you an inner scrollbar, which
   reads as broken next to a page that already scrolls. Let them run to
   their full height -- the page scrollbar is the only one anyone wants. */
.bxcl ul,
#sidebar .section ul.season,
#sidebar .section .ongoingseries ul,
#sidebar .section .ongoingseries ul:hover,
#singlepisode .episodelist ul,
#singlepisode .episodelist ul:hover,
.quickfilter .filters .filter .scrollz {
    max-height: none;
    overflow: visible;
    overflow-y: visible;
}

/* 3. The search magnifier sat above the field.
   It was positioned against .searchx, which is taller than the input --
   it also holds the hidden mobile close button -- so 50% resolved against
   the wrong box. Anchor it to the form, which is exactly the input's
   height. */
.th .searchx { position: static; }
.th .searchx form {
    position: relative;
    display: flex;
    align-items: center;
}
.th #submitsearch {
    position: absolute;
    right: 4px;
    top: 0;
    bottom: 0;
    transform: none;
    height: auto;
    width: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

/* ======================================================================
   Fourth pass, against sksman.com -- our own manga site, same publisher
   (Themesia), already skinned. Matching it is worth more than matching a
   stranger's site: the two are meant to look like one operation.

   The third pass had taken the card box away because yomi.to has none.
   sksman keeps it, and the box is what makes a grid of mixed-aspect
   artwork read as a grid: every card ends on the same line whatever the
   poster does. So the box comes back, and the title moves inside it.
   ====================================================================== */

/* ---------- the card is one panel ------------------------------------- */

.bs .bsx,
.listupd .bs .bsx {
    background: var(--a5d-surface);
    border: 1px solid var(--a5d-line);
    border-radius: 12px;
    overflow: hidden;
    box-sizing: border-box;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.bs .bsx:hover {
    transform: translateY(-3px);
    border-color: rgb(124 92 255 / .55);
    box-shadow: 0 14px 30px rgb(0 0 0 / .5);
}

/* The poster is the panel's top edge now, so the corners belong to the
   panel and the lift moves the whole card, not the image inside it. */
.bs .bsx .limit { border-radius: 0; overflow: hidden; }
.bs .bsx:hover .limit { transform: none; box-shadow: none; }

/* Sections stop being raised panels: with boxed cards, a panel behind them
   is a second box around the first. sksman puts the cards on the page. */
.postbody .bixbox { background: transparent; border: 0; box-shadow: none; }

/* ---------- two-line titles, clipped on the line ----------------------- */

/* -webkit-line-clamp is dead here: Chrome 150 computes `display:-webkit-box`
   to flow-root, so the clamp never engages (confirmed in the browser, both
   from a stylesheet and from an inline style). What still works is an exact
   box: height = 2 x line-height, and NO bottom padding -- overflow:hidden
   clips at the padding edge, so bottom padding is a window that shows the
   top of the third line. That was the half-cut line this replaced. The
   spacing padding-bottom used to give is now a margin, outside the clip. */
.bs .bsx .tt {
    padding: 10px 11px 0;
    margin: 0 0 12px;
    height: calc(2.8em + 10px);
    line-height: 1.4;
    font-size: .82rem;
    font-weight: 600;
    overflow: hidden;
    box-sizing: border-box;
}
/* The visible title is .tt's own text node; the <h2> beside it repeats the
   post title and the theme leaves both in the flow. */
.bs .bsx .tt h2 { display: none; }

/* ---------- Latest Release: the overlay becomes the panel body --------- */

/* These cards (.styleegg) carry their title and meta in .egghead, absolutely
   positioned over the foot of the poster. It cannot be moved below the image
   with CSS -- it sits before the <img> in the DOM -- but made opaque and
   given the panel's own border and padding it reads as the card body, which
   is what sksman draws there.

   Specificity is the theme's, not ours: it styles these through
   `.bs.styleegg .bsx .egghead .eggtitle` (0,5,0) and repaints the background
   again under `.darkmode`. A three-class selector loses to both. */
.bs.styleegg .bsx .egghead,
.darkmode .bs.styleegg .bsx .egghead {
    height: auto;
    background: var(--a5d-surface);
    border-top: 1px solid var(--a5d-line);
    padding: 10px 11px 11px;
}
.bs.styleegg .bsx .egghead .eggtitle {
    margin: 0;
    height: 2.8em;
    line-height: 1.4;
    font-size: .82rem;
    font-weight: 600;
    color: var(--a5d-text);
    /* the theme keeps these on one nowrap line, which cut Thai titles at
       about four words */
    white-space: normal;
    text-overflow: clip;
    overflow: hidden;
}
.bs.styleegg .bsx .egghead .eggmeta {
    margin: 8px 0 0;
    font-size: .72rem;
    line-height: 1.3;
}

/* ---------- section heading ------------------------------------------- */

.releases h1::before, .releases h2::before, .releases h3::before {
    width: 4px;
    border-radius: 3px;
    background: linear-gradient(var(--a5d-accent), #22d3ee);
}

/* "View All" goes back to a filled accent pill -- the third pass had muted
   it to sit quietly beside the heading, but on sksman it is the one piece of
   colour in the section bar and it is what makes the two sites match. */
.releases .vl.vl,
.releases .vl.vl a {
    background: var(--a5d-accent) !important;
    color: #fff !important;
    border: 0;
}
.releases .vl.vl:hover { filter: brightness(1.15); }