/* =====================
   CUSTOM FONTS
   ===================== */
@font-face {
    font-family: 'Teletext50';
    src: url('../fonts/Teletext50.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

/* =====================
   GENERAL RESET
   ===================== */
body {
    font-family: 'Lucida Console', Monaco, monospace;
    background-color: #000000;
    color: white;
    margin: 0;
    padding: 0;
    font-weight: normal;
}

.page-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    background-color: black;
}

a { text-decoration: none; color: inherit; }
a:hover { text-decoration: underline; }

/* =====================
   HEADER / TOP BAR
   ===================== */

.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 20px;
    background-color: black;
    color: white;
    font-family: 'Teletext50', monospace;

    /* ── ONE font-size for the entire top bar ──
       Date, time, SEARCH and CONTACT all INHERIT this, so they
       are always identical to each other by construction. They previously
       diverged at every single breakpoint (18/16, 16/13, 14/13, 14/11, 12/10)
       because .top-bar-fun declared its own size and could never track the bar.
       Fluid rather than stepped: scales down to fit narrow screens on its own,
       so there is no second place for a size to be declared and drift again.
       ~18px at >=720px wide, floors at 10px on the narrowest phones. */
    font-size: clamp(10px, 2.5vw, 18px);
}

.top-bar-left   { display: flex; align-items: center; }
/* Gap scales with the text so the right-hand links keep their proportions. */
.top-bar-right  { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 16px); }
.top-bar-date   { color: white; white-space: nowrap; }
.top-bar-time   { color: yellow; white-space: nowrap; }

.top-bar-fun {
    color: white;
    font-family: 'Teletext50', monospace;
    /* NO font-size here — inherit from .top-bar. Adding one back is exactly
       what made these links mismatch the date/time at every breakpoint. */
    text-decoration: none;
    white-space: nowrap;
    letter-spacing: 1px;
}
.top-bar-fun:hover { color: yellow; text-decoration: underline; }
.top-bar-fun.active { color: yellow; }

.header-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12px 20px;
    background-color: blue;
    width: 100%;
    box-sizing: border-box;
}

.logo {
    font-size: 52px;
    color: yellow;
    text-shadow: 3px 3px 0 black;
    font-family: 'Teletext50', monospace;
    line-height: 1;
    letter-spacing: 2px;
}

.logo a { color: yellow; }

/* ── Sticky header ── */
header {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    z-index: 999;
    background-color: black;
}

/* =====================
   NAV
   ===================== */

/* ── Primary nav (9 news categories) ── */
nav.main-nav {
    background-color: blue;
    width: 100%;
    box-sizing: border-box;
    padding: 4px 10px 6px;
}

nav.main-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: nowrap;          /* single row — items scale to fit */
    justify-content: space-between;
    font-family: 'Teletext50', monospace;
}

nav.main-nav ul li { padding: 2px 4px; font-size: 20px; white-space: nowrap; }
nav.main-nav ul li a { color: white; }
nav.main-nav ul li a:hover { color: yellow; text-decoration: underline; }
nav.main-nav ul li a.active { color: yellow; text-decoration: underline; }

/* Legacy selector — keep for anything that targeted bare nav */
nav {
    background-color: blue;
    width: 100%;
    box-sizing: border-box;
}

/* =====================
   BREAKING NEWS
   ===================== */

.breaking-news {
    background-color: red;
    color: yellow;
    font-size: 20px;
    padding: 6px 15px;
    width: 100%;
    box-sizing: border-box;
    font-family: 'Teletext50', monospace;
    display: flex;
    align-items: center;
    gap: 12px;
}

.breaking-label {
    color: white;
    white-space: nowrap;
    flex-shrink: 0;
}

/* ── Seamless CSS ticker ── */
.ticker-wrap {
    flex: 1;
    overflow: hidden;
    min-width: 0;
    position: relative;
}

.ticker-track {
    display: inline-block;
    white-space: nowrap;
    animation: ticker-scroll 30s linear infinite;
}

@media (max-width: 640px) {
    .ticker-track { animation-duration: 55s; }
}

