/* ==========================================================================
   FRESH SKIN
   Cream ground, teal bar, yellow accents, soft cards.

   Every rule is scoped under body.tqs-skin and the file is only enqueued when
   the skin is on, so with TQS_SKIN_ENABLED false the site is unchanged.
   See inc/fresh-skin.php.
   ========================================================================== */

body.tqs-skin {
    --sk-ground:  #E1F3F8;   /* page */
    --sk-paper:   #FFFFFF;
    --sk-ink:     #0C0C0C;
    --sk-ink-2:   #3C4448;
    --sk-muted:   #6A7478;

    --sk-teal:    #0F9B8E;   /* links and CTAs */
    --sk-teal-dk: #0A7E73;
    --sk-yellow:  #FFD93D;
    --sk-coral:   #FF6F5E;
    --sk-red:     #E02020;
    --sk-blue:    #1E5FE0;
    --sk-blue-lt: #9DB6F2;
    --sk-green:   #76D81C;   /* Pick One Kick One, from its artwork */
    --sk-plum:    #E112CA;
    --sk-plum-lt: #F098E6;
    --sk-green-lt: #C2E99A;

    --sk-line:    2px;
    --sk-edge:    #D9D0B2;   /* the soft sand edge a card rests behind */
    --sk-r:       12px;
    --sk-shadow:  3px 3px 0 var(--sk-ink);
    --sk-shadow-h:5px 5px 0 var(--sk-ink);

    --sk-display: var(--font-display);
    --sk-body:    var(--font-display);
}

/* ─── Base ────────────────────────────────────── */
body.tqs-skin {
    background: var(--sk-ground);
    font-family: var(--sk-body);
    color: var(--sk-ink);
}
body.tqs-skin .site-wrapper,
body.tqs-skin .site-main { background: transparent; }
body.tqs-skin h1, body.tqs-skin h2, body.tqs-skin h3, body.tqs-skin h4 {
    font-family: var(--sk-display);
    color: var(--sk-ink);
}

