/*
 * Typography and legacy-class shims for the /show archive (onlineigry only).
 *
 * The /show pages are 2018-era articles moved over from the old onlineigry.com
 * code base. Their markup still uses that site's class names (block-slider,
 * demo-slide, button s3d, content, title, hint …) and bare tags (h2, p, ul,
 * table) that the v4 Tailwind preflight strips of every default style. This
 * file re-dresses that old markup inside .yc-show-article so the archive reads
 * like the rest of the v4 site, without touching the article HTML itself.
 */

.yc-show-article {
    max-width: 100%;
    color: var(--color-text-base);
    font-size: 16px;
    line-height: 1.65;
}

.yc-show-article h1,
.yc-show-article h2,
.yc-show-article h3,
.yc-show-article h4,
.yc-show-article h5 {
    margin: 1.6em 0 .6em;
    color: var(--color-text-base);
    font-weight: 700;
    line-height: 1.2;
    text-wrap: balance;
}

.yc-show-article h1 { margin-top: 0; font-size: clamp(26px, 3.2vw, 36px); }
.yc-show-article h2 { font-size: clamp(22px, 2.6vw, 28px); }
.yc-show-article h3 { font-size: clamp(19px, 2.2vw, 23px); }
.yc-show-article h4 { font-size: 17px; }
.yc-show-article h5 { font-size: 16px; }

.yc-show-article p { margin: 0 0 1em; }

/*
 * Links: plain --color-info is too dim on the onlineigry dark skin (#31598f on
 * near-black), so it is mixed toward the body text colour and always underlined.
 * The mix keeps the light skin readable too — there it darkens instead.
 */
.yc-show-article a {
    color: color-mix(in srgb, var(--color-info) 60%, var(--color-text-base));
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.yc-show-article a:hover { opacity: .8; }

.yc-show-article ul,
.yc-show-article ol {
    margin: 0 0 1em;
    padding-left: 1.4em;
}

.yc-show-article ul { list-style: disc; }
.yc-show-article ol { list-style: decimal; }
.yc-show-article li { margin: .25em 0; }

.yc-show-article img {
    display: inline-block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm, 6px);
}

.yc-show-article b,
.yc-show-article strong { font-weight: 700; }

.yc-show-article hr {
    margin: 1.5em 0;
    border: 0;
    border-top: 1px solid var(--color-border);
}

/*
 * Legacy articles lay text out with tables (two-column link lists and rules
 * grids). They must stay real tables — display:block collapses the columns and
 * clips the labels — so the whole article scrolls horizontally instead when a
 * table does not fit.
 */
.yc-show-article { overflow-x: auto; }

.yc-show-article table {
    max-width: 100%;
    margin: 0 0 1em;
    border-collapse: collapse;
}

.yc-show-article table td { padding-right: 18px; }

.yc-show-article table.table th,
.yc-show-article table.table td {
    padding: 8px 12px;
    border: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.yc-show-article table.table th {
    background: var(--color-surface-elevated);
    font-weight: 700;
}

.yc-show-article td { vertical-align: top; }

/* .content wrapped the article body on the old site; it carried no own styling. */
.yc-show-article .content { min-width: 0; }

.yc-show-article .title { margin-top: 0; }

.yc-show-article .hint,
.yc-show-article .st {
    color: var(--color-text-muted);
    font-size: 14px;
}

.yc-show-article .important,
.yc-show-article .warning,
.yc-show-article .alert {
    display: block;
    margin: 0 0 1em;
    padding: 12px 16px;
    border-left: 4px solid var(--color-warning, #f2b705);
    border-radius: var(--radius-sm, 6px);
    background: color-mix(in srgb, var(--color-warning, #f2b705) 10%, var(--color-surface));
}

/*
 * .head_game — intro card of a rules article: a game screenshot as background with
 * the table of contents on top. Without styling the background image showed through
 * the whole article and the links became unreadable (v4 preflight drops the old rules).
 */
.yc-show-article .head_game {
    position: relative;
    margin: 0 0 1.75em;
    padding: 22px;
    overflow: hidden;
    border-radius: var(--radius-lg, 18px);
    background-position: center;
    background-size: cover;
    color: #fff;
    isolation: isolate;
}

.yc-show-article .head_game::before {
    position: absolute;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .62));
    content: "";
    inset: 0;
}

.yc-show-article .head_game .sh { display: none; }
.yc-show-article .head_game p { color: #fff; }

.yc-show-article .head_game ul {
    display: grid;
    gap: .15em 24px;
    margin: 0;
}

.yc-show-article .head_game a { color: #ffe58a; }

@media (min-width: 700px) {
    .yc-show-article .head_game { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
    .yc-show-article .head_game p { grid-column: 1 / -1; }
}

.yc-show-article .clear { clear: both; }
.yc-show-article .f_left { float: left; margin: 0 16px 8px 0; }
.yc-show-article .f_right { float: right; margin: 0 0 8px 16px; }

/* Buttons: the old .button family, redrawn with v4 tokens. */
.yc-show-article .button {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md, 10px);
    background: var(--color-surface-elevated);
    color: var(--color-text-base);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: filter .15s ease;
}

.yc-show-article .button:hover { filter: brightness(1.08); text-decoration: none; }

.yc-show-article .button.success {
    border-color: transparent;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    color: #fff;
}

.yc-show-article .button.secondary {
    background: var(--color-surface);
}

.yc-show-article .button.large { padding: 14px 28px; font-size: 18px; }
.yc-show-article .button.mini,
.yc-show-article .button_small { padding: 6px 12px; font-size: 14px; }
.yc-show-article .button .hint { display: block; color: rgba(255, 255, 255, .85); }

/*
 * Promo block. On the old site this was an owl-carousel with a single slide;
 * there is no carousel JS in v4, so the markup is rendered as one static
 * hero card — image on top, title and CTA over it.
 */
.yc-show-article .block-slider { margin: 0 0 1.75em; }
.yc-show-article .owl-carousel,
.yc-show-article .owl-carousel .item { display: block; }

.yc-show-article .demo-one-bg {
    position: relative;
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-lg, 18px);
    background: var(--color-surface-elevated);
}

.yc-show-article .demo-one-bg > img {
    grid-area: 1 / 1;
    width: 100%;
    max-height: 320px;
    border-radius: 0;
    object-fit: cover;
}

.yc-show-article .demo-slide {
    display: grid;
    grid-area: 1 / 1;
    align-content: center;
    justify-items: center;
    gap: 16px;
    padding: 24px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .72), rgba(0, 0, 0, .35));
    text-align: center;
}

.yc-show-article .demo-slide--title {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    color: #fff;
    font-size: clamp(24px, 4vw, 40px);
    font-weight: 800;
    line-height: 1.1;
}

.yc-show-article .demo-slide--title-second { color: var(--color-primary, #ffd84a); }

.yc-show-article .text-center { text-align: center; }

@media (max-width: 640px) {
    .yc-show-article .demo-one-bg > img { max-height: 200px; }
    .yc-show-article .f_left,
    .yc-show-article .f_right { float: none; margin: 0 0 12px; }
}