.ticker-wrap:hover .ticker-track {
    animation-play-state: paused;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.ticker-link {
    color: yellow;
    text-decoration: none;
}

.ticker-link:hover {
    text-decoration: underline;
    cursor: pointer;
}

.ticker-sep {
    color: white;
    padding: 0 4px;
}

.ticker-gap {
    display: inline-block;
    width: 8em;
}

/* =====================
   MAIN CONTENT
   ===================== */

main {
    padding: 210px 20px 120px; /* top clears fixed header */
    box-sizing: border-box;
    font-family: 'Lucida Console', Monaco, monospace;
}

/* Game/interactive pages — edge-to-edge, no side gaps */
main.game-main {
    padding: 195px 0 80px;
    box-sizing: border-box;
}

/* ── HERO HEADLINE ── */
.headline-article {
    width: 100%;
    margin-bottom: 24px;
    padding-bottom: 20px;
}

.headline-article h1 {
    font-size: 44px;
    color: yellow;
    font-family: 'Teletext50', monospace;
    margin: 0 0 10px;
    line-height: 1.2;
    letter-spacing: 1px;
    font-weight: normal;
}

.headline-article h1 a { color: yellow; }

.headline-meta {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.headline-description {
    font-size: 14px;
    text-transform: uppercase;
    margin: 0;
    flex: 1;
    line-height: 1.7;
}

.headline-source {
    display: none;
}

/* =====================
   CONTENT LAYOUT
   ===================== */

.content-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.left-column,
.main-content {
    flex: 1;
    min-width: 0;
    box-sizing: border-box;
}

.right-column,
.sidebar {
    width: 220px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    box-sizing: border-box;
}

/* =====================
   NEWS SECTIONS
   ===================== */

.section {
    padding-top: 40px;
    padding-bottom: 4px;
}

.news-sections .section:first-child {
    padding-top: 0;
}

.section h2 {
    font-size: 24px;
    color: cyan;
    margin: 0 0 10px;
    font-weight: normal;
    font-family: 'Teletext50', monospace;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.section h2 a {
    color: cyan;
    text-decoration: none;
}

.section h2 a:hover {
    text-decoration: underline;
}

.section ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.section ul li { margin-bottom: 10px; }

/* ARTICLE ROWS */
.article-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    border-bottom: 1px solid #1e1e1e;
    padding-bottom: 10px;
    margin-bottom: 6px;
}

.article-title {
    color: white;
    font-size: 24px;
    font-family: 'Teletext50', monospace;
    flex: 1;
    min-width: 0;
    line-height: 1.4;
}

.article-title:hover { text-decoration: underline; }

.article-source {
    display: none;
}

/* MORE LINK */
a.more-link {
    color: yellow;
    font-size: 20px;
    font-family: 'Teletext50', monospace;
    display: block;
    text-align: left;
    margin-top: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

a.more-link:hover { text-decoration: underline; }

/* Legacy meta */
.article-meta { font-size: 12px; margin: 2px 0 0; }
.time         { color: red; }
.news-source  { color: cyan; }
.pipe         { color: white; margin: 0 4px; }

/* =====================
   PROMO COLUMN (sidebar)
   ===================== */

.promo-column {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    align-self: flex-start;  /* don't stretch to full column height */
}


/* Individual promo box */
.promo-box {
    border: 2px solid cyan;  /* overridden per-box via inline style */
    background: #050505;
    box-sizing: border-box;
}

/* Coloured header strip — title + teletext page number, matching the
   game-page header idiom (title left, pXXX right). */
.promo-box-header {
    font-family: 'Teletext50', monospace;
    font-size: 17px;
    letter-spacing: 2px;
    text-align: center;
    padding: 7px 6px;
    text-transform: uppercase;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    box-sizing: border-box;
}
.promo-box-title { flex: 1; }
.promo-box-pg {
    font-size: 11px;
    opacity: 0.65;
    letter-spacing: 1px;
    flex-shrink: 0;
}

/* Body copy */
.promo-box-body {
    font-family: 'Teletext50', monospace;
    font-size: 14px;
    color: #e0e0e0;
    padding: 10px 10px 6px;
    line-height: 1.8;
    text-transform: uppercase;
}

/* Call-to-action bar at bottom */
.promo-box-cta {
    display: block;
    font-family: 'Teletext50', monospace;
    font-size: 15px;
    text-align: center;
    padding: 7px 6px;
    text-decoration: none;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.promo-box-cta:hover {
    filter: brightness(0.8);
    text-decoration: none;
}

/* ── Inline promos: hidden on desktop, shown mobile/tablet ── */
.inline-promo-row {
    display: none;
}

/* Pages with no sidebar column (the Ceefax weather map and the Fun & Games
   arcade both own the full width) put their promos BELOW the content instead.
   This wrapper forces the inline rows visible at ALL widths. */
.promos-below .inline-promo-row {
    display: flex;
    flex-direction: row;
    gap: 12px;
    margin: 16px 0;
    box-sizing: border-box;
}
.promos-below .inline-promo-row .promo-box { flex: 1; min-width: 0; }
@media (max-width: 599px) {
    /* Match the site-wide mobile rule: one promo per row */
    .promos-below .inline-promo-row { flex-direction: column; }
    .promos-below .inline-promo-row .promo-box:nth-child(2) { display: none; }
}

/* Tablet portrait (600–768px): 2 boxes side by side */
@media (max-width: 768px) {
    .promo-column { display: none; }

    .inline-promo-row {
        display: flex;
        flex-direction: row;
        gap: 12px;
        margin: 20px 0;
        box-sizing: border-box;
    }
    .inline-promo-row .promo-box {
        flex: 1;
        min-width: 0;
    }
}

/* Small mobile (≤599px): single column, 1 promo per slot, max 2 slots */
@media (max-width: 599px) {
    .inline-promo-row {
        flex-direction: column;
    }
    /* Show only the first box in each slot */
    .inline-promo-row .promo-box:nth-child(2) {
        display: none;
    }
    /* Cap at 2 promos (slots 1 and 2 only) */
    .inline-promo-row[data-slot="3"],
    .inline-promo-row[data-slot="4"],
    .inline-promo-row[data-slot="5"] {
        display: none;
    }
}

/* =====================
   GAME CROSS-PROMO STRIP  (includes/game_strip.php)
   Sits BELOW a game — never beside it, or the --cell clamps shrink the board.
   Magenta = PLAY in the promo colour law (see includes/promos.php).
   ===================== */

.gs-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 14px;
    margin: 28px 0 0;
    padding: 10px 12px;
    border-top: 2px solid #ff00ff;
    background: #0a000a;
    font-family: 'Teletext50', monospace;
    box-sizing: border-box;
}

.gs-label {
    color: #ff00ff;
    font-size: 14px;
    letter-spacing: 2px;
    flex-shrink: 0;
}

.gs-link {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    color: #00ffff;
    font-size: 14px;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
}
.gs-link:hover { color: #fff; text-decoration: underline; }
.gs-link::before { content: '\25BA'; font-size: 10px; }

.gs-pg { font-size: 11px; color: #888; letter-spacing: 0; }

.gs-all {
    margin-left: auto;
    color: #ffff00;
    font-size: 13px;
    letter-spacing: 1px;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
}
.gs-all:hover { color: #fff; text-decoration: underline; }

@media (max-width: 599px) {
    .gs-strip { gap: 6px 10px; padding: 8px; }
    .gs-label, .gs-link { font-size: 12px; }
    .gs-all { margin-left: 0; font-size: 12px; }
}

/* =====================
   FOOTER
   ===================== */

.footer-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 1200px;
    z-index: 1000;
    background-color: black;
    color: white;
    text-align: center;
    font-family: 'Teletext50', monospace;
    border-top: 1px solid #333;
}

/* ── Network strip ──────────────────────────────────────────────
   Cross-promotes our OWN sites only — 8-Bit News carries no third-party
   advertising (Ceefax never did either; it promoted the BBC's own services).
   Yellow = THE NETWORK in the promo colour law (see includes/promos.php).
   The brand block uses teletext inverse video. */
.net-strip {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #ffff00;
    color: #000;
    font-family: 'Teletext50', monospace;
    font-size: 18px;
    letter-spacing: 2px;
    padding: 7px 20px;
    text-decoration: none;
    box-sizing: border-box;
}
.net-strip:hover { filter: brightness(0.88); text-decoration: none; }

.net-strip-brand {          /* inverse video — the classic teletext trick */
    background: #000;
    color: #ffff00;
    padding: 2px 8px;
    flex-shrink: 0;
}
.net-strip-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.net-strip-cta { flex-shrink: 0; }

/* ── FASTEXT row (.footer-links) ────────────────────────────────
   DELIBERATE STYLE — do not restyle. Large coloured text links in the four
   classic fastext key colours (red / green / yellow / cyan) are the authentic
   Ceefax bottom-of-page look. These colours are the fastext KEYS, which is why
   they don't follow the promo colour law in includes/promos.php — that law
   governs promo boxes, not the fastext row. */
.footer-links { padding: 8px 10px; box-sizing: border-box; }

.footer-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-around;
}

.footer-links ul li { font-size: 26px; }
.footer-links ul li a { text-decoration: none; }

.footer-links ul li a.about     { color: red; }
.footer-links ul li a.terms     { color: #00FF00; }
.footer-links ul li a.advertise { color: yellow; }
.footer-links ul li a.privacy   { color: #00FFFF; }
.footer-links ul li a.contact   { color: white; }
.footer-links ul li a.weather   { color: yellow; }
.footer-links ul li a:hover     { text-decoration: underline; }

/* =====================
   RESPONSIVE
   ===================== */

/* ── Nav: fluid single-row scaling across breakpoints ── */

@media (max-width: 1100px) {
    nav.main-nav ul li { font-size: 18px; }
}

@media (max-width: 900px) {
    nav.main-nav ul li { font-size: 16px; padding: 2px 3px; }
}

/* Tablet — titles start scaling down before full mobile layout kicks in */
@media (max-width: 768px) {
    nav.main-nav ul li    { font-size: 14px; padding: 2px 2px; }
    .headline-article h1  { font-size: 38px; }
    .article-page-title   { font-size: 38px; }
    .category-title       { font-size: 42px; }
}

/* Landscape mobile / small tablet — allow wrap so nothing gets clipped */
@media (max-width: 640px) {
    nav.main-nav ul       { flex-wrap: wrap; justify-content: space-evenly; row-gap: 5px; }
    nav.main-nav ul li    { font-size: 15px; padding: 3px 5px; }
    nav.main-nav          { padding-bottom: 10px; }
    /* Force 5 items on row 1 (News→Science), 4 on row 2 (Culture→Weather) */
    nav.main-nav ul li:nth-child(1) { order: 1; }
    nav.main-nav ul li:nth-child(2) { order: 2; }
    nav.main-nav ul li:nth-child(3) { order: 3; }
    nav.main-nav ul li:nth-child(4) { order: 4; }
    nav.main-nav ul li:nth-child(5) { order: 5; }
    nav.main-nav ul li:nth-child(6) { order: 7; }
    nav.main-nav ul li:nth-child(7) { order: 8; }
    nav.main-nav ul li:nth-child(8) { order: 9; }
    nav.main-nav ul li:nth-child(9) { order: 10; }
    nav.main-nav ul::after { content: ''; order: 6; flex-basis: 100%; height: 0; }
}

@media (max-width: 640px) {
    .page-wrapper     { max-width: 100%; }
    .footer-container { max-width: 100%; }
    header            { max-width: 100%; }

    main { padding-top: 205px; }
    main.game-main { padding-top: 205px; }

    .content-wrapper { flex-direction: column; }

    .right-column,
    .sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .promo { flex: 1; min-width: 140px; }

    .logo             { font-size: 46px; }
    .headline-article h1 { font-size: 34px; }
    .section h2       { font-size: 20px; }
    /* .top-bar font-size is fluid (clamp) — never override it per breakpoint */
    .breaking-news    { font-size: 17px; padding: 5px 10px; }
    .footer-links ul li { font-size: 15px; padding: 10px 0; }
    .article-title    { font-size: 20px; }
    .article-page-title { font-size: 32px; }
    .category-title   { font-size: 36px; }
}

@media (max-width: 480px) {
    main { padding-top: 185px; }
    main.game-main { padding-top: 185px; }
    .logo { font-size: 36px; }
    .header-container { padding: 10px 12px; }
    .headline-article h1 { font-size: 28px; }
    .section h2 { font-size: 18px; }
    .top-bar { padding: 4px 12px; }
    .breaking-news { font-size: 15px; padding: 4px 8px; }
    .net-strip { font-size: 14px; gap: 10px; padding: 6px 12px; }
    .net-strip-text { display: none; }   /* keep brand + CTA only */
    .article-title    { font-size: 18px; }
    .article-page-title { font-size: 24px; }
    .category-title   { font-size: 28px; }
}

@media (max-width: 430px) {
    main { padding-top: 170px; }
    main.game-main { padding-top: 170px; }
    .logo { font-size: 30px; }
    nav.main-nav ul li { font-size: 13px; padding: 2px 3px; }
    .headline-article h1 { font-size: 24px; }
    .headline-meta { flex-direction: column; gap: 6px; }
    .headline-source { font-size: 16px; }
    .article-row { flex-direction: column; gap: 2px; }
    .article-source { font-size: 15px; width: auto; }
    .footer-links ul { flex-wrap: nowrap; justify-content: space-evenly; gap: 0; }
    .footer-links ul li { font-size: 13px; flex: none; text-align: center; padding: 10px 0; }
    .net-strip { font-size: 12px; justify-content: center; }
    .net-strip-cta { display: none; }    /* brand block only — the whole strip is the link */
    .article-page-title { font-size: 20px; }
    .category-title   { font-size: 24px; }
}

@media (max-width: 380px) {
    .logo { font-size: 26px; }
    nav.main-nav ul li { font-size: 12px; padding: 2px; }
    .section h2 { font-size: 16px; }
    .headline-article h1 { font-size: 20px; }
    .net-strip { font-size: 11px; padding: 6px 8px; }
    .article-title    { font-size: 16px; }
    .article-page-title { font-size: 18px; }
    .category-title   { font-size: 20px; }
    .footer-links ul li { font-size: 11px; }
}

/* =====================
   CATEGORY PAGE
   ===================== */

.category-hero {
    margin-bottom: 28px;
    padding-bottom: 14px;
}

.category-title {
    font-family: 'Teletext50', monospace;
    font-size: 52px;
    color: cyan;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0;
    line-height: 1.1;
}

/* ─────────────────────────────────────────────────────────────
   WEATHER — Ceefax (V1) low-res teletext look
   ───────────────────────────────────────────────────────────── */

.ceefax-weather {
    background: #000000;
    padding: 8px 24px 24px;
    font-family: 'Teletext50', 'Lucida Console', monospace;
    color: #fff;
    margin: 0;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
    min-height: 720px;
    display: block;
    box-sizing: border-box;
}

/* Tighten the standard category-hero spacing when inside the weather panel. */
.ceefax-weather .category-hero {
    margin-bottom: 8px;
    padding-bottom: 6px;
}

/* Weather page goes flush — kill main's side/top/bottom padding, ticker already
   sits directly above. */
main.weather-main {
    padding: 195px 0 40px;
}

.ceefax-page-bar,
.ceefax-title-bar,
.ceefax-footer-bar {
    display: block;
    padding: 8px 4px;
    font-size: 22px;
    letter-spacing: 1px;
    white-space: nowrap;
}
.ceefax-page-bar > span,
.ceefax-title-bar > span,
.ceefax-footer-bar > span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 24px;
}

.ceefax-title-bar { font-size: 28px; padding-top: 16px; }

/* Float layout — works on every browser since Netscape 4. */
.ceefax-stage {
    display: block;
    margin: 16px 0;
    *zoom: 1; /* IE6/7 hasLayout */
}
.ceefax-stage:after {
    content: "";
    display: block;
    clear: both;
}
.ceefax-stage > .ceefax-svg-map {
    float: left;
    margin-right: 32px;
    margin-bottom: 16px;
}
.ceefax-stage > .ceefax-sidelabels {
    display: block;
    overflow: hidden; /* new block formatting context — sits next to float */
}

/* Map is now an inline SVG — works on iPad iOS 3.2+. */
.ceefax-svg-map {
    display: block;
    flex-shrink: 0;
    background: #000;
    max-width: 100%;
    height: auto;
}

.cx-sea     { background: #000000; }
.cx-yellow,  .cx-cell.cx-yellow  { background: #ffff00; color: #000; }
.cx-green,   .cx-cell.cx-green   { background: #00ff00; color: #000; }
.cx-magenta, .cx-cell.cx-magenta { background: #ff00ff; color: #000; }
.cx-cyan,    .cx-cell.cx-cyan    { background: #00ffff; color: #000; }
.cx-red,     .cx-cell.cx-red     { background: #ff0000; color: #fff; }
.cx-white,   .cx-cell.cx-white   { background: #ffffff; color: #000; }
.cx-blue,    .cx-cell.cx-blue    { background: #0000ff; color: #fff; }

/* Text classes (for non-cell uses in the header/legend) override background. */
.ceefax-page-bar .cx-yellow,
.ceefax-page-bar .cx-cyan,
.ceefax-page-bar .cx-white,
.ceefax-title-bar .cx-yellow,
.ceefax-title-bar .cx-cyan,
.ceefax-title-bar .cx-white,
.ceefax-footer-bar .cx-yellow,
.ceefax-footer-bar .cx-cyan,
.ceefax-footer-bar .cx-white,
.ceefax-sidelabels .cx-yellow,
.ceefax-sidelabels .cx-cyan,
.ceefax-sidelabels .cx-white,
.cx-link {
    background: transparent;
}
.ceefax-page-bar .cx-yellow,
.ceefax-title-bar .cx-yellow,
.ceefax-footer-bar .cx-yellow,
.ceefax-sidelabels .cx-yellow { color: #ffff00; }
.ceefax-page-bar .cx-cyan,
.ceefax-title-bar .cx-cyan,
.ceefax-footer-bar .cx-cyan,
.ceefax-sidelabels .cx-cyan { color: #00ffff; }
.ceefax-page-bar .cx-white,
.ceefax-title-bar .cx-white,
.ceefax-footer-bar .cx-white,
.ceefax-sidelabels .cx-white { color: #ffffff; }
.ceefax-footer-bar .cx-magenta,
.cx-link { color: #ff00ff; text-decoration: none; }
.cx-link:hover { text-decoration: underline; }

.cx-cell.cx-num {
    color: #000;
    font-weight: bold;
}

.ceefax-sidelabels {
    display: block;
    font-size: 20px;
    letter-spacing: 1px;
}

.cx-side {
    display: block;
    margin-bottom: 6px;
    white-space: nowrap;
}
.cx-side > span {
    display: inline-block;
    vertical-align: middle;
    margin-right: 8px;
}

.cx-leg-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* Swatch backgrounds — override the side-legend transparency rule so swatches
   show their colour even when they happen to share a class with text. */
.ceefax-sidelabels .cx-leg-swatch.cx-yellow  { background: #ffff00; }
.ceefax-sidelabels .cx-leg-swatch.cx-green   { background: #00ff00; }
.ceefax-sidelabels .cx-leg-swatch.cx-magenta { background: #ff00ff; }
.ceefax-sidelabels .cx-leg-swatch.cx-cyan    { background: #00ffff; }
.ceefax-sidelabels .cx-leg-swatch.cx-red     { background: #ff0000; }
.ceefax-sidelabels .cx-leg-swatch.cx-white   { background: #ffffff; }
.ceefax-sidelabels .cx-leg-swatch.cx-blue    { background: #0000ff; }

.ceefax-error {
    margin-top: 12px;
    background: #ff0000;
    color: #fff;
    padding: 6px 10px;
    font-size: 18px;
}

/* ─────────────────────────────────────────────────────────────
   WEATHER — 16-bit (V2) higher detail
   ───────────────────────────────────────────────────────────── */

.wx-hd {
    background: linear-gradient(180deg, #001a33 0%, #002b55 100%);
    padding: 20px;
    font-family: 'Teletext50', 'Lucida Console', monospace;
    color: #fff;
    margin: 20px 0;
    border: 2px solid #00aaff;
    box-shadow: 0 0 0 2px #001a33, 0 0 0 4px #00aaff;
    image-rendering: pixelated;
    -ms-interpolation-mode: nearest-neighbor;
}

.wx-hd-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #00aaff;
    color: #001a33;
    padding: 8px 14px;
    font-size: 22px;
    letter-spacing: 2px;
    margin-bottom: 18px;
}
.wx-hd-page { font-weight: bold; }
.wx-hd-time { font-weight: bold; color: #ffff00; background: #001a33; padding: 2px 8px; }

.wx-hd-stage {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.wx-hd-map {
    position: relative;
    background: #003a6e;
    padding: 0;
    border: 2px solid #00aaff;
    flex-shrink: 0;
    line-height: 0;
}

.wx-row { display: flex; line-height: 0; }

.wx-cell {
    width: 16px;
    height: 16px;
    display: inline-block;
    box-sizing: border-box;
}

.wx-sea               { background: #003a6e; }
.wx-cell.wx-cond-sunny         { background: #ffd200; box-shadow: inset -1px -1px 0 #b88c00; }
.wx-cell.wx-cond-partly-cloudy { background: #74c46a; box-shadow: inset -1px -1px 0 #2f6b2a; }
.wx-cell.wx-cond-cloudy        { background: #c4a8c4; box-shadow: inset -1px -1px 0 #6e4e6e; }
.wx-cell.wx-cond-mist          { background: #aadbe7; box-shadow: inset -1px -1px 0 #5285a0; }
.wx-cell.wx-cond-light-rain    { background: #5aa5ff; box-shadow: inset -1px -1px 0 #2c5b9c; }
.wx-cell.wx-cond-heavy-rain    { background: #2a55ff; box-shadow: inset -1px -1px 0 #142c8c; }
.wx-cell.wx-cond-showers       { background: #79b6ff; box-shadow: inset -1px -1px 0 #355d96; }
.wx-cell.wx-cond-heavy-showers { background: #2a55ff; box-shadow: inset -1px -1px 0 #142c8c; }
.wx-cell.wx-cond-snow          { background: #ffffff; box-shadow: inset -1px -1px 0 #aab; }
.wx-cell.wx-cond-sleet         { background: #d0e0ff; box-shadow: inset -1px -1px 0 #607090; }
.wx-cell.wx-cond-thunder       { background: #555555; box-shadow: inset -1px -1px 0 #222; }
.wx-cell.wx-cond-unknown       { background: #666666; }

.wx-pin {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wx-pin .wx-icon {
    width: 32px;
    height: 32px;
    filter: drop-shadow(1px 1px 0 #000);
}

.wx-temp {
    background: #001a33;
    color: #ffff00;
    font-family: 'Teletext50', monospace;
    font-size: 20px;
    padding: 1px 6px;
    border: 1px solid #ffff00;
    margin-top: -4px;
    letter-spacing: 1px;
}

.wx-hd-panel {
    flex: 1;
    min-width: 280px;
    background: #001a33;
    border: 2px solid #00aaff;
    padding: 12px;
}

.wx-panel-title {
    background: #00aaff;
    color: #001a33;
    margin: -12px -12px 12px;
    padding: 6px 12px;
    font-size: 20px;
    letter-spacing: 2px;
    font-family: 'Teletext50', monospace;
    font-weight: normal;
}

.wx-panel-row {
    display: grid;
    grid-template-columns: 36px 1fr 60px 110px;
    gap: 10px;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dashed #00aaff;
    font-size: 14px;
}
.wx-panel-row:last-child { border-bottom: none; }

.wx-panel-icon .wx-icon { width: 32px; height: 32px; }
.wx-panel-city { font-size: 16px; color: #fff; letter-spacing: 1px; }
.wx-panel-cond { font-size: 12px; color: #aadbe7; letter-spacing: 1px; }
.wx-panel-temp {
    font-size: 26px;
    color: #ffd200;
    text-align: right;
    font-weight: bold;
    letter-spacing: 1px;
}
.wx-panel-extra {
    font-size: 11px;
    color: #aadbe7;
    text-align: right;
    line-height: 1.4;
}

.wx-hd-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 18px;
    padding: 6px 14px;
    background: #001a33;
    border-top: 1px solid #00aaff;
    font-size: 14px;
    letter-spacing: 1px;
}

.wx-hd-link {
    color: #ffd200;
    text-decoration: none;
    background: #001a33;
    padding: 4px 10px;
    border: 1px solid #ffd200;
}
.wx-hd-link:hover { background: #ffd200; color: #001a33; }

.wx-hd-error {
    margin-top: 10px;
    background: #ff2200;
    color: #fff;
    padding: 6px 10px;
}

@media (max-width: 768px) {
    /* Clear the float so map stacks above sidelabels on mobile */
    .ceefax-stage > .ceefax-svg-map {
        float: none;
        width: 100%;
        max-width: 100%;
        height: auto;
        margin-right: 0;
    }
    .ceefax-stage > .ceefax-sidelabels {
        overflow: visible;
        width: 100%;
    }
    .wx-hd-stage { flex-direction: column; }
    .wx-hd-map { transform-origin: top left; }
    /* Stack footer bar items vertically */
    .ceefax-footer-bar {
        display: flex;
        flex-direction: column;
        white-space: normal;
        gap: 4px;
        font-size: 18px;
    }
    .ceefax-footer-bar > span { margin-right: 0; }
}

.day-group {
    margin-bottom: 32px;
}

.day-group ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.day-label {
    font-family: 'Teletext50', monospace;
    font-size: 20px;
    color: #888;
    font-weight: normal;
    letter-spacing: 2px;
    margin: 0 0 10px;
}

.no-articles-msg {
    font-family: 'Teletext50', monospace;
    font-size: 20px;
    color: #666;
}

/* =====================
   ARTICLE PAGE
   ===================== */

.article-page {
    width: 100%;
    box-sizing: border-box;
}

.article-page-title {
    font-family: 'Teletext50', monospace;
    font-size: 48px;
    color: yellow;
    font-weight: normal;
    line-height: 1.2;
    margin: 0 0 16px;
    letter-spacing: 1px;
}

.article-page-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 28px;
    padding-bottom: 14px;
    border-bottom: 1px solid #333;
    font-family: 'Teletext50', monospace;
    font-size: 22px;
}

.article-page-date    { color: white; }
.article-page-sources { color: cyan; }
.article-page-source  { color: cyan; }
.article-page-subcat  {
    background: #ffff00;
    color: #000;
    padding: 2px 8px;
    font-weight: bold;
    text-decoration: none;
    display: inline-block;
}
.article-page-subcat:hover {
    background: #e6e600;
    text-decoration: underline;
    color: #000;
}

/* Category badge on the all-news page */
.all-news-cat-badge {
    font-family: 'Teletext50', monospace;
    font-size: 12px;
    color: #000;
    background: #00ffff;
    padding: 1px 5px;
    font-weight: bold;
    white-space: nowrap;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 4px;
}

/* Sub-category badge in category listing pages — matches search-page badge style */
.article-list-subcat {
    font-size: 10px;
    font-family: 'Teletext50', monospace;
    padding: 1px 5px;
    white-space: nowrap;
    letter-spacing: 1px;
    text-decoration: none;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 5px;
    text-align: center;
    min-width: 58px;
}
.article-list-subcat:hover { opacity: 0.8; }

.article-page-body p {
    font-family: 'Teletext50', monospace;
    font-size: 18px;
    line-height: 1.9;
    color: #e8e8e8;
    margin: 0 0 18px;
}

.article-placeholder {
    border-left: 4px solid yellow;
    padding: 24px 28px;
    margin: 10px 0 30px;
    background-color: #050505;
}

.article-placeholder p {
    font-size: 15px;
    color: #888;
    margin: 0 0 10px;
    text-transform: uppercase;
    line-height: 1.7;
}

.article-placeholder p:last-of-type { margin-bottom: 20px; }

.article-ext-link {
    font-family: 'Teletext50', monospace;
    font-size: 24px;
    color: yellow;
    text-decoration: none;
    display: inline-block;
}

.article-ext-link:hover { text-decoration: underline; }

.article-back-link {
    display: inline-block;
    font-family: 'Teletext50', monospace;
    font-size: 22px;
    color: cyan;
    text-decoration: none;
}

.article-back-link:hover { text-decoration: underline; }

/* =====================================================================
   POST-BASE RESPONSIVE OVERRIDES
   .article-page-title and .category-title base styles are defined in
   the sections below the main responsive block, so their base values
   (48px / 52px) override the earlier media-query rules in the cascade.
   These rules come LAST to correctly override on mobile.
   ===================================================================== */
@media (max-width: 768px) {
    .article-page-title { font-size: 36px; }
    .category-title     { font-size: 42px; }
}
@media (max-width: 640px) {
    .article-page-title { font-size: 26px; margin-top: 6px; }
    .category-title     { font-size: 32px; }
}
@media (max-width: 480px) {
    .article-page-title { font-size: 20px; margin-top: 2px; }
    .category-title     { font-size: 26px; }
}
@media (max-width: 430px) {
    .article-page-title { font-size: 18px; margin-top: 10px; }
    .category-title     { font-size: 22px; }
}
@media (max-width: 380px) {
    .article-page-title { font-size: 16px; margin-top: 0; }
    .category-title     { font-size: 18px; }
}

/* =====================================================================
   TELETEXT INDEX / CONTENTS PAGE
   ===================================================================== */

.cx-index {
    font-family: 'Teletext50', monospace;
    background: #000;
    padding: 6px 12px 28px;
    box-sizing: border-box;
}

/* Top info bar */
.cx-index-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #000066;
    padding: 6px 10px;
    font-size: 18px;
    letter-spacing: 1px;
    margin-bottom: 0;
}
.cx-ib-left  { color: white; }
.cx-ib-page  { color: #ffff00; }
.cx-ib-clock { color: #00ffff; }

/* Big logo banner */
.cx-index-logo {
    background: #0000cc;
    color: #ffff00;
    font-family: 'Teletext50', monospace;
    font-size: 52px;
    text-align: center;
    padding: 14px 10px 10px;
    letter-spacing: 4px;
    line-height: 1;
    margin-bottom: 14px;
}

/* Two-column body */
.cx-index-body {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.cx-index-col { flex: 1; min-width: 0; }

/* Individual entry row */
.cx-ie         { display: block; overflow: hidden; }
.cx-ie a       {
    display: flex;
    align-items: baseline;
    width: 100%;
    text-decoration: none;
    overflow: hidden;
}
.cx-ie a:hover .cx-ie-name,
.cx-ie a:hover .cx-ie-num { text-decoration: underline; }

/* Section (main category) entries */
.cx-ie-section            { margin-top: 10px; }
.cx-ie-section .cx-ie-name { color: #00ffff; font-size: 30px; white-space: nowrap; flex-shrink: 0; }
.cx-ie-section .cx-ie-num  { color: #ffff00; font-size: 30px; white-space: nowrap; flex-shrink: 0; min-width: 52px; text-align: right; }

/* Sub-category entries — same size as section, colour differentiates */
.cx-ie-sub .cx-ie-name { color: white;   font-size: 30px; white-space: nowrap; flex-shrink: 0; }
.cx-ie-sub .cx-ie-num  { color: #ffff00; font-size: 30px; white-space: nowrap; flex-shrink: 0; min-width: 52px; text-align: right; }

/* Dot fill — radial-gradient scales dynamically to any row width.
   align-self:stretch ensures the div has height even with no text content,
   so the background-image is visible. */
.cx-ie-dots {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 0 6px;
    align-self: stretch;
}
.cx-ie-section .cx-ie-dots {
    background-image: radial-gradient(circle, #3a7070 1.5px, transparent 1.5px);
    background-size: 10px 100%;
    background-repeat: repeat-x;
    background-position: left center;
}
.cx-ie-sub .cx-ie-dots {
    background-image: radial-gradient(circle, #585858 1.5px, transparent 1.5px);
    background-size: 10px 100%;
    background-repeat: repeat-x;
    background-position: left center;
}
.cx-ie-dots::after { content: none; }

/* Footer info links row within index */
.cx-index-footer-links {
    border-top: 1px solid #222;
    margin-top: 14px;
    padding-top: 8px;
}
.cx-index-footer-links .cx-ie-sub .cx-ie-name { color: #ff00ff; padding-left: 0; }

/* Bottom promo bar */
.cx-index-promo {
    background: #ffff00;
    color: #000;
    text-align: center;
    padding: 10px 12px;
    font-size: 18px;
    margin-top: 18px;
    letter-spacing: 2px;
    font-family: 'Teletext50', monospace;
}
.cx-index-promo a { color: #000; text-decoration: none; }
.cx-index-promo a:hover { text-decoration: underline; }

/* Sub-category breadcrumb */
.subcat-breadcrumb { margin: 0 0 6px; }
.subcat-back {
    font-family: 'Teletext50', monospace;
    font-size: 18px;
    color: cyan;
    text-decoration: none;
}
.subcat-back:hover { text-decoration: underline; }

/* ── Index page responsive ── */
@media (max-width: 640px) {
    .cx-index-logo { font-size: 36px; letter-spacing: 2px; }
    .cx-index-body { flex-direction: column; gap: 0; }
    .cx-ie-section .cx-ie-name,
    .cx-ie-section .cx-ie-num,
    .cx-ie-sub .cx-ie-name,
    .cx-ie-sub .cx-ie-num      { font-size: 19px; }
}
@media (max-width: 430px) {
    .cx-index-logo { font-size: 28px; padding: 10px; }
    .cx-ie-section .cx-ie-name,
    .cx-ie-section .cx-ie-num,
    .cx-ie-sub .cx-ie-name,
    .cx-ie-sub .cx-ie-num      { font-size: 17px; }
    .cx-ie-section .cx-ie-num,
    .cx-ie-sub .cx-ie-num      { min-width: 44px; }
}

/* =====================================================================
   CONTACT FORM
   ===================================================================== */

.contact-form {
    font-family: 'Teletext50', monospace;
    max-width: 560px;
}

.cf-field {
    margin-bottom: 16px;
}

.cf-label {
    display: block;
    color: cyan;
    font-family: 'Teletext50', monospace;
    font-size: 16px;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.cf-input {
    display: block;
    width: 100%;
    background: #050505;
    border: 1px solid #ffff00;
    color: white;
    font-family: 'Teletext50', monospace;
    font-size: 16px;
    padding: 8px 10px;
    box-sizing: border-box;
    outline: none;
}
.cf-input:focus { border-color: cyan; }

.cf-textarea { min-height: 120px; resize: vertical; }

.cf-input-short { width: 100%; max-width: 340px; }

.cf-captcha-block {
    border: 1px solid #333;
    padding: 12px 14px;
    margin-bottom: 20px;
    background: #050505;
}

.cf-captcha-prompt {
    font-family: 'Teletext50', monospace;
    font-size: 16px;
    color: #00ff00;
    margin: 0 0 12px;
    letter-spacing: 1px;
}

.cf-hex { color: #ffff00; }

.cf-submit {
    background: blue;
    color: white;
    font-family: 'Teletext50', monospace;
    font-size: 20px;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.cf-submit:hover { background: #0000cc; color: yellow; }

.cf-success {
    background: #004400;
    border: 1px solid #00ff00;
    color: #00ff00;
    font-family: 'Teletext50', monospace;
    font-size: 18px;
    padding: 16px 18px;
    margin-bottom: 20px;
    letter-spacing: 1px;
}

.cf-errors {
    background: #440000;
    border: 1px solid #ff0000;
    color: #ff4444;
    font-family: 'Teletext50', monospace;
    font-size: 16px;
    padding: 12px 14px;
    margin-bottom: 18px;
}
.cf-errors p { margin: 0 0 6px; }
.cf-errors p:last-child { margin-bottom: 0; }

/* =====================================================================
   FUN & GAMES LANDING PAGE
   ===================================================================== */

.fg-page { font-family: 'Teletext50', monospace; }

.fg-header {
    background: #000099;
    text-align: center;
    padding: 14px 10px 10px;
    font-family: 'Teletext50', monospace;
    font-size: 52px;
    letter-spacing: 3px;
    line-height: 1;
    margin-bottom: 16px;
}
.fg-title-fun   { color: #ffff00; }
.fg-title-amp   { color: #ffffff; }
.fg-title-games { color: #00ffff; }

.fg-section-head {
    font-family: 'Teletext50', monospace;
    font-size: 14px;
    color: #666;
    letter-spacing: 2px;
    margin: 14px 0 2px;
    padding-bottom: 3px;
    border-bottom: 1px solid #1a1a1a;
}

.fg-new-badge  { background: #cc0000; color: white;  font-size: 11px; padding: 1px 5px; letter-spacing: 1px; vertical-align: middle; }
.fg-soon-badge { background: #222;    color: #666;   font-size: 11px; padding: 1px 5px; letter-spacing: 1px; vertical-align: middle; }

@media (max-width: 640px) {
    .fg-header { font-size: 34px; letter-spacing: 2px; }
}
@media (max-width: 430px) {
    .fg-header { font-size: 26px; padding: 10px 8px 8px; }
}

/* =====================================================================
   SCOOP! — DAILY NEWS QUIZ
   ===================================================================== */

.scoop-wrap {
    font-family: 'Teletext50', monospace;
    max-width: 680px;
}

/* Header banner */
.scoop-header {
    background: #0000cc;
    text-align: center;
    padding: 16px 12px 12px;
    margin-bottom: 20px;
}
.scoop-logo {
    display: block;
    font-size: 54px;
    color: #ffff00;
    letter-spacing: 4px;
    line-height: 1;
}
.scoop-sub {
    display: block;
    font-size: 17px;
    color: #00ffff;
    letter-spacing: 2px;
    margin-top: 6px;
}
.scoop-header-go  .scoop-logo { color: #ff4444; }
.scoop-header-win .scoop-logo { color: #00ff00; }

/* Start screen */
.scoop-start { padding: 0 4px; }
.scoop-instr {
    color: white;
    font-size: 16px;
    line-height: 2;
    margin: 0 0 20px;
}
.scoop-tagline { color: #666; font-size: 15px; letter-spacing: 2px; margin: 12px 0 0; }
.scoop-notice  { font-size: 16px; margin: 0 0 16px; }

/* Buttons */
.scoop-btn {
    display: inline-block;
    background: blue;
    color: white;
    font-family: 'Teletext50', monospace;
    font-size: 22px;
    padding: 12px 28px;
    text-decoration: none;
    letter-spacing: 2px;
    margin-bottom: 8px;
}
.scoop-btn:hover { background: #0000aa; color: yellow; text-decoration: none; }

.scoop-btn-sec {
    display: inline-block;
    color: cyan;
    font-family: 'Teletext50', monospace;
    font-size: 17px;
    text-decoration: none;
    margin-left: 14px;
}
.scoop-btn-sec:hover { text-decoration: underline; }

/* HUD (during play) */
.scoop-hud {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #001a00;
    border: 1px solid #004400;
    padding: 8px 12px;
    margin-bottom: 12px;
    font-size: 18px;
}
.scoop-hud-title { color: #ffff00; letter-spacing: 2px; }
.scoop-hud-lives { color: #ff4444; letter-spacing: 3px; }
.scoop-hud-score { color: white; }
.scoop-pts       { color: #ffff00; }

/* Feedback flash */
.scoop-feedback {
    padding: 10px 14px;
    font-size: 19px;
    margin-bottom: 12px;
    letter-spacing: 1px;
    transition: opacity 0.6s ease;
}
.scoop-fb-right { background: #004400; border: 1px solid #00ff00; color: #00ff00; }
.scoop-fb-wrong { background: #440000; border: 1px solid #ff0000; color: #ff4444; }

/* Question block */
.scoop-qblock {
    padding: 14px;
    border: 1px solid #222;
    background: #050505;
    margin-bottom: 14px;
}
.scoop-qnum   { font-size: 13px; color: #666; letter-spacing: 2px; margin: 0 0 8px; }
.scoop-prompt { font-size: 15px; color: cyan; margin: 0 0 12px; letter-spacing: 1px; }
.scoop-headline {
    font-size: 20px;
    color: #ffff00;
    line-height: 1.5;
    margin: 0;
}

/* Answer options grid */
.scoop-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.scoop-opt {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #08082a;
    border: 1px solid #0000aa;
    padding: 12px 14px;
    text-decoration: none;
    transition: background 0.12s, border-color 0.12s;
}
.scoop-opt:hover { background: #0000bb; border-color: cyan; text-decoration: none; }
.scoop-opt-ltr { color: cyan; font-size: 22px; flex-shrink: 0; width: 22px; }
.scoop-opt-txt { color: white; font-size: 15px; letter-spacing: 1px; }

/* Results */
.scoop-results    { padding: 4px; }
.scoop-score-big  { font-size: 30px; color: white; margin: 0 0 6px; }
.scoop-score-sub  { font-size: 18px; color: #888; margin: 0 0 12px; }
.scoop-verdict    { font-size: 20px; margin: 0 0 20px; letter-spacing: 1px; }
.scoop-perfect    { color: #00ff00; }

/* Answer review */
.scoop-review { margin: 0 0 22px; border-top: 1px solid #222; padding-top: 10px; }
.scoop-rv {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 7px 0;
    border-bottom: 1px solid #111;
    font-size: 13px;
}
.scoop-rv-right .scoop-rv-mark { color: #00ff00; flex-shrink: 0; }
.scoop-rv-wrong .scoop-rv-mark { color: #ff4444; flex-shrink: 0; }
.scoop-rv-cat   { color: cyan; white-space: nowrap; flex-shrink: 0; min-width: 110px; }
.scoop-rv-title { color: #bbb; }

/* Responsive */
@media (max-width: 640px) {
    .scoop-logo    { font-size: 38px; }
    .scoop-options { grid-template-columns: 1fr; }
    .scoop-headline{ font-size: 17px; }
    .scoop-score-big { font-size: 24px; }
    .scoop-rv      { flex-wrap: wrap; }
    .scoop-rv-cat  { min-width: 0; }
}
@media (max-width: 430px) {
    .scoop-logo    { font-size: 30px; }
    .scoop-sub     { font-size: 14px; }
    .scoop-btn     { font-size: 18px; padding: 10px 18px; }
}

/* =====================================================================
   FUN & GAMES — ARCADE VISUAL REDESIGN
   ===================================================================== */

.fg-arcade { font-family: 'Teletext50', monospace; }

/* Arcade attract header */
.fg-arcade-header {
    background: #000;
    border: 3px solid #ffff00;
    padding: 14px 12px 10px;
    text-align: center;
    margin-bottom: 20px;
}
.fg-arcade-header::before,
.fg-arcade-header::after {
    content: '\2605 \2605 \2605 \2605 \2605 \2605 \2605 \2605 \2605 \2605 \2605 \2605 \2605 \2605 \2605';
    display: block;
    font-size: 13px;
    color: #ffff00;
    letter-spacing: 3px;
    line-height: 1.8;
}
.fg-arcade-title {
    font-size: 48px;
    display: block;
    line-height: 1.1;
    margin: 4px 0;
}
.fg-at-fun   { color: #ff4444; }
.fg-at-amp   { color: #ffff00; }
.fg-at-games { color: #00ff00; }

.fg-press-start {
    font-size: 15px;
    color: #00ffff;
    letter-spacing: 3px;
    display: block;
    margin-top: 6px;
    animation: fg-blink 1s step-end infinite;
}
@keyframes fg-blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* Section headings */
.fg-cat-head {
    font-size: 13px;
    letter-spacing: 3px;
    padding: 6px 0;
    margin: 14px 0 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.fg-cat-head::after {
    content: '';
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.25;
}

/* Game cards grid */
.fg-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(195px, 1fr));
    gap: 10px;
    margin-bottom: 10px;
}
.fg-grid-4 { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }

/* Individual card */
.fg-card {
    display: block;
    text-decoration: none;
    border: 2px solid;
    background: #050505;
    transition: transform 0.1s;
    position: relative;
    overflow: hidden;
}
.fg-card:hover { transform: translateY(-3px); text-decoration: none; }
.fg-card:active { transform: translateY(0); }

.fg-card-head {
    padding: 5px 8px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    letter-spacing: 1px;
}
.fg-card-pg { opacity: 0.6; font-size: 10px; }

.fg-card-body  { padding: 10px 10px 12px; }
.fg-card-icon  { font-size: 26px; line-height: 1; margin-bottom: 7px; display: block; }
.fg-card-name  { font-size: 17px; letter-spacing: 1px; display: block; margin-bottom: 5px; }
.fg-card-desc  { font-size: 12px; color: #777; line-height: 1.7; display: block; }

.fg-live-badge { background: #cc0000; color: white; font-size: 10px; padding: 1px 5px; }
.fg-soon-badge { background: #1a1a1a; color: #444;  font-size: 10px; padding: 1px 5px; }

/* Quiz cards — NES yellow */
.fg-card-quiz             { border-color: #ccaa00; }
.fg-card-quiz .fg-card-head  { background: #ccaa00; color: #000; }
.fg-card-quiz .fg-card-name  { color: #ffdd00; }
.fg-card-quiz:hover          { box-shadow: 0 4px 14px rgba(255,204,0,.25); }

/* Board games — Mega Drive blue */
.fg-card-board             { border-color: #2255cc; }
.fg-card-board .fg-card-head { background: #2255cc; color: #fff; }
.fg-card-board .fg-card-name { color: #5599ff; }
.fg-card-board:hover         { box-shadow: 0 4px 14px rgba(51,102,204,.3); }

/* Card games — Atari green */
.fg-card-cards             { border-color: #009933; }
.fg-card-cards .fg-card-head { background: #009933; color: #000; }
.fg-card-cards .fg-card-name { color: #00ee44; }
.fg-card-cards:hover         { box-shadow: 0 4px 14px rgba(0,204,68,.2); }

/* Stats — SNES orange */
.fg-card-stats             { border-color: #cc5500; }
.fg-card-stats .fg-card-head { background: #cc5500; color: #000; }
.fg-card-stats .fg-card-name { color: #ff8833; }
.fg-card-stats:hover         { box-shadow: 0 4px 14px rgba(255,102,0,.2); }

.fg-bottom-strip {
    text-align: center;
    font-size: 15px;
    color: #ffff00;
    letter-spacing: 4px;
    padding: 14px;
    border-top: 1px solid #222;
    margin-top: 10px;
    animation: fg-blink 1.2s step-end infinite;
}

/* Responsive */
@media (max-width: 640px) {
    .fg-arcade-title    { font-size: 34px; }
    .fg-grid            { grid-template-columns: repeat(auto-fill, minmax(155px, 1fr)); }
    .fg-card-name       { font-size: 15px; }
}
@media (max-width: 430px) {
    .fg-arcade-title    { font-size: 26px; }
    .fg-grid, .fg-grid-4{ grid-template-columns: repeat(2, 1fr); }
}

/* =====================================================================
   CEEFAX CHESS
   ===================================================================== */

.cxc-wrap {
    font-family: 'Teletext50', monospace;
    /* Board cell scales to whichever is tighter — viewport width or height —
       so the board never runs under the fixed footer on short/landscape
       screens. Capped at 52px, never smaller than 22px.
       Height reserve (~430px) accounts for the fixed header, the chess
       header/turn strips, the file labels and the fixed footer. */
    --cell: clamp(22px, min((100vw - 48px) / 8, (100vh  - 430px) / 8), 52px);
    --cell: clamp(22px, min((100vw - 48px) / 8, (100dvh - 430px) / 8), 52px);
    --gutter: 26px;               /* rank-label column width incl. spacing  */
    --frame: 3px;                 /* board border width                     */
}

/* Yellow teletext header strip (matches search panel house style) */
.cxc-header {
    background: #ffff00;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    letter-spacing: 2px;
}
.cxc-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.cxc-pg    { color: #000; font-size: 13px; opacity: 0.7; }

/* Live turn / state strip on black */
.cxc-turn {
    font-size: 16px;
    letter-spacing: 2px;
    padding: 8px 12px;
    margin-bottom: 14px;
    border-bottom: 1px solid #1a1a1a;
}
.cxc-st-you   { color: #ffff00; }
.cxc-st-cpu   { color: #00ffff; }
.cxc-st-check { color: #ff4444; }
.cxc-st-win   { color: #00ff66; }
.cxc-st-draw  { color: #ffaa00; }

.cxc-body {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

/* Board area */
.cxc-board-area {
    display: flex;
    gap: 0;
    align-items: flex-start;
}

.cxc-ranks {
    display: flex;
    flex-direction: column;
    font-size: 13px;
    color: #00ffff;
    width: var(--gutter);
    padding-right: 10px;          /* space between numbers and the board */
    box-sizing: border-box;
    margin-top: var(--frame);     /* align with row centres past the top border */
    text-align: right;
    flex-shrink: 0;
}
.cxc-ranks span {
    height: var(--cell);
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.cxc-board {
    display: grid;
    grid-template-columns: repeat(8, var(--cell));
    grid-template-rows: repeat(8, var(--cell));
    border: var(--frame) solid #00ffff;
    box-shadow: 0 0 0 3px #000, 0 0 0 5px #004444;   /* chunky double frame */
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    outline: none;
}

.cxc-cell {
    width: var(--cell);
    height: var(--cell);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--cell) * 0.7);
    line-height: 1;
    position: relative;
    box-sizing: border-box;
}
/* Cyan/blue-on-black teletext board */
.cxc-light { background: #15807f; }   /* cyan-grey */
.cxc-dark  { background: #000099; }   /* deep blue */

/* Last-move tint — overlay so it never conflicts with other rings */
.cxc-last::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 204, 0, 0.22);
    pointer-events: none;
}

/* Hard-edged blocky state rings (teletext — solid, no glow) */
.cxc-sel    { box-shadow: inset 0 0 0 4px #00ff66; }
.cxc-cap    { box-shadow: inset 0 0 0 4px #00ffff; }   /* capturable target */
.cxc-check  { box-shadow: inset 0 0 0 4px #ff2222; animation: cxc-pulse 0.7s step-end infinite; }
/* Keyboard cursor — only shown once the player uses a board key (.cxc-kb),
   so mouse/touch players don't see a confusing blinking square on one piece.
   Uses outline so it stacks on top of any other ring. */
.cxc-board.cxc-kb .cxc-cursor { outline: 3px solid #ffff00; outline-offset: -3px; animation: cxc-blink 0.8s step-end infinite; }
@keyframes cxc-blink { 0%,100%{outline-color:#ffff00} 50%{outline-color:transparent} }
@keyframes cxc-pulse { 0%,100%{box-shadow:inset 0 0 0 4px #ff2222} 50%{box-shadow:inset 0 0 0 4px #660000} }

/* Solid square move-marker (teletext mosaic block, not a soft dot) */
.cxc-dot {
    position: absolute;
    width: calc(var(--cell) * 0.34);
    height: calc(var(--cell) * 0.34);
    background: #00ffff;
    pointer-events: none;
}

/* Piece colours: player=red, computer=white */
.cxc-pw { color: #ff2222; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.cxc-pb { color: #ffffff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }

/* File labels: a grid that mirrors the board's 8 columns exactly, shifted
   right by the rank gutter + board border so each letter centres on its column. */
.cxc-files {
    display: grid;
    grid-template-columns: repeat(8, var(--cell));
    margin-left: calc(var(--gutter) + var(--frame));
    margin-top: 10px;          /* clear the board's border + glow frame */
}
.cxc-files span {
    text-align: center;
    font-size: 13px;
    color: #00ffff;
}

/* Right panel */
.cxc-right { min-width: 170px; flex-shrink: 0; }

.cxc-key { margin-bottom: 12px; display: flex; gap: 16px; align-items: flex-start; }
.cxc-key-types { flex-shrink: 0; }
.cxc-key-title { color: #ffff00; font-size: 15px; letter-spacing: 2px; margin: 0 0 5px; }
.cxc-kr        { font-size: 13px; color: #ccc; margin: 2px 0; display: flex; align-items: center; gap: 6px; }
.cxc-kw        { color: #00ffff; font-size: 18px; }
.cxc-kred      { color: #ff2222; font-size: 14px; }
.cxc-kwhite    { color: #ffffff; font-size: 14px; }

/* Captured-piece trays (right of the piece-type key) */
.cxc-captures   { flex: 1; min-width: 0; }
.cxc-cap-title  { color: #ffff00; font-size: 15px; letter-spacing: 2px; margin: 0 0 5px; }
.cxc-cap-tray   { margin-bottom: 10px; }
.cxc-cap-label  { font-size: 12px; color: #ccc; margin: 0 0 4px; display: flex; align-items: center; gap: 6px; letter-spacing: 0.5px; }
.cxc-cap-pieces {
    min-height: 26px;
    font-size: 20px;
    line-height: 1.15;
    word-break: break-word;
    border: 1px solid #1c1c1c;
    background: #050505;
    padding: 3px 6px;
}

.cxc-status { min-height: 26px; margin-bottom: 10px; font-size: 14px; letter-spacing: 1px; }
.cxc-status p { margin: 0; }

.cxc-input-block  { margin-bottom: 12px; }
.cxc-input-label  { font-size: 12px; color: #00ffff; margin: 0 0 5px; letter-spacing: 1px; }
.cxc-input-row    { display: flex; gap: 5px; }
.cxc-input {
    background: #001600;
    border: none;
    border-bottom: 2px solid #00cc00;
    color: #00ff44;
    font-family: 'Teletext50', monospace;
    font-size: 15px;
    padding: 5px 7px;
    width: 90px;
    letter-spacing: 2px;
    text-transform: uppercase;
    outline: none;
}
.cxc-input::placeholder { color: #024d02; }
.cxc-input:focus { border-bottom-color: #00ffff; }
.cxc-go-btn {
    background: #0000cc;
    color: #ffff00;
    border: 1px solid #0000ff;
    font-family: 'Teletext50', monospace;
    font-size: 13px;
    padding: 5px 12px;
    cursor: pointer;
    letter-spacing: 2px;
}
.cxc-go-btn:hover { background: #0000ff; color: #fff; }

.cxc-new-btn {
    width: 100%;
    background: #003a00;
    color: #00ff66;
    border: 1px solid #00ff66;
    font-family: 'Teletext50', monospace;
    font-size: 15px;
    padding: 8px 10px;
    cursor: pointer;
    letter-spacing: 1px;
    margin-bottom: 10px;
}
.cxc-new-btn:hover { background: #005500; color: #fff; }

/* Back to Fun & Games — matches the teletext button styling, cyan to read as nav */
.cxc-back {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
    background: #001a1a;
    color: #00ffff;
    border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 8px 10px;
    margin-bottom: 10px;
    text-decoration: none;
}
.cxc-back:hover { background: #003333; color: #fff; text-decoration: none; }

.cxc-help   { font-size: 11px; color: #888; line-height: 1.5; margin: 0 0 10px; letter-spacing: 0.5px; }
.cxc-help strong { color: #00ffff; letter-spacing: 1px; }
.cxc-credit { font-size: 10px; color: #555; margin: 0; }

/* Ghost piece while dragging (size set inline by JS) */
.cxc-ghost {
    position: fixed;
    pointer-events: none;
    z-index: 9999;
    display: none;
    line-height: 1;
    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000;
}

/* Promotion chooser overlay */
.cxc-promo {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
}
.cxc-promo[hidden] { display: none; }
.cxc-promo-box {
    background: #000;
    border: 3px solid #00ffff;
    box-shadow: 0 0 0 3px #004444;
    padding: 16px 18px;
    text-align: center;
}
.cxc-promo-title { color: #ffff00; font-size: 16px; letter-spacing: 2px; margin: 0 0 12px; }
.cxc-promo-row   { display: flex; gap: 10px; }
.cxc-promo-btn {
    background: #000099;
    border: 1px solid #00ffff;
    color: #ff2222;
    font-family: 'Teletext50', monospace;
    font-size: 34px;
    line-height: 1;
    width: 60px;
    height: 70px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.cxc-promo-btn span { font-size: 12px; color: #00ffff; letter-spacing: 1px; }
.cxc-promo-btn:hover,
.cxc-promo-btn:focus { background: #0000ff; outline: 2px solid #ffff00; outline-offset: -2px; }

/* Screen-reader-only live region */
.cxc-sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Reduced-motion: kill blinking/pulsing */
@media (prefers-reduced-motion: reduce) {
    .cxc-cursor, .cxc-check { animation: none; }
}

/* Responsive — drive the whole board off the --cell variable */
@media (max-width: 768px) {
    .cxc-body  { flex-direction: column; }
    .cxc-right { width: 100%; min-width: 0; }
}
@media (max-width: 640px) {
    .cxc-title { font-size: 18px; }
}
@media (max-width: 430px) {
    .cxc-ranks span { font-size: 11px; }
    .cxc-files span { font-size: 11px; }
}

/* =====================================================================
   8-BIT BATTLESHIPS
   ===================================================================== */

.bs-wrap {
    font-family: 'Teletext50', monospace;
    /* Cell scales to the tighter of width (two grids side by side) or height
       (one grid), so the board never runs under the fixed footer. */
    --bs-cell: clamp(18px, min((100vw - 96px) / 21, (100dvh - 380px) / 12), 34px);
    --bs-gutter: 20px;
    --bs-frame: 2px;
}

/* Yellow header strip */
.bs-header {
    background: #ffff00;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    letter-spacing: 2px;
}
.bs-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.bs-pg    { color: #000; font-size: 13px; opacity: 0.7; }

/* Turn / status strip */
.bs-turn {
    font-size: 16px;
    letter-spacing: 2px;
    padding: 8px 12px;
    margin-bottom: 12px;
    border-bottom: 1px solid #1a1a1a;
}
.bs-st-setup { color: #ffff00; }
.bs-st-you   { color: #ffff00; }
.bs-st-cpu   { color: #00ffff; }
.bs-st-hit   { color: #ff4444; }
.bs-st-miss  { color: #888; }
.bs-st-win   { color: #00ff66; }
.bs-st-lose  { color: #ff4444; }

.bs-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }

/* Boards */
.bs-boards { display: flex; gap: 22px; flex-wrap: wrap; }
.bs-board-col { flex-shrink: 0; }
.bs-board-label { font-size: 14px; letter-spacing: 2px; margin: 0 0 6px; }
.bs-lbl-enemy { color: #ff4444; }
.bs-lbl-own   { color: #00ff66; }

.bs-board-area { display: flex; gap: 0; align-items: flex-start; }
.bs-ranks {
    display: flex; flex-direction: column;
    width: var(--bs-gutter); padding-right: 6px; box-sizing: border-box;
    margin-top: var(--bs-frame);
    font-size: 11px; color: #00ffff; text-align: right; flex-shrink: 0;
}
.bs-ranks span { height: var(--bs-cell); display: flex; align-items: center; justify-content: flex-end; }

.bs-grid {
    display: grid;
    grid-template-columns: repeat(10, var(--bs-cell));
    grid-template-rows: repeat(10, var(--bs-cell));
    border: var(--bs-frame) solid #00aaff;
    box-shadow: 0 0 0 2px #000, 0 0 0 4px #003344;
    user-select: none; -webkit-user-select: none; touch-action: none; outline: none;
}
.bs-grid.bs-active { cursor: crosshair; }

.bs-files { display: grid; grid-template-columns: repeat(10, var(--bs-cell));
    margin-left: calc(var(--bs-gutter) + var(--bs-frame)); margin-top: 4px; }
.bs-files span { text-align: center; font-size: 11px; color: #00ffff; }
.bs-files-pad { display: none; }

/* Cells */
.bs-cell {
    width: var(--bs-cell); height: var(--bs-cell);
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--bs-cell) * 0.62); line-height: 1;
    box-sizing: border-box;
    border: 1px solid #002b55;
    position: relative;
}
.bs-water { background: #001a4d; }
.bs-ship  { background: #4a4a4a; }
.bs-ship-sel { background: #006644; box-shadow: inset 0 0 0 2px #00ff66; }
.bs-miss  { color: #66ccff; }
.bs-hit   { color: #ff3030; background: #3a0000; }
.bs-sunk  { color: #fff; background: #aa0000; }
.bs-cursor { outline: 3px solid #ffff00; outline-offset: -3px; animation: bs-blink 0.8s step-end infinite; z-index: 1; }
@keyframes bs-blink { 0%,100%{outline-color:#ffff00} 50%{outline-color:transparent} }
.bs-reveal { box-shadow: inset 0 0 0 3px #00ff66; }   /* enemy ship revealed at game end */

/* Placement preview */
.bs-prev-ok  { box-shadow: inset 0 0 0 3px #00ff66; background: #064d2e; }
.bs-prev-bad { box-shadow: inset 0 0 0 3px #ff3030; background: #4d0606; }

/* Panel */
.bs-panel { flex: 1; min-width: 200px; }
.bs-status { min-height: 26px; margin-bottom: 8px; font-size: 16px; letter-spacing: 1px; }
.bs-status p { margin: 0; }
.bs-flash { font-weight: bold; }
.bs-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.bs-diff { display: flex; gap: 6px; margin-bottom: 10px; }
.bs-diff-btn {
    flex: 1; background: #0a0a0a; border: 1px solid #333; color: #888;
    font-family: 'Teletext50', monospace; font-size: 13px; letter-spacing: 1px;
    padding: 6px 4px; cursor: pointer;
}
.bs-diff-btn.active { background: #ffff00; color: #000; border-color: #ffff00; }
.bs-diff-btn:hover:not(.active) { border-color: #666; color: #ccc; }

.bs-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.bs-btn:hover { background: #003333; color: #fff; }
.bs-btn-go  { background: #003a00; color: #00ff66; border-color: #00ff66; }
.bs-btn-go:hover { background: #005500; color: #fff; }
.bs-btn-new { background: #1a1a00; color: #ffff00; border-color: #ffff00; }
.bs-btn-new:hover { background: #333300; color: #fff; }
.bs-hint { font-size: 11px; color: #888; margin: 2px 0 0; letter-spacing: 0.5px; }

/* Fleet status */
.bs-fleet-list { margin-bottom: 6px; }
.bs-fleet-row  { font-size: 13px; color: #ccc; margin: 2px 0; letter-spacing: 1px; }
.bs-fleet-pips { color: #4aa3ff; letter-spacing: -1px; }
.bs-fleet-sunk { color: #663333; text-decoration: line-through; }
.bs-fleet-sunk .bs-fleet-pips { color: #663333; }

/* Key */
.bs-key { margin-bottom: 10px; }
.bs-kr { font-size: 13px; color: #ccc; margin: 2px 0; display: flex; align-items: center; gap: 6px; }
.bs-k-hit  { color: #ff3030; font-size: 16px; }
.bs-k-miss { color: #66ccff; font-size: 16px; }
.bs-k-ship { color: #4a4a4a; font-size: 16px; -webkit-text-stroke: 1px #888; }
.bs-k-sunk { color: #fff; font-size: 16px; }

.bs-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.bs-back:hover { background: #003333; color: #fff; text-decoration: none; }

.bs-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.bs-help strong { color: #00ffff; letter-spacing: 1px; }

.bs-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { .bs-cursor { animation: none; } }

/* Stack the two boards on narrower screens; give cells more room */
@media (max-width: 820px) {
    .bs-wrap { --bs-cell: clamp(20px, min((100vw - 56px) / 11, (100dvh - 300px) / 13), 34px); }
    .bs-panel { flex-basis: 100%; }
}
@media (max-width: 430px) {
    .bs-title { font-size: 17px; }
}

/* =====================================================================
   8-BIT DRAUGHTS
   ===================================================================== */

.dr-wrap {
    font-family: 'Teletext50', monospace;
    --dr-cell: clamp(26px, min((100vw - 60px) / 8, (100vh  - 430px) / 8), 54px);
    --dr-cell: clamp(26px, min((100vw - 60px) / 8, (100dvh - 430px) / 8), 54px);
    --dr-gutter: 26px;
    --dr-frame: 3px;
}

.dr-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.dr-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.dr-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.dr-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
}
.dr-st-you  { color: #ffff00; }
.dr-st-cpu  { color: #00ffff; }
.dr-st-hit  { color: #ff4444; }
.dr-st-win  { color: #00ff66; }
.dr-st-lose { color: #ff4444; }
.dr-st-draw { color: #ffaa00; }

.dr-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }

/* Board */
.dr-board-area { display: flex; gap: 0; align-items: flex-start; }
.dr-ranks {
    display: flex; flex-direction: column;
    width: var(--dr-gutter); padding-right: 10px; box-sizing: border-box;
    margin-top: var(--dr-frame);
    font-size: 13px; color: #00ffff; text-align: right; flex-shrink: 0;
}
.dr-ranks span { height: var(--dr-cell); display: flex; align-items: center; justify-content: flex-end; }

.dr-board {
    display: grid;
    grid-template-columns: repeat(8, var(--dr-cell));
    grid-template-rows: repeat(8, var(--dr-cell));
    border: var(--dr-frame) solid #00ffff;
    box-shadow: 0 0 0 3px #000, 0 0 0 5px #004444;
    user-select: none; -webkit-user-select: none; touch-action: none; outline: none;
}
.dr-cell {
    width: var(--dr-cell); height: var(--dr-cell);
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; position: relative;
}
.dr-light { background: #15807f; }
.dr-dark  { background: #000099; cursor: pointer; }

.dr-sel    { box-shadow: inset 0 0 0 4px #00ff66; }
.dr-target { box-shadow: inset 0 0 0 4px #00ffff; }
.dr-last::before { content: ''; position: absolute; inset: 0; background: rgba(255,204,0,0.20); pointer-events: none; }
.dr-board.dr-kb .dr-cursor { outline: 3px solid #ffff00; outline-offset: -3px; animation: dr-blink 0.8s step-end infinite; z-index: 1; }
@keyframes dr-blink { 0%,100%{outline-color:#ffff00} 50%{outline-color:transparent} }

/* Pieces */
.dr-piece {
    width: 74%; height: 74%; border-radius: 50%;
    box-sizing: border-box; position: relative;
}
.dr-r { background: radial-gradient(circle at 35% 30%, #ff6a6a, #cc0000 72%); border: 1px solid #7a0000; }
.dr-w { background: radial-gradient(circle at 35% 30%, #ffffff, #b6b6b6 72%); border: 1px solid #6a6a6a; }
.dr-king { box-shadow: inset 0 0 0 2px #ffd700; }
.dr-king::after {
    content: 'K'; position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Teletext50', monospace; font-size: calc(var(--dr-cell) * 0.36);
    color: #ffd700; text-shadow: 0 0 1px #000;
}

.dr-files { display: grid; grid-template-columns: repeat(8, var(--dr-cell));
    margin-left: calc(var(--dr-gutter) + var(--dr-frame)); margin-top: 4px; }
.dr-files span { text-align: center; font-size: 13px; color: #00ffff; }
.dr-files-pad { display: none; }

/* Panel */
.dr-panel { flex: 1; min-width: 190px; }
.dr-status { min-height: 26px; margin-bottom: 8px; font-size: 16px; letter-spacing: 1px; }
.dr-status p { margin: 0; }
.dr-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.dr-diff { display: flex; gap: 6px; margin-bottom: 10px; }
.dr-diff-btn {
    flex: 1; background: #0a0a0a; border: 1px solid #333; color: #888;
    font-family: 'Teletext50', monospace; font-size: 13px; letter-spacing: 1px;
    padding: 6px 4px; cursor: pointer;
}
.dr-diff-btn.active { background: #ffff00; color: #000; border-color: #ffff00; }
.dr-diff-btn:hover:not(.active) { border-color: #666; color: #ccc; }

.dr-counts { margin-bottom: 8px; }
.dr-count-row { font-size: 12px; color: #ccc; margin: 3px 0; display: flex; align-items: center; gap: 6px; letter-spacing: 1px; }

.dr-key { margin-bottom: 10px; }
.dr-kr { font-size: 13px; color: #ccc; margin: 3px 0; display: flex; align-items: center; gap: 8px; }
.dr-chip { width: 16px; height: 16px; border-radius: 50%; display: inline-block; position: relative; flex-shrink: 0; }
.dr-chip.dr-r { background: radial-gradient(circle at 35% 30%, #ff6a6a, #cc0000 72%); border: 1px solid #7a0000; }
.dr-chip.dr-w { background: radial-gradient(circle at 35% 30%, #ffffff, #b6b6b6 72%); border: 1px solid #6a6a6a; }
.dr-chip.dr-king { box-shadow: inset 0 0 0 2px #ffd700; }

.dr-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.dr-btn:hover { background: #333300; color: #fff; }

.dr-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.dr-back:hover { background: #003333; color: #fff; text-decoration: none; }

.dr-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.dr-help strong { color: #00ffff; letter-spacing: 1px; }

.dr-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { .dr-board.dr-kb .dr-cursor { animation: none; } }
@media (max-width: 768px) { .dr-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .dr-title { font-size: 17px; } }

/* =====================================================================
   8-BIT OTHELLO
   ===================================================================== */

.ot-wrap {
    font-family: 'Teletext50', monospace;
    --ot-cell: clamp(26px, min((100vw - 60px) / 8, (100vh  - 430px) / 8), 54px);
    --ot-cell: clamp(26px, min((100vw - 60px) / 8, (100dvh - 430px) / 8), 54px);
    --ot-gutter: 26px;
    --ot-frame: 3px;
}

.ot-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.ot-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.ot-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.ot-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
}
.ot-st-you  { color: #ffff00; }
.ot-st-cpu  { color: #00ffff; }
.ot-st-win  { color: #00ff66; }
.ot-st-lose { color: #ff4444; }
.ot-st-draw { color: #ffaa00; }

.ot-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }

/* Board */
.ot-board-area { display: flex; gap: 0; align-items: flex-start; }
.ot-ranks {
    display: flex; flex-direction: column;
    width: var(--ot-gutter); padding-right: 10px; box-sizing: border-box;
    margin-top: var(--ot-frame);
    font-size: 13px; color: #00ffff; text-align: right; flex-shrink: 0;
}
.ot-ranks span { height: var(--ot-cell); display: flex; align-items: center; justify-content: flex-end; }

.ot-board {
    display: grid;
    grid-template-columns: repeat(8, var(--ot-cell));
    grid-template-rows: repeat(8, var(--ot-cell));
    border: var(--ot-frame) solid #00ffff;
    box-shadow: 0 0 0 3px #000, 0 0 0 5px #004444;
    user-select: none; -webkit-user-select: none; touch-action: none; outline: none;
}
.ot-cell {
    width: var(--ot-cell); height: var(--ot-cell);
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; position: relative;
    background: #006622; border: 1px solid #00431a; cursor: pointer;
}
.ot-legal:hover { background: #008833; }
.ot-last::before { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px #ffd700; pointer-events: none; }
.ot-board.ot-kb .ot-cursor { outline: 3px solid #ffff00; outline-offset: -3px; animation: ot-blink 0.8s step-end infinite; z-index: 1; }
@keyframes ot-blink { 0%,100%{outline-color:#ffff00} 50%{outline-color:transparent} }

/* Discs */
.ot-disc { width: 78%; height: 78%; border-radius: 50%; box-sizing: border-box; }
.ot-r { background: radial-gradient(circle at 35% 30%, #ff6a6a, #cc0000 72%); border: 1px solid #7a0000; }
.ot-w { background: radial-gradient(circle at 35% 30%, #ffffff, #b6b6b6 72%); border: 1px solid #6a6a6a; }
.ot-hint { width: 30%; height: 30%; border-radius: 50%; background: rgba(255,255,0,0.55); pointer-events: none; }

.ot-files { display: grid; grid-template-columns: repeat(8, var(--ot-cell));
    margin-left: calc(var(--ot-gutter) + var(--ot-frame)); margin-top: 4px; }
.ot-files span { text-align: center; font-size: 13px; color: #00ffff; }
.ot-files-pad { display: none; }

/* Panel */
.ot-panel { flex: 1; min-width: 190px; }
.ot-status { min-height: 26px; margin-bottom: 8px; font-size: 16px; letter-spacing: 1px; }
.ot-status p { margin: 0; }
.ot-score { font-size: 22px; color: #fff; margin-bottom: 10px; display: flex; align-items: center; gap: 4px; }
.ot-score b { font-size: 24px; }
.ot-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.ot-diff { display: flex; gap: 6px; margin-bottom: 10px; }
.ot-diff-btn {
    flex: 1; background: #0a0a0a; border: 1px solid #333; color: #888;
    font-family: 'Teletext50', monospace; font-size: 13px; letter-spacing: 1px;
    padding: 6px 4px; cursor: pointer;
}
.ot-diff-btn.active { background: #ffff00; color: #000; border-color: #ffff00; }
.ot-diff-btn:hover:not(.active) { border-color: #666; color: #ccc; }

.ot-key { margin-bottom: 10px; }
.ot-kr { font-size: 13px; color: #ccc; margin: 3px 0; display: flex; align-items: center; gap: 8px; }
.ot-chip { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.ot-chip.ot-r { background: radial-gradient(circle at 35% 30%, #ff6a6a, #cc0000 72%); border: 1px solid #7a0000; }
.ot-chip.ot-w { background: radial-gradient(circle at 35% 30%, #ffffff, #b6b6b6 72%); border: 1px solid #6a6a6a; }
.ot-hint-chip { width: 16px; height: 16px; border-radius: 50%; background: #006622; display: inline-block; flex-shrink: 0; position: relative; border: 1px solid #00431a; }
.ot-hint-chip::after { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,0,0.7); transform: translate(-50%,-50%); }

.ot-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.ot-btn:hover { background: #333300; color: #fff; }

.ot-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.ot-back:hover { background: #003333; color: #fff; text-decoration: none; }

.ot-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.ot-help strong { color: #00ffff; letter-spacing: 1px; }

.ot-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { .ot-board.ot-kb .ot-cursor { animation: none; } }
@media (max-width: 768px) { .ot-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .ot-title { font-size: 17px; } }

/* =====================================================================
   8-BIT CONNECT 4
   ===================================================================== */

.c4-wrap {
    font-family: 'Teletext50', monospace;
    --c4-cell: clamp(28px, min((100vw - 40px) / 7, (100vh  - 400px) / 7), 58px);
    --c4-cell: clamp(28px, min((100vw - 40px) / 7, (100dvh - 400px) / 7), 58px);
}

.c4-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.c4-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.c4-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.c4-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
}
.c4-st-you  { color: #ffff00; }
.c4-st-cpu  { color: #00ffff; }
.c4-st-win  { color: #00ff66; }
.c4-st-lose { color: #ff4444; }
.c4-st-draw { color: #ffaa00; }

.c4-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.c4-left { flex-shrink: 0; }

/* Drop arrows */
.c4-drops { display: grid; grid-template-columns: repeat(7, var(--c4-cell)); margin-bottom: 2px; }
.c4-drop { height: 20px; display: flex; align-items: center; justify-content: center; color: #ffff00; font-size: 16px; }
.c4-drop-on { animation: c4-bob 0.7s ease-in-out infinite; }
@keyframes c4-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }

/* Board */
.c4-board {
    display: grid;
    grid-template-columns: repeat(7, var(--c4-cell));
    grid-template-rows: repeat(6, var(--c4-cell));
    background: #0000bb;
    border: 3px solid #3333ff;
    box-shadow: 0 0 0 3px #000, 0 0 0 5px #000044;
    user-select: none; -webkit-user-select: none; touch-action: none; outline: none;
}
.c4-cell {
    width: var(--c4-cell); height: var(--c4-cell);
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; cursor: pointer;
}
.c4-colhi { background: rgba(255,255,255,0.10); }
.c4-disc { width: 80%; height: 80%; border-radius: 50%; box-sizing: border-box; }
.c4-empty { background: #000033; box-shadow: inset 0 2px 3px #000; }
.c4-r { background: radial-gradient(circle at 35% 30%, #ff6a6a, #cc0000 72%); border: 1px solid #7a0000; }
.c4-y { background: radial-gradient(circle at 35% 30%, #ffe96a, #d4b400 72%); border: 1px solid #8a7000; }
.c4-win { box-shadow: 0 0 0 3px #00ff66, 0 0 8px #00ff66; animation: c4-pulse 0.6s step-end infinite; }
@keyframes c4-pulse { 0%,100%{opacity:1} 50%{opacity:0.55} }
.c4-board.c4-kb .c4-colhi { background: rgba(255,255,0,0.16); }

.c4-files { display: grid; grid-template-columns: repeat(7, var(--c4-cell)); margin-top: 4px; }
.c4-files span { text-align: center; font-size: 13px; color: #6699ff; }

/* Panel */
.c4-panel { flex: 1; min-width: 190px; }
.c4-status { min-height: 26px; margin-bottom: 8px; font-size: 16px; letter-spacing: 1px; }
.c4-status p { margin: 0; }
.c4-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.c4-diff { display: flex; gap: 6px; margin-bottom: 10px; }
.c4-diff-btn {
    flex: 1; background: #0a0a0a; border: 1px solid #333; color: #888;
    font-family: 'Teletext50', monospace; font-size: 13px; letter-spacing: 1px;
    padding: 6px 4px; cursor: pointer;
}
.c4-diff-btn.active { background: #ffff00; color: #000; border-color: #ffff00; }
.c4-diff-btn:hover:not(.active) { border-color: #666; color: #ccc; }

.c4-key { margin-bottom: 10px; }
.c4-kr { font-size: 13px; color: #ccc; margin: 3px 0; display: flex; align-items: center; gap: 8px; }
.c4-chip { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.c4-chip.c4-r { background: radial-gradient(circle at 35% 30%, #ff6a6a, #cc0000 72%); border: 1px solid #7a0000; }
.c4-chip.c4-y { background: radial-gradient(circle at 35% 30%, #ffe96a, #d4b400 72%); border: 1px solid #8a7000; }

.c4-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.c4-btn:hover { background: #333300; color: #fff; }

.c4-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.c4-back:hover { background: #003333; color: #fff; text-decoration: none; }

.c4-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.c4-help strong { color: #00ffff; letter-spacing: 1px; }

.c4-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { .c4-drop-on, .c4-win { animation: none; } }
@media (max-width: 768px) { .c4-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .c4-title { font-size: 17px; } }

/* =====================================================================
   SEARCH PAGE
   ===================================================================== */

/* Top-bar search link — cyan to distinguish from ADVERTISE/CONTACT */
.top-bar-search         { color: #00ffff !important; }
.top-bar-search:hover   { color: #fff !important; }
.top-bar-search.active  { color: #ffff00 !important; }

.srch-wrap {
    font-family: 'Teletext50', monospace;
}

.srch-loading {
    color: #ffff00;
    font-size: 14px;
    letter-spacing: 3px;
    padding: 24px 12px;
    font-family: 'Teletext50', monospace;
    animation: srch-blink 0.8s step-end infinite;
}
@keyframes srch-blink { 0%,100%{opacity:1} 50%{opacity:.3} }

/* ── Yellow header strip ── */
.srch-hdr {
    background: #ffff00;
    color: #000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 12px;
    font-size: 17px;
    letter-spacing: 2px;
}
.srch-hdr-pg { font-size: 13px; opacity: 0.7; }

/* ── Input row ── */
.srch-form { background: #000; }
.srch-inputrow {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 12px;
    border-bottom: 1px solid #1a1a1a;
}
.srch-arrow { color: #ffff00; font-size: 18px; flex-shrink: 0; }
.srch-label { color: #00ffff; font-size: 14px; letter-spacing: 1px; flex-shrink: 0; }
.srch-input {
    flex: 1;
    background: #001600;
    border: none;
    border-bottom: 2px solid #00cc00;
    color: #00ff44;
    font-family: 'Teletext50', monospace;
    font-size: 15px;
    padding: 4px 8px;
    letter-spacing: 2px;
    outline: none;
    text-transform: uppercase;
}
.srch-input::placeholder { color: #002200; }
.srch-btn {
    background: #0000cc;
    color: #ffff00;
    border: 1px solid #0000ff;
    font-family: 'Teletext50', monospace;
    font-size: 13px;
    padding: 5px 14px;
    cursor: pointer;
    letter-spacing: 2px;
    flex-shrink: 0;
}
.srch-btn:hover { background: #0000ff; }

/* ── Category filter pills ── */
.srch-filters {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 10px 12px;
    background: #020206;
    border-bottom: 1px solid #111;
}
.srch-filter {
    background: #0a0a0a;
    border: 1px solid #222;
    color: #555;
    font-family: 'Teletext50', monospace;
    font-size: 11px;
    padding: 3px 10px;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.1s;
}
.srch-filter.active       { background: #ffff00; color: #000; border-color: #ffff00; }
.srch-filter:hover:not(.active) { border-color: #666; color: #bbb; }

/* ── Results header ── */
.srch-results-hdr {
    display: flex;
    justify-content: space-between;
    padding: 8px 12px 4px;
    font-size: 11px;
    color: #444;
    letter-spacing: 2px;
    border-bottom: 1px solid #0d0d0d;
}

/* ── Individual result row ── */
.srch-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-bottom: 1px solid #0d0d0d;
    text-decoration: none;
    background: #000;
    transition: background 0.1s;
}
.srch-result:hover             { background: #08081a; }
.srch-pgref                    { color: #00ffff; font-size: 12px; width: 38px; flex-shrink: 0; letter-spacing: 1px; }
.srch-dot                      { color: #1a1a1a; flex-shrink: 0; font-size: 10px; }
.srch-title                    { color: #fff; font-size: 13px; letter-spacing: 1px; line-height: 1.5; flex: 1; }
.srch-result:hover .srch-title { color: #ffffaa; }
.srch-badge {
    font-size: 10px;
    color: #000;
    padding: 1px 5px;
    white-space: nowrap;
    flex-shrink: 0;
    letter-spacing: 1px;
    min-width: 74px;        /* widest label is POLITICS/BUSINESS — keeps column fixed */
    text-align: center;
}
.srch-date { color: #333; font-size: 11px; flex-shrink: 0; white-space: nowrap; min-width: 88px; text-align: right; }

/* Badge colours by category */
.srch-bc-news    { background: #cc6600; color: #000; }
.srch-bc-uknews  { background: #cc8800; color: #000; }
.srch-bc-sport   { background: #0055cc; color: #fff; }
.srch-bc-world   { background: #005500; color: #fff; }
.srch-bc-biz     { background: #005555; color: #fff; }
.srch-bc-tech    { background: #440066; color: #fff; }
.srch-bc-sci     { background: #004488; color: #fff; }
.srch-bc-health  { background: #660044; color: #fff; }
.srch-bc-ent     { background: #662200; color: #fff; }
.srch-bc-arts    { background: #663300; color: #fff; }
.srch-bc-politics{ background: #880000; color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   SUB-CATEGORY BADGE COLOURS — consistent across listing pages and search
   Each subcategory has one colour so readers can recognise topics at a glance.
   Women's sport variants are a lighter/brighter shade of the men's colour.
   ══════════════════════════════════════════════════════════════════════════ */

.sub-bc-default { background: #333; color: #999; }

/* Sport */
.sub-bc-football     { background: #005500; color: #fff; }
.sub-bc-w-football   { background: #228b22; color: #fff; }
.sub-bc-rugby        { background: #7a0000; color: #fff; }
.sub-bc-w-rugby      { background: #cc2200; color: #fff; }
.sub-bc-cricket      { background: #7a5c00; color: #fff; }
.sub-bc-w-cricket    { background: #aa8800; color: #000; }
.sub-bc-tennis       { background: #666600; color: #fff; }
.sub-bc-w-tennis     { background: #999900; color: #000; }
.sub-bc-f1           { background: #cc0000; color: #fff; }
.sub-bc-golf         { background: #003344; color: #fff; }
.sub-bc-w-golf       { background: #006655; color: #fff; }
.sub-bc-boxing       { background: #550055; color: #fff; }
.sub-bc-athletics    { background: #003388; color: #fff; }
.sub-bc-w-athletics  { background: #0055aa; color: #fff; }
.sub-bc-cycling      { background: #008888; color: #fff; }
.sub-bc-horse-racing { background: #5c3300; color: #fff; }
.sub-bc-olympics     { background: #002288; color: #fff; }
.sub-bc-us-sports    { background: #880022; color: #fff; }
.sub-bc-darts        { background: #224400; color: #fff; }

/* Business */
.sub-bc-markets          { background: #006644; color: #fff; }
.sub-bc-economy          { background: #005566; color: #fff; }
.sub-bc-companies        { background: #004455; color: #fff; }
.sub-bc-energy           { background: #775500; color: #fff; }
.sub-bc-property         { background: #334400; color: #fff; }
.sub-bc-personal-finance { background: #555500; color: #fff; }

/* Technology */
.sub-bc-ai       { background: #6600aa; color: #fff; }
.sub-bc-cyber    { background: #002200; color: #00cc00; }
.sub-bc-gaming   { background: #440044; color: #fff; }
.sub-bc-mobile   { background: #003388; color: #fff; }
.sub-bc-hardware { background: #444444; color: #fff; }
.sub-bc-social   { background: #330055; color: #fff; }
.sub-bc-crypto   { background: #886600; color: #000; }
.sub-bc-startups { background: #006688; color: #fff; }

/* Science */
.sub-bc-space       { background: #000066; color: #fff; }
.sub-bc-climate     { background: #004400; color: #fff; }
.sub-bc-nature      { background: #336600; color: #fff; }
.sub-bc-medicine    { background: #660033; color: #fff; }
.sub-bc-physics     { background: #440088; color: #fff; }
.sub-bc-archaeology { background: #664422; color: #fff; }

/* Arts / Culture */
.sub-bc-tv        { background: #004488; color: #fff; }
.sub-bc-film      { background: #550000; color: #fff; }
.sub-bc-music     { background: #660066; color: #fff; }
.sub-bc-theatre   { background: #664400; color: #fff; }
.sub-bc-books     { background: #553300; color: #fff; }
.sub-bc-awards    { background: #886600; color: #000; }
.sub-bc-celebrity { background: #880044; color: #fff; }

/* Politics */
.sub-bc-uk-politics { background: #880000; color: #fff; }
.sub-bc-us-politics { background: #000088; color: #fff; }
.sub-bc-eu-politics { background: #1155aa; color: #fff; }
.sub-bc-elections   { background: #553300; color: #fff; }
.sub-bc-diplomacy   { background: #004455; color: #fff; }
.sub-bc-policy      { background: #555522; color: #fff; }
.sub-bc-scandal     { background: #660000; color: #fff; }

/* World */
.sub-bc-europe        { background: #003399; color: #fff; }
.sub-bc-north-america { background: #880022; color: #fff; }
.sub-bc-middle-east   { background: #886600; color: #000; }
.sub-bc-asia          { background: #660000; color: #fff; }
.sub-bc-africa        { background: #664400; color: #fff; }
.sub-bc-south-america { background: #006633; color: #fff; }
.sub-bc-oceania       { background: #0066aa; color: #fff; }

/* Health */
.sub-bc-nhs           { background: #003366; color: #fff; }
.sub-bc-disease       { background: #550000; color: #fff; }
.sub-bc-mental-health { background: #440055; color: #fff; }
.sub-bc-nutrition     { background: #445500; color: #fff; }
.sub-bc-lifestyle     { background: #006655; color: #fff; }
.sub-bc-research      { background: #004488; color: #fff; }

/* Top stories / Latest news */
.sub-bc-royal         { background: #886600; color: #000; }
.sub-bc-crime         { background: #550000; color: #fff; }
.sub-bc-international { background: #004455; color: #fff; }
.sub-bc-transport     { background: #003377; color: #fff; }
.sub-bc-education     { background: #335500; color: #fff; }
.sub-bc-local         { background: #555522; color: #fff; }

/* ── States ── */
.srch-error      { color: #ff4444; font-size: 14px; padding: 12px; letter-spacing: 1px; }
.srch-noresults  { color: #ffff00; font-size: 15px; padding: 20px 12px 4px; letter-spacing: 1px; }
.srch-nrsub      { color: #444;    font-size: 13px; padding: 0 12px 20px; letter-spacing: 1px; }

.srch-empty-state {
    padding: 44px 12px;
    text-align: center;
    border-bottom: 1px solid #111;
}
.srch-empty-icon  { color: #222; font-size: 36px; margin: 0 0 10px; }
.srch-empty-title { color: #444; font-size: 16px; letter-spacing: 3px; margin: 0 0 8px; }
.srch-empty-sub   { color: #333; font-size: 14px; letter-spacing: 2px; margin: 0 0 6px; }
.srch-empty-hint  { color: #222; font-size: 12px; letter-spacing: 2px; margin: 0; }

/* ── Show more button ── */
.srch-showmore {
    display: block;
    width: 100%;
    background: #000;
    color: #00ffff;
    border: none;
    border-top: 1px solid #003333;
    font-family: 'Teletext50', monospace;
    font-size: 12px;
    letter-spacing: 2px;
    padding: 11px 12px;
    cursor: pointer;
    text-align: center;
    text-transform: uppercase;
}
.srch-showmore:hover { background: #001a1a; color: #fff; }

/* ── Footer ── */
.srch-footer {
    display: flex;
    justify-content: space-between;
    padding: 10px 12px;
    font-size: 11px;
    color: #333;
    border-top: 1px solid #111;
    margin-top: 4px;
    letter-spacing: 1px;
}
.srch-footer a       { color: #00ffff; text-decoration: none; }
.srch-footer a:hover { text-decoration: underline; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .srch-date  { display: none; }
    .srch-pgref { display: none; }
    .srch-dot   { display: none; }
    .srch-title { font-size: 12px; }
    .srch-badge { font-size: 9px; }
    .srch-hdr   { font-size: 14px; }
}
@media (max-width: 430px) {
    .srch-inputrow { gap: 5px; padding: 10px 8px; }
    .srch-label    { display: none; }
    .srch-filters  { padding: 8px; gap: 3px; }
    .srch-result   { padding: 8px; }
}

/* ===== 8-BIT HANGMAN (hm-) ===== */

.hm-wrap {
    font-family: 'Teletext50', monospace;
}

.hm-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.hm-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.hm-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.hm-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
    color: #ffff00;
}
.hm-st-you  { color: #ffff00; }
.hm-st-ok   { color: #00ff66; }
.hm-st-bad  { color: #ff4444; }
.hm-st-win  { color: #00ff66; }
.hm-st-lose { color: #ff4444; }

.hm-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.hm-left { flex-shrink: 0; max-width: 100%; }

/* Gallows (blocky teletext art) */
.hm-gallows {
    font-family: 'Teletext50', monospace;
    font-size: clamp(15px, 4vw, 22px);
    line-height: 1.05; letter-spacing: 1px;
    margin: 0 0 14px; padding: 6px 4px;
    color: #00ffff; background: #000;
    min-height: 9.6em; overflow: hidden;
    user-select: none; -webkit-user-select: none;
}
.hm-g { color: #00ffff; }
.hm-m { color: #ffff00; }
.hm-gallows.hm-dead .hm-m {
    color: #ff4444;
    animation: hm-flash 0.6s step-end infinite;
}
@keyframes hm-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* Word cells */
.hm-word {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px; min-height: 40px;
}
.hm-cell {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(20px, 5.5vw, 30px); height: clamp(28px, 7vw, 38px);
    border-bottom: 3px solid #ffff00;
    font-size: clamp(16px, 4.5vw, 24px); letter-spacing: 0;
    color: #ffff00;
}
.hm-rev  { color: #00ff66; }
.hm-miss { color: #ff4444; border-bottom-color: #ff4444; }
.hm-word.hm-won .hm-cell { color: #00ff66; border-bottom-color: #00ff66; animation: hm-winflash 0.6s step-end 4; }
@keyframes hm-winflash { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* On-screen keyboard */
.hm-kb { user-select: none; -webkit-user-select: none; }
.hm-krow { display: flex; gap: 5px; justify-content: flex-start; margin-bottom: 5px; }
.hm-krow:nth-child(2) { padding-left: clamp(8px, 2vw, 16px); }
.hm-krow:nth-child(3) { padding-left: clamp(16px, 4vw, 32px); }
.hm-key {
    width: clamp(28px, 7.5vw, 40px); height: clamp(32px, 8vw, 42px);
    background: #0a0a0a; border: 1px solid #333; color: #ccc;
    font-family: 'Teletext50', monospace; font-size: clamp(13px, 3.5vw, 17px);
    letter-spacing: 0; padding: 0; cursor: pointer;
}
.hm-key:hover:not(:disabled) { border-color: #00ffff; color: #fff; }
.hm-key:disabled { cursor: default; }
.hm-key-ok  { background: #003311; color: #00ff66; border-color: #00ff66; }
.hm-key-bad { background: #330000; color: #ff4444; border-color: #ff4444; }
.hm-kb-over .hm-key:not(.hm-key-ok):not(.hm-key-bad) { opacity: 0.35; }

/* Panel */
.hm-panel { flex: 1; min-width: 190px; }
.hm-status { min-height: 26px; margin-bottom: 8px; font-size: 16px; letter-spacing: 1px; }
.hm-status p { margin: 0; }
.hm-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.hm-diff { display: flex; gap: 6px; margin-bottom: 10px; }
.hm-diff-btn {
    flex: 1; background: #0a0a0a; border: 1px solid #333; color: #888;
    font-family: 'Teletext50', monospace; font-size: 13px; letter-spacing: 1px;
    padding: 6px 4px; cursor: pointer;
}
.hm-diff-btn.active { background: #ffff00; color: #000; border-color: #ffff00; }
.hm-diff-btn:hover:not(.active) { border-color: #666; color: #ccc; }

.hm-lives { font-size: 20px; letter-spacing: 4px; margin-bottom: 6px; }
.hm-heart { color: #ff4444; }
.hm-heart-lost { color: #331111; }

.hm-misses { font-size: 16px; letter-spacing: 3px; color: #ff4444; min-height: 20px; margin-bottom: 6px; }

.hm-stats { margin-bottom: 10px; }
.hm-sr {
    display: flex; justify-content: space-between;
    font-size: 13px; letter-spacing: 1px; margin: 3px 0;
}
.hm-sr span:first-child { color: #00ffff; }
.hm-sr span:last-child  { color: #fff; }

.hm-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.hm-btn:hover { background: #333300; color: #fff; }

.hm-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.hm-back:hover { background: #003333; color: #fff; text-decoration: none; }

.hm-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.hm-help strong { color: #00ffff; letter-spacing: 1px; }

.hm-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .hm-gallows.hm-dead .hm-m, .hm-word.hm-won .hm-cell { animation: none; }
}
@media (max-width: 768px) { .hm-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .hm-title { font-size: 17px; } .hm-turn { font-size: 14px; } }

/* ===== 8-BIT LUDO (ld-) ===== */

.ld-wrap {
    font-family: 'Teletext50', monospace;
    --ld-cell: clamp(16px, min((100vw - 60px) / 15, (100vh  - 400px) / 15), 34px);
    --ld-cell: clamp(16px, min((100vw - 60px) / 15, (100dvh - 400px) / 15), 34px);
}

.ld-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.ld-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.ld-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.ld-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
}
.ld-st-you  { color: #ffff00; }
.ld-st-r    { color: #ff4444; }
.ld-st-g    { color: #00ff66; }
.ld-st-y    { color: #ffff00; }
.ld-st-b    { color: #5599ff; }
.ld-st-win  { color: #00ff66; }
.ld-st-lose { color: #ff4444; }

.ld-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ld-left { flex-shrink: 0; }

/* Board: 15×15 teletext grid */
.ld-board {
    display: grid;
    grid-template-columns: repeat(15, var(--ld-cell));
    grid-template-rows: repeat(15, var(--ld-cell));
    background: #000;
    border: 3px solid #333;
    box-shadow: 0 0 0 3px #000;
    user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none;
}
.ld-board:focus-visible { border-color: #00ffff; }

/* Track and home-column squares */
.ld-sq {
    position: relative;
    background: #0d0d0d;
    box-shadow: inset 0 0 0 1px #262626;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    box-sizing: border-box;
}
.ld-sq-r { background: #360000; }
.ld-sq-g { background: #003614; }
.ld-sq-y { background: #363600; }
.ld-sq-b { background: #001a36; }
.ld-star {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    color: #999; font-size: calc(var(--ld-cell) * 0.62); line-height: 1;
    pointer-events: none;
}

/* Corner yards */
.ld-yard {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box; border: 3px solid;
}
.ld-yd-r { border-color: #ff4444; background: #1c0000; }
.ld-yd-g { border-color: #00ff66; background: #001c0a; }
.ld-yd-y { border-color: #ffff00; background: #1c1c00; }
.ld-yd-b { border-color: #5599ff; background: #000e1c; }
.ld-yard-in {
    display: grid;
    grid-template-columns: repeat(2, calc(var(--ld-cell) * 1.7));
    grid-template-rows:    repeat(2, calc(var(--ld-cell) * 1.7));
    gap: calc(var(--ld-cell) * 0.4);
}
.ld-slot {
    border-radius: 50%;
    background: #000;
    box-shadow: inset 0 0 0 2px #222, inset 0 2px 4px #000;
    display: flex; align-items: center; justify-content: center;
}

/* Centre HOME */
.ld-centre {
    border: 3px solid #666; background: #050505; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; overflow: hidden;
}
.ld-centre-lab { color: #ffff00; font-size: calc(var(--ld-cell) * 0.55); letter-spacing: 2px; }
.ld-centre-toks { display: flex; flex-wrap: wrap; gap: 2px; justify-content: center; max-width: 92%; }
.ld-mini {
    width: calc(var(--ld-cell) * 0.5); height: calc(var(--ld-cell) * 0.5);
    border-radius: 50%; display: inline-block; box-sizing: border-box;
}

/* Tokens (CSS discs) */
.ld-tok {
    width: 82%; height: 82%; border-radius: 50%; box-sizing: border-box;
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: center;
}
.ld-slot .ld-tok { width: 72%; height: 72%; }
.ld-tok-sm { width: 46%; height: 46%; }
.ld-c-r { background: radial-gradient(circle at 35% 30%, #ff6a6a, #cc0000 72%); border: 1px solid #7a0000; }
.ld-c-g { background: radial-gradient(circle at 35% 30%, #66ffa0, #009944 72%); border: 1px solid #004d22; }
.ld-c-y { background: radial-gradient(circle at 35% 30%, #ffe96a, #d4b400 72%); border: 1px solid #8a7000; }
.ld-c-b { background: radial-gradient(circle at 35% 30%, #9dc4ff, #2b62c9 72%); border: 1px solid #16346e; }
.ld-cnt {
    font-size: calc(var(--ld-cell) * 0.48); line-height: 1;
    color: #000; text-shadow: 0 0 3px #fff, 0 0 3px #fff;
}

/* Movable-token pulse + keyboard cursor */
.ld-can { cursor: pointer; box-shadow: 0 0 0 2px #fff, 0 0 8px #fff; animation: ld-pulse 0.8s ease-in-out infinite; }
@keyframes ld-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.ld-board.ld-kb .ld-cur { box-shadow: 0 0 0 3px #00ffff, 0 0 10px #00ffff; }

/* Panel */
.ld-panel { flex: 1; min-width: 200px; }
.ld-status { min-height: 26px; margin-bottom: 8px; font-size: 16px; letter-spacing: 1px; }
.ld-status p { margin: 0; }
.ld-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.ld-dicebox { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.ld-dice {
    width: 56px; height: 56px; flex-shrink: 0;
    background: #e8e8e8; border: 2px solid #888; box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
    padding: 7px; gap: 2px;
}
.ld-pip { border-radius: 50%; background: #111; opacity: 0; }
.ld-f1 .ld-pip:nth-child(5),
.ld-f2 .ld-pip:nth-child(1), .ld-f2 .ld-pip:nth-child(9),
.ld-f3 .ld-pip:nth-child(1), .ld-f3 .ld-pip:nth-child(5), .ld-f3 .ld-pip:nth-child(9),
.ld-f4 .ld-pip:nth-child(1), .ld-f4 .ld-pip:nth-child(3), .ld-f4 .ld-pip:nth-child(7), .ld-f4 .ld-pip:nth-child(9),
.ld-f5 .ld-pip:nth-child(1), .ld-f5 .ld-pip:nth-child(3), .ld-f5 .ld-pip:nth-child(5), .ld-f5 .ld-pip:nth-child(7), .ld-f5 .ld-pip:nth-child(9),
.ld-f6 .ld-pip:nth-child(1), .ld-f6 .ld-pip:nth-child(3), .ld-f6 .ld-pip:nth-child(4), .ld-f6 .ld-pip:nth-child(6), .ld-f6 .ld-pip:nth-child(7), .ld-f6 .ld-pip:nth-child(9) { opacity: 1; }

.ld-key { margin-bottom: 10px; }
.ld-kr {
    font-size: 13px; color: #ccc; margin: 3px 0; padding: 2px 4px;
    display: flex; align-items: center; gap: 8px;
}
.ld-kr-on { background: #1a1a1a; color: #fff; }
.ld-chip { width: 16px; height: 16px; border-radius: 50%; display: inline-block; flex-shrink: 0; }

.ld-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.ld-btn:hover:not(:disabled) { background: #333300; color: #fff; }
.ld-btn:disabled { background: #0a0a0a; color: #555; border-color: #333; cursor: default; }
.ld-btn-roll { flex: 1; margin-bottom: 0; }

.ld-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.ld-back:hover { background: #003333; color: #fff; text-decoration: none; }

.ld-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.ld-help strong { color: #00ffff; letter-spacing: 1px; }

.ld-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { .ld-can { animation: none; } }
@media (max-width: 768px) { .ld-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .ld-title { font-size: 17px; } }

/* ===== 8-BIT SOLITAIRE (sl-) ===== */

.sl-wrap {
    font-family: 'Teletext50', monospace;
    --sl-card: clamp(34px, min((100vw - 60px) / 7, (100vh  - 430px) / 6), 72px);
    --sl-card: clamp(34px, min((100vw - 60px) / 7, (100dvh - 430px) / 6), 72px);
    --sl-cardh: calc(var(--sl-card) * 1.4);
    --sl-peek:  calc(var(--sl-card) * 0.5);   /* face-up overlap step — JS drag ghost mirrors this 0.5 ratio */
    --sl-peekd: calc(var(--sl-card) * 0.16);  /* face-down overlap step */
    --sl-gap:   calc(var(--sl-card) * 0.12);
}

.sl-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.sl-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.sl-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.sl-status {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
    color: #00ffff; min-height: 22px;
}
.sl-st-bad  { color: #ff4444; }
.sl-st-auto { color: #5599ff; }
.sl-won     { color: #00ff66; animation: sl-flash 0.5s step-end infinite; }
@keyframes sl-flash { 0%,100%{opacity:1} 50%{opacity:0.25} }

.sl-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.sl-left { flex-shrink: 0; }
.sl-board { outline: none; user-select: none; -webkit-user-select: none; touch-action: none; }

/* Top row: stock, waste, spacer, 4 foundations — same 7-slot width as the tableau */
.sl-top    { display: flex; gap: var(--sl-gap); margin-bottom: 26px; }
.sl-spacer { width: var(--sl-card); flex-shrink: 0; }
.sl-tabrow { display: flex; gap: var(--sl-gap); align-items: flex-start; }

/* Piles */
.sl-pile {
    position: relative; width: var(--sl-card); height: var(--sl-cardh);
    flex-shrink: 0; box-sizing: border-box;
    border: 1px solid #1c2f3f; border-radius: 3px;
}
.sl-col { min-height: var(--sl-cardh); }
.sl-ph {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    color: #2a4a5f; font-size: calc(var(--sl-card) * 0.5); pointer-events: none;
}
.sl-stock .sl-ph { color: #00ffff; opacity: 0.6; }   /* recycle glyph when stock is out */
.sl-cnt {
    position: absolute; left: 0; right: 0; bottom: -18px; text-align: center;
    font-size: 11px; color: #5599ff; pointer-events: none;
}

/* Cards */
.sl-card {
    position: absolute; top: 0; left: 0;
    width: var(--sl-card); height: var(--sl-cardh);
    box-sizing: border-box; border-radius: 3px; cursor: pointer;
}
.sl-up   { background: #001622; border: 1px solid #9db8c8; }
.sl-down {
    background: repeating-linear-gradient(45deg, #003344 0 4px, #00151f 4px 8px);
    border: 1px solid #2f5568;
}
.sl-red { color: #ff4444; }
.sl-blk { color: #eee; }
.sl-cr { position: absolute; top: 2px; left: 4px; font-size: calc(var(--sl-card) * 0.32); line-height: 1; }
.sl-cs { position: absolute; right: 4px; bottom: 2px; font-size: calc(var(--sl-card) * 0.44); line-height: 1; }

/* Selection, drop hints, drag */
.sl-sel      { box-shadow: 0 0 0 2px #ffff00, 0 0 8px #ffff00; z-index: 5; }
.sl-drop-ok  { box-shadow: 0 0 0 2px #00ff66; }
.sl-dragging { opacity: 0.3; }
.sl-ghost    { position: fixed; left: 0; top: 0; z-index: 999; pointer-events: none; }
.sl-ghost .sl-card { box-shadow: 2px 3px 0 rgba(0,0,0,0.6); }

/* Keyboard cursor (only shown in keyboard mode) */
.sl-board.sl-kb .sl-cursor   { box-shadow: 0 0 0 2px #00ffff; }
.sl-board.sl-kb .sl-cur-card { box-shadow: 0 0 0 2px #00ffff, 0 0 8px #00ffff; z-index: 6; }

/* Panel */
.sl-panel { flex: 1; min-width: 190px; }
.sl-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.sl-mode { display: flex; gap: 6px; margin-bottom: 10px; }
.sl-mode-btn {
    flex: 1; background: #0a0a0a; border: 1px solid #333; color: #888;
    font-family: 'Teletext50', monospace; font-size: 13px; letter-spacing: 1px;
    padding: 6px 4px; cursor: pointer;
}
.sl-mode-btn.active { background: #ffff00; color: #000; border-color: #ffff00; }
.sl-mode-btn:hover:not(.active) { border-color: #666; color: #ccc; }

.sl-tally { margin-bottom: 10px; }
.sl-tr { display: flex; justify-content: space-between; font-size: 13px; color: #ccc; margin: 3px 0; letter-spacing: 1px; }
.sl-tr span:last-child { color: #00ff66; }

.sl-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.sl-btn:hover { background: #333300; color: #fff; }
.sl-btn[hidden] { display: none; }
.sl-btn:disabled { opacity: 0.4; cursor: default; }
.sl-btn:disabled:hover { background: #1a1a00; color: #ffff00; }
.sl-btn-auto { background: #001a0d; color: #00ff66; border-color: #00ff66; }
.sl-btn-auto:hover { background: #003319; color: #fff; }

.sl-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.sl-back:hover { background: #003333; color: #fff; text-decoration: none; }

.sl-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.sl-help strong { color: #00ffff; letter-spacing: 1px; }

.sl-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { .sl-won { animation: none; } }
@media (max-width: 768px) { .sl-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .sl-title { font-size: 17px; } }

/* ===== 8-BIT DOTS & BOXES (db-) ===== */

.db-wrap {
    font-family: 'Teletext50', monospace;
    --db-n: 5;                                   /* boxes per side — set inline by JS */
    --db-dot: 10px;
    --db-cell: clamp(18px, min((100vw - 48px - (var(--db-n) + 1) * var(--db-dot)) / var(--db-n), (100vh  - 400px - (var(--db-n) + 1) * var(--db-dot)) / var(--db-n)), 60px);
    --db-cell: clamp(18px, min((100vw - 48px - (var(--db-n) + 1) * var(--db-dot)) / var(--db-n), (100dvh - 400px - (var(--db-n) + 1) * var(--db-dot)) / var(--db-n)), 60px);
}

.db-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.db-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.db-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.db-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
}
.db-st-you  { color: #ffff00; }
.db-st-cpu  { color: #00ffff; }
.db-st-win  { color: #00ff66; }
.db-st-lose { color: #ff4444; }
.db-st-draw { color: #ffaa00; }

.db-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.db-left { flex-shrink: 0; }

/* Board: alternating dot / cell tracks (template set inline by JS) */
.db-board {
    display: grid;
    width: max-content;
    padding: 8px;
    background: #000;
    border: 3px solid #222;
    box-shadow: 0 0 0 3px #000;
    user-select: none; -webkit-user-select: none; touch-action: manipulation; outline: none;
}
.db-board:focus-visible { border-color: #555; }

.db-dot { width: var(--db-dot); height: var(--db-dot); background: #ffff00; }

/* Edges — generous invisible hit target via ::after (min ~26px thin dimension) */
.db-edge { position: relative; z-index: 2; cursor: pointer; }
.db-eh::after {
    content: ''; position: absolute; left: 0; right: 0;
    top: calc((var(--db-dot) - 26px) / 2); bottom: calc((var(--db-dot) - 26px) / 2);
}
.db-ev::after {
    content: ''; position: absolute; top: 0; bottom: 0;
    left: calc((var(--db-dot) - 26px) / 2); right: calc((var(--db-dot) - 26px) / 2);
}
.db-e-un { background: #262626; }
@media (hover: hover) {
    .db-e-un:hover { background: #5a5a5a; }
}
.db-e-r { background: #ff4444; color: #ff4444; }
.db-e-c { background: #00ffff; color: #00ffff; }
.db-e-last { box-shadow: 0 0 7px 1px; }          /* glows in currentColor */
.db-e-r.db-e-last { background: #ff8080; }
.db-e-c.db-e-last { background: #99ffff; }

/* Keyboard edge cursor (only while playing by keyboard) */
.db-board.db-kb .db-cur {
    outline: 2px solid #ffff00; outline-offset: 1px; z-index: 3;
    animation: db-blink 0.8s step-end infinite;
}
@keyframes db-blink { 0%, 100% { outline-color: #ffff00; } 50% { outline-color: #807f00; } }

/* Boxes */
.db-box {
    display: flex; align-items: center; justify-content: center;
    font-size: calc(var(--db-cell) * 0.55); line-height: 1;
}
.db-b-r { background: #3a0d0d; color: #ff4444; }
.db-b-c { background: #083a3a; color: #00ffff; }

/* Panel */
.db-panel { flex: 1; min-width: 190px; }
.db-status { min-height: 26px; margin-bottom: 8px; font-size: 16px; letter-spacing: 1px; }
.db-status p { margin: 0; }
.db-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.db-diff { display: flex; gap: 6px; margin-bottom: 10px; }
.db-diff-btn {
    flex: 1; background: #0a0a0a; border: 1px solid #333; color: #888;
    font-family: 'Teletext50', monospace; font-size: 13px; letter-spacing: 1px;
    padding: 6px 4px; cursor: pointer;
}
.db-diff-btn.active { background: #ffff00; color: #000; border-color: #ffff00; }
.db-diff-btn:hover:not(.active) { border-color: #666; color: #ccc; }

.db-key { margin-bottom: 10px; }
.db-kr { font-size: 13px; color: #ccc; margin: 3px 0; display: flex; align-items: center; gap: 8px; }
.db-chip { width: 14px; height: 14px; display: inline-block; flex-shrink: 0; }
.db-ch-r { background: #ff4444; }
.db-ch-c { background: #00ffff; }

.db-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.db-btn:hover { background: #333300; color: #fff; }

.db-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.db-back:hover { background: #003333; color: #fff; text-decoration: none; }

.db-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.db-help strong { color: #00ffff; letter-spacing: 1px; }

.db-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { .db-board.db-kb .db-cur { animation: none; } }
@media (max-width: 768px) { .db-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .db-title { font-size: 17px; } .db-wrap { --db-dot: 8px; } }

/* ===== 8-BIT BRIDGE (br-) ===== */

.br-wrap {
    font-family: 'Teletext50', monospace;
    --br-card: clamp(26px, min((100vw - 90px) / 14, (100vh  - 430px) / 9), 46px);
    --br-card: clamp(26px, min((100vw - 90px) / 14, (100dvh - 430px) / 9), 46px);
    --br-ch: calc(var(--br-card) * 1.42);
}

.br-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.br-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.br-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.br-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
}
.br-st-you  { color: #ffff00; }
.br-st-cpu  { color: #00ffff; }
.br-st-win  { color: #00ff66; }
.br-st-lose { color: #ff4444; }
.br-st-draw { color: #ffaa00; }

.br-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.br-left { flex: 1 1 auto; min-width: 0; }

/* The table: N on top, W/E flanking the centre, S (you) at the bottom */
.br-table {
    display: grid;
    grid-template-areas: "n n n" "w c e" "s s s";
    grid-template-columns: minmax(72px, auto) 1fr minmax(72px, auto);
    gap: 8px;
    border: 2px solid #222;
    padding: 10px;
    background: #000;
    outline: none;
    user-select: none; -webkit-user-select: none;
}
.br-table:focus { border-color: #00ffff; }
.br-area-n { grid-area: n; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.br-area-w { grid-area: w; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.br-area-c { grid-area: c; min-width: 0; }
.br-area-e { grid-area: e; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.br-area-s { grid-area: s; display: flex; flex-direction: column; align-items: center; gap: 4px; }

.br-lbl { font-size: 11px; color: #00ffff; letter-spacing: 2px; white-space: nowrap; }
.br-tag { color: #ffff00; }
.br-count { font-size: 12px; color: #5599ff; letter-spacing: 1px; }

/* Cards: text + suit glyph on a dark card face */
.br-card {
    position: relative;
    display: inline-flex; flex-direction: column;
    align-items: center; justify-content: center;
    width: var(--br-card); height: var(--br-ch);
    background: #101018; border: 1px solid #cccccc; border-radius: 3px;
    box-sizing: border-box; flex-shrink: 0;
    line-height: 1;
}
.br-cr   { font-size: calc(var(--br-card) * 0.40); }
.br-csym { font-size: calc(var(--br-card) * 0.46); margin-top: 2px; }
.br-red { color: #ff4444; }
.br-blk { color: #f2f2f2; }
.br-wht { color: #f2f2f2; }

/* Overlapping fan */
.br-hand { display: flex; justify-content: center; max-width: 100%; }
.br-hand .br-card:not(:first-child) { margin-left: calc(var(--br-card) * -0.45); }
.br-playable { border-color: #ffff00; cursor: pointer; }
.br-playable:hover { transform: translateY(-6px); z-index: 2; }
.br-dim { opacity: 0.35; }
.br-kb .br-kcur { outline: 2px solid #00ffff; transform: translateY(-8px); z-index: 3; }

/* Face-down backs */
.br-cardback {
    width: calc(var(--br-card) * 0.62); height: calc(var(--br-ch) * 0.78);
    background: repeating-linear-gradient(45deg, #001a66, #001a66 3px, #000033 3px, #000033 6px);
    border: 1px solid #5599ff; border-radius: 3px; flex-shrink: 0;
}
.br-hand-back .br-cardback:not(:first-child) { margin-left: -8px; }
.br-vstack { display: flex; flex-direction: column; align-items: center; }
.br-vback {
    width: calc(var(--br-card) * 1.15); height: 9px;
    background: repeating-linear-gradient(45deg, #001a66, #001a66 3px, #000033 3px, #000033 6px);
    border: 1px solid #5599ff; border-radius: 2px; box-sizing: border-box;
}
.br-vback:not(:first-child) { margin-top: -3px; }

/* Exposed E/W dummy: teletext suit lines */
.br-slines { text-align: left; }
.br-sline { font-size: clamp(11px, 1.9vw, 14px); color: #f2f2f2; letter-spacing: 1px; white-space: nowrap; margin: 2px 0; }

/* Centre felt: the current trick, positioned by seat */
.br-felt { position: relative; width: 100%; min-height: calc(var(--br-ch) * 3.4); }
.br-slot { position: absolute; }
.br-slot-n { top: 4px; left: 50%; transform: translateX(-50%); }
.br-slot-s { bottom: 4px; left: 50%; transform: translateX(-50%); }
.br-slot-w { left: 12%; top: 50%; transform: translateY(-50%); }
.br-slot-e { right: 12%; top: 50%; transform: translateY(-50%); }
.br-cinfo { position: absolute; top: 2px; left: 4px; font-size: 11px; color: #5599ff; letter-spacing: 1px; text-align: left; line-height: 1.5; }

/* Auction table */
.br-auc {
    max-height: calc(var(--br-ch) * 2.2); overflow-y: auto;
    border: 1px solid #222; margin-bottom: 8px;
}
.br-auc table { width: 100%; border-collapse: collapse; }
.br-auc th { color: #00ffff; font-size: 12px; letter-spacing: 2px; padding: 3px 2px; border-bottom: 1px solid #333; }
.br-auc td { text-align: center; font-size: 14px; letter-spacing: 1px; padding: 2px; }
.br-pass { color: #00ff66; font-size: 11px; letter-spacing: 1px; }
.br-dlr { color: #ffff00; }
.br-qm { color: #ffff00; animation: br-blink 1s step-end infinite; }
@keyframes br-blink { 50% { opacity: 0; } }

/* Bidding box: 7 levels x 5 denominations + PASS */
.br-bidbox { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; }
.br-bb {
    background: #0a0a0a; border: 1px solid #333; color: #f2f2f2;
    font-family: 'Teletext50', monospace; font-size: clamp(11px, 1.8vw, 14px);
    letter-spacing: 1px; padding: 5px 2px; cursor: pointer;
}
.br-bb:disabled { opacity: 0.25; cursor: default; }
.br-bb:hover:not(:disabled) { border-color: #ffff00; color: #fff; }
.br-bb-red { color: #ff4444; }
.br-bb-pass { grid-column: 1 / -1; color: #00ff66; border-color: #00ff66; background: #001a00; }
.br-bb-pass:hover:not(:disabled) { background: #003300; }
.br-kb .br-bcur { outline: 2px solid #00ffff; outline-offset: 1px; }

/* End-of-deal result card */
.br-result { text-align: center; padding: 12px 6px; }
.br-result p { margin: 5px 0; font-size: 15px; letter-spacing: 1px; color: #f2f2f2; }
.br-r1 { color: #00ffff; }
.br-good { color: #00ff66; }
.br-bad { color: #ff4444; }
.br-result .br-btn { max-width: 220px; margin: 12px auto 0; }

/* Panel */
.br-panel { flex: 0 1 220px; min-width: 190px; }
.br-status { min-height: 26px; margin-bottom: 8px; font-size: 15px; letter-spacing: 1px; }
.br-status p { margin: 0; }
.br-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.br-score { margin-bottom: 8px; }
.br-srow { display: flex; justify-content: space-between; padding: 1px 0; }
.br-srow span:first-child { color: #888; font-size: 12px; letter-spacing: 1px; }
.br-srow span:last-child { color: #ffff00; font-size: 14px; letter-spacing: 1px; }

.br-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.br-btn:hover { background: #333300; color: #fff; }

.br-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
a.br-back:hover { background: #003333; color: #fff; text-decoration: none; }

.br-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.br-help strong { color: #00ffff; letter-spacing: 1px; }

.br-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
    .br-qm { animation: none; }
    .br-playable:hover, .br-kb .br-kcur { transform: none; }
    .br-slot-n, .br-slot-s { transform: translateX(-50%); }
    .br-slot-w, .br-slot-e { transform: translateY(-50%); }
}
@media (max-width: 768px) { .br-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .br-title { font-size: 17px; } }

/* ===== HEADLINE SCRAMBLE (scr-) ===== */

.scr-wrap {
    font-family: 'Teletext50', monospace;
}

.scr-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.scr-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.scr-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.scr-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
    color: #ffff00;
}
.scr-st-you  { color: #ffff00; }
.scr-st-ok   { color: #00ff66; }
.scr-st-bad  { color: #ff4444; }
.scr-st-win  { color: #00ff66; }
.scr-st-lose { color: #ff4444; }

.scr-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.scr-left { flex: 2; min-width: 260px; max-width: 100%; }

/* Round bar */
.scr-roundbar {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 14px; letter-spacing: 2px; color: #00ffff;
    margin-bottom: 10px;
}
.scr-cat { color: #ff44ff; }

/* The headline with the blanked word */
.scr-headline {
    font-size: clamp(16px, 4vw, 22px); line-height: 1.45;
    letter-spacing: 1px; color: #fff;
    background: #000; padding: 12px 10px; margin-bottom: 14px;
    min-height: 3em;
}
.scr-gap { color: #ffff00; letter-spacing: 2px; }

/* Answer cells */
.scr-answer {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 12px; min-height: 40px;
}
.scr-cell {
    display: inline-flex; align-items: center; justify-content: center;
    width: clamp(22px, 6vw, 32px); height: clamp(30px, 7.5vw, 40px);
    border-bottom: 3px solid #ffff00;
    font-size: clamp(16px, 4.5vw, 24px);
    color: #00ff66;
}
.scr-cell-empty { color: #333; }
.scr-cell-hint  { color: #00ffff; border-bottom-color: #00ffff; }
.scr-shake { animation: scr-shake 0.4s step-end; }
@keyframes scr-shake {
    0% { transform: translateX(0); } 25% { transform: translateX(-4px); }
    50% { transform: translateX(4px); } 75% { transform: translateX(-4px); }
    100% { transform: translateX(0); }
}

/* Letter tiles */
.scr-tiles {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-bottom: 14px; min-height: 44px;
    user-select: none; -webkit-user-select: none;
}
.scr-tile {
    width: clamp(32px, 8.5vw, 44px); height: clamp(36px, 9vw, 46px);
    background: #0a0a0a; border: 1px solid #00ffff; color: #00ffff;
    font-family: 'Teletext50', monospace; font-size: clamp(16px, 4.5vw, 22px);
    letter-spacing: 0; padding: 0; cursor: pointer;
}
.scr-tile:hover:not(:disabled) { background: #003333; color: #fff; }
.scr-tile-used { opacity: 0.25; border-color: #333; color: #888; cursor: default; }

/* Action buttons under the tiles */
.scr-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.scr-actions .scr-btn { flex: 1; min-width: 90px; margin-bottom: 0; }

/* Panel */
.scr-panel { flex: 1; min-width: 190px; }
.scr-status { min-height: 26px; margin-bottom: 8px; font-size: 16px; letter-spacing: 1px; }
.scr-status p { margin: 0; }
.scr-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.scr-score { font-size: 28px; color: #00ff66; letter-spacing: 2px; margin-bottom: 6px; }
.scr-date  { font-size: 14px; color: #00ffff; letter-spacing: 1px; margin-bottom: 6px; }

.scr-stats { margin-bottom: 10px; }
.scr-sr {
    display: flex; justify-content: space-between;
    font-size: 13px; letter-spacing: 1px; margin: 3px 0;
}
.scr-sr span:first-child { color: #00ffff; }
.scr-sr span:last-child  { color: #fff; }

.scr-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.scr-btn:hover { background: #333300; color: #fff; }
.scr-btn:disabled { opacity: 0.4; cursor: default; }
.scr-btn-new { background: #001a0d; color: #00ff66; border-color: #00ff66; }
.scr-btn-new:hover { background: #003319; color: #fff; }

.scr-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.scr-back:hover { background: #003333; color: #fff; text-decoration: none; }

.scr-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.scr-help strong { color: #00ffff; letter-spacing: 1px; }

.scr-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { .scr-shake { animation: none; } }
@media (max-width: 768px) { .scr-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .scr-title { font-size: 17px; } }

/* ===== RETRO WORD SEARCH (ws-) ===== */

.ws-wrap {
    font-family: 'Teletext50', monospace;
}

.ws-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.ws-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.ws-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.ws-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
    color: #ffff00;
}
.ws-st-you { color: #ffff00; }
.ws-st-ok  { color: #00ff66; }
.ws-st-bad { color: #ff4444; }
.ws-st-win { color: #00ff66; }

.ws-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.ws-left { flex-shrink: 0; max-width: 100%; }

/* The grid */
.ws-grid {
    display: grid;
    grid-template-columns: repeat(var(--ws-size, 12), 1fr);
    gap: 2px;
    background: #000; padding: 6px;
    width: min(92vw, 480px);
    user-select: none; -webkit-user-select: none;
    touch-action: none;
}
.ws-cell {
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    background: #0a0a0a; border: 1px solid #222; color: #00ffff;
    font-family: 'Teletext50', monospace;
    font-size: clamp(12px, 2.8vw, 20px);
    padding: 0; cursor: pointer;
}
.ws-cell:hover { border-color: #00ffff; color: #fff; }
.ws-anchor { background: #333300; border-color: #ffff00; color: #ffff00; }
.ws-hit    { background: #003311; border-color: #00ff66; color: #00ff66; }
.ws-cursor { outline: 2px solid #00ffff; outline-offset: -2px; }

/* Panel */
.ws-panel { flex: 1; min-width: 190px; }
.ws-status { min-height: 26px; margin-bottom: 8px; font-size: 16px; letter-spacing: 1px; }
.ws-status p { margin: 0; }
.ws-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.ws-timer { font-size: 28px; color: #00ff66; letter-spacing: 2px; margin-bottom: 6px; }

.ws-words { list-style: none; margin: 0 0 10px; padding: 0; }
.ws-word {
    font-size: 14px; letter-spacing: 2px; color: #fff;
    padding: 2px 0;
}
.ws-word-found { color: #555; text-decoration: line-through; }

.ws-stats { margin-bottom: 10px; }
.ws-sr {
    display: flex; justify-content: space-between;
    font-size: 13px; letter-spacing: 1px; margin: 3px 0;
}
.ws-sr span:first-child { color: #00ffff; }
.ws-sr span:last-child  { color: #fff; }

.ws-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.ws-back:hover { background: #003333; color: #fff; text-decoration: none; }

.ws-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.ws-help strong { color: #00ffff; letter-spacing: 1px; }

.ws-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 768px) { .ws-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .ws-title { font-size: 17px; } }

/* ===== PIXEL LEADERBOARD (lb-) ===== */

.lb-wrap {
    font-family: 'Teletext50', monospace;
}

.lb-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.lb-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.lb-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.lb-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 14px; border-bottom: 1px solid #1a1a1a;
    color: #ffff00;
}

.lb-body { max-width: 760px; }

.lb-screen { margin-bottom: 26px; }
.lb-screen-title {
    font-size: 16px; letter-spacing: 3px; color: #00ffff;
    background: #001a1a; padding: 8px 10px; margin: 0 0 10px;
    font-weight: normal;
}

.lb-rows { list-style: none; margin: 0; padding: 0; }
.lb-row {
    display: flex; align-items: baseline; gap: 10px;
    padding: 5px 4px; font-size: 14px; letter-spacing: 1px;
    border-bottom: 1px dotted #1a1a1a;
}
.lb-row-first { animation: lb-flash 1.2s step-end infinite; }
@keyframes lb-flash { 0%, 100% { background: transparent; } 50% { background: #1a1a00; } }

.lb-rank  { color: #ffff00; width: 3.2em; flex-shrink: 0; }
.lb-score { color: #00ff66; width: 4.5em; flex-shrink: 0; }
.lb-tag   { color: #ff44ff; width: 3em; flex-shrink: 0; }
.lb-story { color: #fff; text-decoration: none; min-width: 0; }
a.lb-story:hover { color: #00ffff; text-decoration: none; }

.lb-bar {
    flex: 1; height: 12px; background: #0a0a0a;
    border: 1px solid #222; align-self: center;
}
.lb-bar-fill { display: block; height: 100%; background: #00ff66; }

.lb-note {
    font-size: 11px; color: #888; letter-spacing: 1px; margin: 8px 0 0;
}

.lb-empty {
    color: #ff44ff; font-size: 15px; letter-spacing: 3px;
    padding: 14px 4px; margin: 0;
    animation: lb-flash 1.2s step-end infinite;
}

.lb-privacy {
    font-size: 11px; color: #888; line-height: 1.6; letter-spacing: 1px;
    border-top: 1px solid #1a1a1a; padding-top: 12px; margin: 0 0 14px;
}

.lb-back {
    display: inline-block; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 16px; margin-bottom: 12px; text-decoration: none;
}
.lb-back:hover { background: #003333; color: #fff; text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
    .lb-row-first, .lb-empty { animation: none; }
}
@media (max-width: 560px) {
    .lb-row { flex-wrap: wrap; }
    .lb-story { flex-basis: 100%; padding-left: 0.2em; }
    .lb-title { font-size: 17px; }
}

/* ===== NINE MEN'S MORRIS (nm-) ===== */

.nm-wrap {
    font-family: 'Teletext50', monospace;
}

.nm-header {
    background: #ffff00; color: #000;
    display: flex; justify-content: space-between; align-items: center;
    padding: 6px 12px; letter-spacing: 2px;
}
.nm-title { color: #000; font-size: 20px; letter-spacing: 3px; }
.nm-pg    { color: #000; font-size: 13px; opacity: 0.7; }

.nm-turn {
    font-size: 16px; letter-spacing: 2px; padding: 8px 12px;
    margin-bottom: 12px; border-bottom: 1px solid #1a1a1a;
    color: #ffff00;
}
.nm-st-you  { color: #ffff00; }
.nm-st-cpu  { color: #00ffff; }
.nm-st-mill { color: #ff44ff; }
.nm-st-win  { color: #00ff66; }
.nm-st-lose { color: #ff4444; }
.nm-st-draw { color: #fff; }

.nm-body { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.nm-left { flex-shrink: 0; max-width: 100%; }

/* Board: 13x13 grid; points sit at even cells, lines between them */
.nm-board {
    display: grid;
    grid-template-columns: repeat(13, 1fr);
    grid-template-rows: repeat(13, 1fr);
    width: min(92vw, 440px);
    aspect-ratio: 1;
    background: #000;
    padding: 10px;
    box-sizing: border-box;
    outline: none;
    user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
}
.nm-board:focus-visible { box-shadow: 0 0 0 2px #00ffff; }

.nm-blank  { }
.nm-line-h { background: linear-gradient(#333, #333) center / 100% 2px no-repeat; }
.nm-line-v { background: linear-gradient(#333, #333) center / 2px 100% no-repeat; }

.nm-pt {
    position: relative;
    background: none; border: none; padding: 0; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
/* the point itself */
.nm-pt::before {
    content: '';
    width: 34%; height: 34%;
    background: #333;
    border-radius: 50%;
}
/* a placed man swallows the point dot */
.nm-man::before {
    width: 86%; height: 86%;
    border: 2px solid transparent;
    box-sizing: border-box;
}
.nm-r::before { background: #ff4444; }
.nm-w::before { background: #f5f5f5; }
.nm-milled::before { border-color: #ff44ff; }

.nm-sel::before    { box-shadow: 0 0 0 3px #ffff00; }
.nm-last::before   { box-shadow: 0 0 0 2px #00ffff; }
.nm-sel.nm-last::before { box-shadow: 0 0 0 3px #ffff00; }

/* legal-action hints */
.nm-legal-place::before, .nm-legal-drop::before {
    background: #1a1a00;
    box-shadow: 0 0 0 2px #ffff00;
    width: 44%; height: 44%;
}
.nm-legal-pick::before { box-shadow: 0 0 0 2px #00ff66; }
.nm-legal-take::before { box-shadow: 0 0 0 3px #ff44ff; animation: nm-take 0.8s step-end infinite; }
@keyframes nm-take { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }

/* keyboard cursor (only visible in keyboard mode) */
.nm-board.nm-kb .nm-cursor::after {
    content: '';
    position: absolute; inset: 4%;
    outline: 2px solid #00ffff;
}

/* Panel */
.nm-panel { flex: 1; min-width: 190px; }
.nm-status { min-height: 26px; margin-bottom: 8px; font-size: 15px; letter-spacing: 1px; }
.nm-status p { margin: 0; }
.nm-panel-title { color: #ffff00; font-size: 14px; letter-spacing: 2px; margin: 10px 0 5px; }

.nm-score { margin-bottom: 10px; }
.nm-sr {
    display: flex; justify-content: space-between; align-items: center;
    font-size: 13px; letter-spacing: 1px; margin: 3px 0; color: #ccc;
}
.nm-sr span:last-child { color: #fff; }

.nm-diff { display: flex; gap: 6px; margin-bottom: 10px; }
.nm-diff-btn {
    flex: 1; background: #0a0a0a; border: 1px solid #333; color: #888;
    font-family: 'Teletext50', monospace; font-size: 13px; letter-spacing: 1px;
    padding: 6px 4px; cursor: pointer;
}
.nm-diff-btn.active { background: #ffff00; color: #000; border-color: #ffff00; }
.nm-diff-btn:hover:not(.active) { border-color: #666; color: #ccc; }

.nm-key { margin-bottom: 10px; }
.nm-kr { font-size: 12px; color: #ccc; margin: 4px 0; letter-spacing: 1px; display: flex; align-items: center; gap: 7px; }
.nm-chip {
    display: inline-block; width: 14px; height: 14px; border-radius: 50%;
    vertical-align: middle; flex-shrink: 0;
}
.nm-chip.nm-r { background: #ff4444; }
.nm-chip.nm-w { background: #f5f5f5; }
.nm-hint-chip {
    display: inline-block; width: 12px; height: 12px; border-radius: 50%;
    background: #1a1a00; box-shadow: 0 0 0 2px #ffff00; flex-shrink: 0;
}

.nm-btn {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #1a1a00; color: #ffff00; border: 1px solid #ffff00;
    font-family: 'Teletext50', monospace; font-size: 15px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 8px; cursor: pointer;
}
.nm-btn:hover { background: #333300; color: #fff; }
.nm-btn-new { background: #001a0d; color: #00ff66; border-color: #00ff66; }
.nm-btn-new:hover { background: #003319; color: #fff; }

.nm-back {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    background: #001a1a; color: #00ffff; border: 1px solid #00ffff;
    font-family: 'Teletext50', monospace; font-size: 14px; letter-spacing: 1px;
    padding: 8px 10px; margin-bottom: 10px; text-decoration: none;
}
.nm-back:hover { background: #003333; color: #fff; text-decoration: none; }

.nm-help { font-size: 11px; color: #888; line-height: 1.5; margin: 0; letter-spacing: 0.5px; }
.nm-help strong { color: #00ffff; letter-spacing: 1px; }

.nm-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) { .nm-legal-take::before { animation: none; } }
@media (max-width: 768px) { .nm-panel { flex-basis: 100%; } }
@media (max-width: 430px) { .nm-title { font-size: 17px; } }