/* ─── Admin preview bar ───────────────────────── */
body.tqs-skin .skin-preview-bar {
    background: var(--sk-coral);
    color: #2A1512;
    padding: 0.5rem 1rem;
    text-align: center;
    font-size: 0.84rem;
    font-weight: 700;
}
body.tqs-skin .skin-preview-bar a { color: #2A1512; text-decoration: underline; margin-left: 0.4rem; }

/* ─── Header ──────────────────────────────────── */
body.tqs-skin .site-header {
    background: var(--sk-paper);
    border-bottom: var(--sk-line) solid var(--sk-ink);
    box-shadow: none;
    /* A shallow bar, with the logo at full size hanging below it the way it
       always has. */
    height: 56px;
}
/* Logo keeps the theme's own size and shape, and its full strength on hover —
   fading it read as the page having gone inactive. */
body.tqs-skin .nav-logo:hover { opacity: 1; }

body.tqs-skin .nav-links-desktop > a,
body.tqs-skin .nav-item > a {
    color: var(--sk-ink);
    font-family: var(--sk-display);
    font-weight: 700;
    border-radius: 8px;
    padding: 0.35rem 0.7rem;
    transition: background 0.15s, color 0.15s;
}
/* A quiet underline reads better here than a filled block. */
body.tqs-skin .nav-links-desktop > a,
body.tqs-skin .nav-item > a {
    box-shadow: inset 0 -2px 0 transparent;
    border-radius: 0;
    transition: box-shadow 0.15s, color 0.15s;
}
body.tqs-skin .nav-links-desktop > a:hover,
body.tqs-skin .nav-item > a:hover,
body.tqs-skin .nav-item.active > a {
    background: transparent;
    color: var(--sk-ink);
    box-shadow: inset 0 -2px 0 var(--sk-coral);
}
body.tqs-skin .nav-yt { color: var(--sk-coral); }
body.tqs-skin .nav-yt:hover { color: #E8452F; }
body.tqs-skin .menu-toggle-bar { background: var(--sk-ink); }

body.tqs-skin .nav-dropdown-inner {
    background: var(--sk-paper);
    border: 1px solid var(--sk-edge);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(12,12,12,0.06), 0 12px 32px -8px rgba(12,12,12,0.22);
}
body.tqs-skin .nav-dropdown a { font-family: var(--sk-display); color: var(--sk-ink); }
/* The row's own colour does the lighting up, so the skin's flat ground is not
   laid over the top of it. */
body.tqs-skin .nav-dd-all { border-bottom-color: var(--sk-edge); }

body.tqs-skin .mobile-nav-panel { background: var(--sk-ground); }
body.tqs-skin .mobile-nav-link,
body.tqs-skin .mobile-nav-sub { font-family: var(--sk-display); color: var(--sk-ink); }

/* ─── Headings & copy ─────────────────────────── */
body.tqs-skin .home-sec-title,
body.tqs-skin .home-header-text,
body.tqs-skin .archive-title,
body.tqs-skin .video-strip-title,
body.tqs-skin .game-title { font-family: var(--sk-display); font-weight: 800; }
body.tqs-skin .home-sec-sub,
body.tqs-skin .home-header-sub,
body.tqs-skin .archive-intro,
body.tqs-skin .game-blurb,
body.tqs-skin .home-game-desc,
body.tqs-skin .home-quiz-excerpt,
body.tqs-skin .home-article-excerpt,
body.tqs-skin .qcard-excerpt,
body.tqs-skin .game-index-blurb,
body.tqs-skin .game-section-intro,
body.tqs-skin .game-steps li,
body.tqs-skin .game-tips li,
body.tqs-skin .game-faq-item p,
body.tqs-skin .scramble-pack-blurb,
body.tqs-skin .vcard-meta,
body.tqs-skin .quiz-breadcrumb,
body.tqs-skin .quiz-breadcrumb a { color: var(--sk-ink-2); }
body.tqs-skin .home-quiz-plays,
body.tqs-skin .qcard-plays,
body.tqs-skin .game-plays { color: var(--sk-muted); }

body.tqs-skin .sidebar-title,
body.tqs-skin .game-section-title {
    font-family: var(--sk-display);
    font-weight: 800;
    color: var(--sk-ink);
    text-transform: none;
    letter-spacing: 0;
    border-bottom: 1px solid var(--sk-edge);
}
body.tqs-skin .home-sec-link { font-family: var(--sk-display); font-weight: 700; }
body.tqs-skin .home-sec-link:hover { color: var(--sk-teal-dk); }

/* ─── Cards ───────────────────────────────────── */
/* This list had no block of its own: it ran straight into the :hover list
   below, so every card on the site sat permanently lifted, wearing the hover
   shadow. A card at rest is flat, and only lifts under the pointer. */
body.tqs-skin .qcard,
body.tqs-skin .home-game,
body.tqs-skin .home-quiz,
body.tqs-skin .home-article,
body.tqs-skin .sidebar-widget,
body.tqs-skin .game-index-card,
body.tqs-skin .game-more-card,
body.tqs-skin .game-faq-item,
body.tqs-skin .scramble-pack-card,
body.tqs-skin .flag-ref-item,
body.tqs-skin .wyrg-list-item,
body.tqs-skin .gp-card,
body.tqs-skin .gp-rail > *,
body.tqs-skin .home-host {
    border-color: var(--sk-edge);
    box-shadow: none;
    transform: none;
}
body.tqs-skin .qcard:hover,
body.tqs-skin .home-game:hover,
body.tqs-skin .home-quiz:hover,
body.tqs-skin .home-article:hover,
body.tqs-skin .game-index-card:hover,
body.tqs-skin .game-more-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sk-shadow-h);
    border-color: var(--sk-edge);
}
body.tqs-skin .qcard-title,
body.tqs-skin .home-game-title,
body.tqs-skin .home-quiz-title,
body.tqs-skin .home-article-title,
body.tqs-skin .vcard-title { font-family: var(--sk-display); font-weight: 800; color: var(--sk-ink); }

/* Game marks keep their own colour — they draw in currentColor. */
body.tqs-skin .game-icon-wyr .game-mark      { color: #FFFFFF; }
body.tqs-skin .game-icon-scramble .game-mark { color: #FFD600; }
body.tqs-skin .game-icon-flag .game-mark     { color: #3DBFBF; }

/* ─── Buttons & CTAs ──────────────────────────── */
body.tqs-skin .home-play {
    background: var(--sk-yellow);
    color: var(--sk-ink);
    font-family: var(--sk-display);
    font-weight: 700;
    border-radius: 8px;
}
body.tqs-skin .home-game:hover .home-play,
body.tqs-skin .home-quiz:hover .home-play { background: var(--sk-coral); color: #2A1512; }
body.tqs-skin .home-read { color: var(--sk-teal-dk); font-family: var(--sk-display); font-weight: 700; }

body.tqs-skin .sidebar-spin-btn,
body.tqs-skin .all-quizzes-cta,
body.tqs-skin .scr-btn-primary,
body.tqs-skin .flg-btn-primary,
body.tqs-skin .tqs-cookie-accept {
    background: var(--sk-coral);
    color: #2A1512;
    font-family: var(--sk-display);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    border-radius: 8px;
    box-shadow: var(--sk-shadow);
}
body.tqs-skin .sidebar-spin-btn:hover,
body.tqs-skin .scr-btn-primary:hover,
body.tqs-skin .flg-btn-primary:hover,
body.tqs-skin .tqs-cookie-accept:hover {
    background: #F2543F; color: #2A1512;
    transform: translateY(-2px);
    box-shadow: var(--sk-shadow-h);
}
body.tqs-skin .home-quiz-badge {
    background: var(--sk-yellow);
    color: var(--sk-ink);
    font-family: var(--sk-display);
    font-weight: 700;
    border-radius: 6px;
}

/* ─── Sidebar ─────────────────────────────────── */
body.tqs-skin .sidebar-quiz-thumb { border: 1px solid var(--sk-edge); }
body.tqs-skin .sidebar-quiz-item span { font-family: var(--sk-display); font-weight: 700; color: var(--sk-ink); }
body.tqs-skin .sidebar-spin { background: var(--sk-teal); border: 1px solid var(--sk-teal-dk); }
body.tqs-skin .sidebar-spin::before { display: none; }
body.tqs-skin .sidebar-spin-heading { color: #10302F; font-family: var(--sk-display); }
body.tqs-skin .sidebar-spin-text { color: #10302F; }

/* ─── Video carousel ──────────────────────────── */
body.tqs-skin .carousel-btn {
    background: var(--sk-paper);
    border: 1px solid var(--sk-edge);
    color: var(--sk-ink);
}
body.tqs-skin .carousel-btn:hover:not(:disabled) { background: var(--sk-yellow); }

/* ─── Games pages ─────────────────────────────── */
body.tqs-skin .game-mode-btn {
    border: 1px solid rgba(255,255,255,0.22);
    font-family: var(--sk-display);
    font-weight: 700;
}
body.tqs-skin .game-mode-btn.is-active { background: var(--sk-yellow); color: var(--sk-ink); border-color: var(--sk-yellow); }
body.tqs-skin .game-preview-bar { border-radius: var(--sk-r); }

/* ─── Footer ──────────────────────────────────── */
body.tqs-skin .site-footer { background: var(--sk-ink); }
body.tqs-skin .footer-brand-desc,
body.tqs-skin .footer-col ul a,
body.tqs-skin .footer-bottom p { color: #DCD6C4; }
body.tqs-skin .footer-col h4 { color: var(--sk-yellow); font-family: var(--sk-display); font-weight: 800; }
body.tqs-skin .footer-col ul a:hover { color: var(--sk-yellow); }
body.tqs-skin .footer-social-btn { border: 1px solid var(--sk-yellow); color: var(--sk-yellow); }

/* ─── Cookie bar ──────────────────────────────── */
body.tqs-skin .tqs-cookie-bar { background: var(--sk-paper); color: var(--sk-ink); border-top: 1px solid var(--sk-edge); }
body.tqs-skin .tqs-cookie-text,
body.tqs-skin .tqs-cookie-text strong,
body.tqs-skin .tqs-cookie-text a { color: var(--sk-ink); }
body.tqs-skin .tqs-cookie-necessary { background: var(--sk-ground); color: var(--sk-ink); border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
    body.tqs-skin .qcard, body.tqs-skin .home-game, body.tqs-skin .home-quiz,
    body.tqs-skin .home-article, body.tqs-skin .vcard { transition: none; }
    body.tqs-skin .qcard:hover, body.tqs-skin .home-game:hover, body.tqs-skin .home-quiz:hover,
    body.tqs-skin .home-article:hover, body.tqs-skin .vcard:hover { transform: none; }
}

/* ─── Game pages ──────────────────────────────── */
body.tqs-skin .gp-card,
body.tqs-skin .gp-board,
body.tqs-skin .gp-head,
body.tqs-skin .gp-foot,
body.tqs-skin .gp-board-head { border-color: var(--sk-ink); }
body.tqs-skin .gp-head-title,
body.tqs-skin .gp-board-head h2,
body.tqs-skin .gp-prose-col h2,
body.tqs-skin .gp-head-stats { color: var(--sk-ink); }
/* These two were left dangling on the front of the .gp-btn rule, so the
   action-strip message and every prose paragraph were being drawn with a
   button's border and offset shadow. They want body colour, nothing else. */
body.tqs-skin .gp-foot-msg,
body.tqs-skin .gp-prose-col p { color: var(--sk-ink-2); }

body.tqs-skin .gp-btn {
    border: var(--sk-line) solid var(--sk-ink);
    border-radius: 8px;
    font-family: var(--sk-display); font-weight: 800;
    box-shadow: 2px 2px 0 var(--sk-ink);
}
body.tqs-skin .gp-btn:hover:not(:disabled) { transform: translate(-1px,-1px); box-shadow: 3px 3px 0 var(--sk-ink); }
body.tqs-skin .gp-btn-dark { background: var(--sk-ink); color: #fff; }

body.tqs-skin .duo-a  { background: var(--sk-red); }
body.tqs-skin .duo-b { background: var(--sk-blue); }
body.tqs-skin .duo-split[data-state="done"] .duo-b.is-other { background: var(--sk-blue-lt); }
body.tqs-skin .duo-pick .duo-a { background: var(--sk-green); color: var(--sk-ink); }
body.tqs-skin .duo-pick .duo-b { background: var(--sk-plum); }
body.tqs-skin .duo-pick[data-state="done"] .duo-a.is-other { background: var(--sk-green-lt); }
body.tqs-skin .duo-pick[data-state="done"] .duo-b.is-other { background: var(--sk-plum-lt); }
body.tqs-skin .duo-pick ~ .duo-result .duo-bar-a { background: var(--sk-green); }
body.tqs-skin .duo-pick ~ .duo-result .duo-bar-b { background: var(--sk-plum); }
body.tqs-skin .duo-or { border: var(--sk-line) solid var(--sk-paper); }
body.tqs-skin .duo-bar-a { background: var(--sk-red); }
body.tqs-skin .duo-bar-b { background: var(--sk-blue); }

body.tqs-skin .scr-stage { background: var(--sk-yellow); }
body.tqs-skin .scr-slot, body.tqs-skin .scr-tile { border: var(--sk-line) solid var(--sk-ink); }
body.tqs-skin .scr-tile { box-shadow: 0 3px 0 var(--sk-ink); }
body.tqs-skin .scr-pack { border: var(--sk-line) solid var(--sk-ink); border-radius: 10px; }

body.tqs-skin .flg-img { border: var(--sk-line) solid var(--sk-ink); box-shadow: var(--sk-shadow); }
body.tqs-skin .flg-opt {
    border: var(--sk-line) solid var(--sk-ink);
    border-radius: 8px;
    font-family: var(--sk-display); font-weight: 800;
}

/* The HUD and the result screen were written for the dark game pages.
   On the skin they sit on white paper, so the text has to be ink. */
body.tqs-skin .flg-hud-round,
body.tqs-skin .scr-hud-round { color: rgba(12,12,12,0.55); }
body.tqs-skin .flg-hud-score,
body.tqs-skin .scr-hud-score { color: var(--sk-ink); }
body.tqs-skin .flg-results-label { color: rgba(12,12,12,0.55); }
body.tqs-skin .flg-results-score {
    background: none; -webkit-text-fill-color: var(--sk-teal); color: var(--sk-teal);
}
body.tqs-skin .flg-results-sub { color: rgba(12,12,12,0.6); }


body.tqs-skin .flg-hero { border-bottom: var(--sk-line) solid var(--sk-ink); }
body.tqs-skin .flg-intro p { color: var(--sk-ink-2); }

body.tqs-skin .gp-tally { border: 1px solid var(--sk-edge); }
body.tqs-skin .gp-tally-digit { font-family: var(--sk-display); }
body.tqs-skin .gp-intro-title { font-family: var(--sk-display); }
body.tqs-skin .gp-intro-art { border: 1px solid var(--sk-edge); border-radius: var(--sk-r); }
body.tqs-skin .gp-intro-blurb, body.tqs-skin .gp-intro-written { color: var(--sk-ink-2); }
body.tqs-skin .gp-tally-label { font-family: var(--sk-display); }

body.tqs-skin .gp-side-card {
    background: var(--sk-paper);
    border: var(--sk-line) solid var(--sk-ink);
    border-radius: 12px;
    box-shadow: var(--sk-shadow);
}
body.tqs-skin .gp-side-title { font-family: var(--sk-display); }
body.tqs-skin .gp-side-mark {
    border: var(--sk-line) solid var(--sk-ink);
}

body.tqs-skin .gp-board-rank { border: 1.5px solid var(--sk-ink); }
body.tqs-skin .gp-board-cta { color: var(--sk-teal); font-family: var(--sk-display); font-weight: 800; }

/* ─── Front page rail ─────────────────────────── */
body.tqs-skin .home-host,
body.tqs-skin .home-plays {
    background: var(--sk-paper);
    border: 1px solid var(--sk-edge);
    border-radius: var(--sk-r);
    box-shadow: none;
}
/* The counter keeps its teal, and the skin gives it the same outline and
   shadow every other card in the rail has. */
body.tqs-skin .home-plays { background: var(--sk-teal); }
body.tqs-skin .home-plays-digit {
    font-family: var(--sk-display);
    color: var(--sk-teal-dk); background: var(--sk-paper);
}
body.tqs-skin .home-plays-label { font-family: var(--sk-display); color: var(--sk-ink); }
body.tqs-skin .home-host-photo { background: var(--sk-teal); border-bottom: 1px solid var(--sk-edge); }
body.tqs-skin .home-host-body h3 { font-family: var(--sk-display); font-weight: 800; }
body.tqs-skin .home-host-body p { color: var(--sk-ink-2); }
body.tqs-skin .home-host-link,
body.tqs-skin .home-play,
body.tqs-skin .home-read { color: var(--sk-teal); }
body.tqs-skin .home-quiz-when { color: var(--sk-muted); }

/* The card CTA is a teal link in the designs, not a yellow pill. */
body.tqs-skin .home-play {
    background: transparent; border: none; box-shadow: none;
    padding: 0; font-family: var(--sk-display); font-weight: 800;
}
body.tqs-skin .home-game:hover .home-play,
body.tqs-skin .home-quiz:hover .home-play { background: transparent; color: var(--sk-teal-dk); }
body.tqs-skin .home-quiz-foot::after { content: none; }


/* ─── Scrambled Letters opening screen ─────────── */
body.tqs-skin .scr-choose-title { font-family: var(--sk-display); font-weight: 800; }
body.tqs-skin .scr-choose-or span { background: var(--sk-paper); color: var(--sk-muted); }
body.tqs-skin .scr-choose-or::before { border-top-color: rgba(12,12,12,0.15); }
body.tqs-skin .scr-random {
    background: none; border: none; box-shadow: none; padding: 0 0 2px;
    color: var(--sk-teal); border-bottom: 2px solid currentColor;
    font-family: var(--sk-display); font-weight: 600;
}
body.tqs-skin .scr-random:hover { color: var(--sk-teal-dk); box-shadow: none; }
body.tqs-skin .scr-pack strong { font-family: var(--sk-display); color: var(--sk-ink); }
/* The card is coloured, so the count keeps the ink rather than the grey it
   uses on white. */
body.tqs-skin .scr-pack-body span { color: rgba(12,12,12,0.6); }
/* The card's own colour, with the skin's heavy border around it. Hover lifts
   it rather than washing it out, since the colour is the point. */
body.tqs-skin .scr-pack {
    border: var(--sk-line) solid var(--sk-ink);
    border-radius: 10px;
    background: var(--scr-tint, var(--sk-paper));
}
body.tqs-skin .scr-pack:hover strong { color: var(--sk-ink); }

/* Less buttony: the hard offset shadow comes off the in-game controls and
   cards, leaving the outline to do the work. */
body.tqs-skin .flg-btn-primary,
body.tqs-skin .scr-random,
body.tqs-skin .gp-btn,
body.tqs-skin .gp-btn-dark { box-shadow: none; }
body.tqs-skin .flg-btn-primary:hover,
body.tqs-skin .scr-random:hover,
body.tqs-skin .gp-btn:hover,
body.tqs-skin .gp-btn-dark:hover { box-shadow: none; transform: translateY(-1px); }
body.tqs-skin .home-game,
body.tqs-skin .home-quiz,
body.tqs-skin .gp-side-card { box-shadow: none; }
body.tqs-skin .home-game:hover,
body.tqs-skin .home-quiz:hover { box-shadow: none; transform: translateY(-2px); }
body.tqs-skin .scr-pack { box-shadow: none; }

/* ─── Homepage reading feed ────────────────────── */
body.tqs-skin .home-feed-item {
    background: var(--sk-paper);
    border: var(--sk-line) solid var(--sk-ink);
    border-radius: var(--sk-r);
    box-shadow: none;
}
body.tqs-skin .home-feed-item:hover { border-color: var(--sk-ink); transform: translateY(-2px); }
body.tqs-skin .home-feed-thumb { border: var(--sk-line) solid var(--sk-ink); }
body.tqs-skin .home-feed-title { font-family: var(--sk-display); font-weight: 700; }
body.tqs-skin .home-feed-excerpt { color: var(--sk-ink-2); }

/* ─── Latest videos: a feed, not buttons ───────── */
/* The cards carried the outline, the hard shadow and a filled background.
   Only the thumbnail is framed now; the rest is a plain link. */
body.tqs-skin .vcard {
    background: none; border: none; box-shadow: none; border-radius: 0;
}
body.tqs-skin .vcard:hover { background: none; box-shadow: none; transform: none; }
body.tqs-skin .vcard:hover .vcard-title { color: var(--sk-teal); }
body.tqs-skin .vcard-thumb {
    border: var(--sk-line) solid var(--sk-ink);
    border-radius: 10px; overflow: hidden;
}
body.tqs-skin .vcard-body { padding: 0.55rem 0 0; }
body.tqs-skin .vcard-title { font-weight: 700; }
body.tqs-skin .video-strip-section .carousel-btn {
    background: none; border: none; box-shadow: none;
    color: var(--sk-ink);
}
body.tqs-skin .video-strip-section .carousel-btn:hover:not(:disabled) { background: none; color: var(--sk-teal); }

/* ─── Blog post ────────────────────────────────── */
/* The article on a sheet of paper, rather than straight onto the page. The
   measure grows by the padding so the line length stays where it was. */
body.tqs-skin .post {
    background: var(--sk-paper);
    border: 1px solid var(--sk-edge);
    border-radius: var(--sk-r);
    box-shadow: none;
    padding: 2.2rem 2.4rem 2.8rem;
    max-width: calc(72ch + 4.8rem);
}
@media (max-width: 600px) {
    body.tqs-skin .post { padding: 1.4rem 1.2rem 1.8rem; }
}
body.tqs-skin .post-title { font-family: var(--sk-display); font-weight: 800; color: var(--sk-ink); }
body.tqs-skin .post-standfirst { color: var(--sk-ink-2); }
body.tqs-skin .post-byline { font-family: var(--sk-display); color: var(--sk-teal-dk); }
body.tqs-skin .post-body { color: var(--sk-ink); }
body.tqs-skin .post-body h2, body.tqs-skin .post-body h3 { font-family: var(--sk-display); }
body.tqs-skin .post-body a { color: var(--sk-teal-dk); }
body.tqs-skin .post-body ol > li::before {
    background: var(--sk-paper);
    border: 1.5px solid var(--sk-ink);
    color: var(--sk-ink);
}
body.tqs-skin .post-body blockquote { border-left-color: var(--sk-teal); }

/* ─── Promoted game card ───────────────────────── */
body.tqs-skin .home-game-badge {
    background: var(--sk-yellow); color: var(--sk-ink);
    border: 1.5px solid var(--sk-ink);
    font-family: var(--sk-display);
}
body.tqs-skin .game-index-badge {
    background: var(--sk-yellow); color: var(--sk-ink);
    border: 1.5px solid var(--sk-ink);
    font-family: var(--sk-display);
}
body.tqs-skin .gp-embed { background: var(--sk-ground); }

/* ─── Homepage lead ────────────────────────────── */
/* The band takes the skin's paper and its heavier rule. */
/* The skin keeps the dark band; only the borders round the artwork change,
   since black on dark blue disappears. */
body.tqs-skin .home-lead { border-bottom: var(--sk-line) solid #081B30; }
body.tqs-skin .home-lead .lead-main-art,
body.tqs-skin .home-lead .lead-item-art { border-color: rgba(255,255,255,0.35); }
body.tqs-skin .home-lead .lead-main-title,
body.tqs-skin .home-lead .lead-item-title { color: #FFFFFF; }
body.tqs-skin .home-lead .lead-main-title a,
body.tqs-skin .home-lead .lead-item-title a { color: #FFFFFF; }
body.tqs-skin .home-lead .lead-main-title a:hover,
body.tqs-skin .home-lead .lead-item-title a:hover { color: var(--sk-teal); }
body.tqs-skin .home-lead .lead-main-sub { color: rgba(242,246,251,0.78); }
body.tqs-skin .home-lead .lead-kicker { color: #7FD6D2; }
body.tqs-skin .home-lead .lead-item + .lead-item { border-top-color: rgba(255,255,255,0.16); }
body.tqs-skin .lead-main-art,
body.tqs-skin .lead-item-art {
    border: var(--sk-line) solid var(--sk-ink);
    border-radius: 12px;
}
body.tqs-skin .lead-main-title,
body.tqs-skin .lead-item-title { font-family: var(--sk-display); font-weight: 800; color: var(--sk-ink); }
body.tqs-skin .lead-main-title a:hover,
body.tqs-skin .lead-item-title a:hover { color: var(--sk-teal); }
body.tqs-skin .lead-main-sub { color: var(--sk-ink-2); }
body.tqs-skin .lead-kicker { color: var(--sk-teal); font-family: var(--sk-display); }
body.tqs-skin .lead-item + .lead-item { border-top-color: rgba(12,12,12,0.12); }

/* ─── Account pages ───────────────────────────── */
body.tqs-skin .acct-title { font-family: var(--sk-display); color: var(--sk-ink); }
body.tqs-skin .acct-sub { color: var(--sk-ink-2); }
body.tqs-skin .acct-field > span { font-family: var(--sk-display); color: var(--sk-ink); }
body.tqs-skin .acct-field input {
    border: var(--sk-line) solid var(--sk-ink);
    border-radius: 10px; background: var(--sk-paper);
}
body.tqs-skin .acct-btn {
    font-family: var(--sk-display);
    background: var(--sk-ink); color: var(--sk-paper);
    border: var(--sk-line) solid var(--sk-ink); border-radius: 10px;
    box-shadow: var(--sk-shadow);
}
body.tqs-skin .acct-btn:hover { filter: none; background: var(--sk-teal-dk); }
body.tqs-skin .acct-foot { color: var(--sk-muted); }
body.tqs-skin .blog-card {
    background: var(--sk-paper);
    border: 1px solid var(--sk-edge);
    border-radius: var(--sk-r);
}
body.tqs-skin .blog-card-title { font-family: var(--sk-display); }
body.tqs-skin .blog-card-title a { color: var(--sk-ink); }
body.tqs-skin .blog-card-title a:hover { color: var(--sk-teal-dk); }
body.tqs-skin .blog-card-ex { color: var(--sk-ink-2); }
body.tqs-skin .blog-card-read { font-family: var(--sk-display); color: var(--sk-teal-dk); }
body.tqs-skin .blog-pages .page-numbers { font-family: var(--sk-display); border-color: var(--sk-edge); color: var(--sk-ink); }
body.tqs-skin .blog-pages .page-numbers.current { background: var(--sk-teal-dk); border-color: var(--sk-teal-dk); }

body.tqs-skin .acct-card,
body.tqs-skin .acct-why {
    background: var(--sk-paper);
    border: 1px solid var(--sk-edge);
    border-radius: var(--sk-r);
}
body.tqs-skin .acct-why { background: var(--sk-ground); }
body.tqs-skin .acct-why-title { font-family: var(--sk-display); color: var(--sk-muted); }
body.tqs-skin .acct-why-item strong { font-family: var(--sk-display); color: var(--sk-ink); }
body.tqs-skin .acct-why-icon { background: var(--sk-teal-dk); }
body.tqs-skin .nav-acct { font-family: var(--sk-display); }
body.tqs-skin .nav-acct-up { background: var(--sk-teal-dk); color: #fff; }
body.tqs-skin .nav-acct-dot { background: var(--sk-teal-dk); }

/* ─── Pair games: the category on the action strip ── */
body.tqs-skin .duo-cat-now { color: var(--sk-muted); }
body.tqs-skin .duo-auto { font-family: var(--sk-display); color: var(--sk-ink-2); }
body.tqs-skin .duo-auto-input:checked + .duo-auto-track { background: var(--sk-teal-dk); }
body.tqs-skin .scr-cat { font-family: var(--sk-display); }