/* style.css
 *  - Body has a soft warm cream tint (not pure white).
 *  - Panels use a pale blush pastel so cards POP against the page.
 *  - Header has a subtle pink-to-blue gradient.
 *  - Text stays near-black for strong contrast.
 *  - Buttons keep the dark accent palette so they read clearly.
 *  Rules respected: ONE css file, light tinted background, strong
 *  light/dark contrast for text. Schematics still use pure white
 *  per the white-background rule.
 */
:root {
    --bg:        #fbf7f5;     /* off-white warm cream body */
    --fg:        #101418;     /* near-black text */
    --panel:     #fde9f1;     /* light blush pink panel */
    --panel-alt: #e7f0ff;     /* light sky blue panel (.panel.alt) */
    --panel-warm:#fff4e6;     /* light cream panel (.panel.warm) */
    --border:    #d6bccd;     /* warm-pink border to match panel */
    --accent:    #0a3d8f;     /* dark navy - strong contrast */
    --accent-2:  #8a1538;     /* dark maroon */
    --accent-3:  #b54f00;     /* dark orange (used by .link-emph) */
    --accent-pink: #c2185b;   /* hot pink for a third button colour */
    --accent-teal: #00838f;   /* teal for a fourth button colour */
    --good:      #0b6b2b;
    --bad:       #9a1b1b;
    --warn:      #8a5a00;
}

* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--fg);
    font: 14px/1.5 "Segoe UI", Arial, sans-serif;   /* default body text - 14px max */
}

/* ---- typography caps  (per user rule: body 14px, headings 16-18px) ---- */
h1                    { font-size: 18px; margin: 0 0 8px; }
h2                    { font-size: 17px; margin: 8px 0; }
h3                    { font-size: 16px; margin: 6px 0; }
h4                    { font-size: 14px; margin: 4px 0; }
p, li, td, th, label,
input, select, textarea,
button, a              { font-size: 14px; }
small, .muted          { font-size: 13px; }

a          { color: var(--accent); text-decoration: none; font-weight: 600; }
a:hover    { text-decoration: underline; color: var(--accent-2); }

header.site {
    background: linear-gradient(90deg, #fde9f1 0%, #f7f0ff 50%, #e7f0ff 100%);
    border-bottom: 3px solid var(--accent);
    padding: 12px 18px;
    box-shadow: 0 2px 6px rgba(10,61,143,0.06);
}
/* Center the header content in the same column as the page body so the
   title + menu line up with the centered content instead of hugging the
   far-left edge. The gradient bar still spans the full width. */
header.site .site-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
header.site h1 { margin: 0; font-size: 18px; color: var(--accent); letter-spacing: 0.3px; }
header.site nav { margin-top: 4px; }
header.site nav a {
    margin: 0 7px; font-weight: 600;
    color: var(--accent-2);
}
header.site nav a:hover { color: var(--accent); }

/* Full window width with a 15px border on each side - content grows with
   the window instead of sitting in a fixed centered column. */
main { padding: 18px 15px; max-width: none; margin: 0; }

footer.site {
    margin-top: 30px;
    padding: 14px 18px;
    border-top: 2px solid var(--accent-2);
    background: linear-gradient(90deg, #e7f0ff 0%, #fde9f1 100%);
    color: var(--fg);
    font-size: 13px;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent-2);     /* small color stripe so cards pop */
    border-radius: 6px;
    padding: 14px;
    margin: 12px 0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.panel.alt   { background: var(--panel-alt);  border-color: #b9c8de; border-left-color: var(--accent); }
.panel.warm  { background: var(--panel-warm); border-color: #e1cfb2; border-left-color: var(--accent-3); }
.panel h2, .panel h3 { color: var(--accent); margin-top: 0; }
.panel.alt  h2, .panel.alt  h3 { color: var(--accent); }
.panel.warm h2, .panel.warm h3 { color: var(--accent-3); }

.btn {
    display: inline-block;
    padding: 8px 14px;
    background: var(--accent);
    color: #ffffff;        /* WHITE text on dark navy - strong contrast */
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
}
.btn.secondary { background: var(--accent-2); }
.btn.pink      { background: var(--accent-pink); }
.btn.teal      { background: var(--accent-teal); }
.btn.danger    { background: var(--bad); }

/* Per owner contrast rule: buttons must NOT change color, shade, or
   position on hover / focus / active. Each variant locks its base
   colour for every interaction state. The base colours above are all
   white-on-dark with strong contrast and stay that way always. */
.btn:hover,           .btn:focus,           .btn:active           { background: var(--accent);       color: #fff; transform: none; }
.btn.secondary:hover, .btn.secondary:focus, .btn.secondary:active { background: var(--accent-2);     color: #fff; transform: none; }
.btn.pink:hover,      .btn.pink:focus,      .btn.pink:active      { background: var(--accent-pink);  color: #fff; transform: none; }
.btn.teal:hover,      .btn.teal:focus,      .btn.teal:active      { background: var(--accent-teal);  color: #fff; transform: none; }
.btn.danger:hover,    .btn.danger:focus,    .btn.danger:active    { background: var(--bad);          color: #fff; transform: none; }

input[type=text], input[type=email], input[type=password],
input[type=date], input[type=number], select, textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #ffffff;
    color: var(--fg);
    font-size: 14px;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus,
input[type=date]:focus, input[type=number]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(10, 61, 143, 0.15);
}

label { display: block; font-weight: 600; margin-top: 8px; }

.flash       { padding: 10px; border-radius: 4px; margin: 10px 0; }
.flash.info  { background: #e7efff; color: #0a3d8f; border: 1px solid #0a3d8f; }
.flash.good  { background: #e7fbec; color: #0b6b2b; border: 1px solid #0b6b2b; }
.flash.bad   { background: #ffe8e8; color: #9a1b1b; border: 1px solid #9a1b1b; }
.flash.warn  { background: #fff7e0; color: #8a5a00; border: 1px solid #8a5a00; }

table       { width: 100%; border-collapse: collapse; background: #ffffff; }
th, td      { border: 1px solid var(--border); padding: 6px 8px; text-align: left; }
th          { background: linear-gradient(180deg, #e7f0ff, #d6e0f2); color: var(--accent); }

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent-pink);
    border-radius: 6px;
    padding: 10px;
    transition: transform 0.06s ease, box-shadow 0.12s ease;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.card img { max-width: 100%; border-radius: 4px; }

.age-gate {
    position: fixed; inset: 0;
    background: rgba(255,255,255,0.97);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999;
}
.age-gate .box {
    background: #ffffff; color: var(--fg);
    border: 2px solid var(--bad); border-radius: 8px;
    padding: 24px; max-width: 480px; text-align: center;
}

.chat-window {
    height: 55vh; min-height: 300px;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--border);
    padding: 10px;
    border-radius: 4px;
}
.chat-msg { margin: 4px 0; }
.chat-msg .who { font-weight: 700; color: var(--accent); }
.chat-msg .when { color: #5a6472; font-size: 12px; margin-left: 6px; }

.error-list { color: var(--bad); }
.muted      { color: #5a6472; }

.contact-email { font-weight: 600; }

/* ============================================================
   PLAY PAGE - layout shell + Online Members sidebar
   ============================================================ */
.-shell {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 14px;
    align-items: start;
}
.-main { min-width: 0; }

@media (max-width: 800px) {
    .-shell { grid-template-columns: 1fr; }
}

.online-sidebar {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
}
.online-sidebar h3 { margin-top: 0; }

.online-list { display: flex; flex-direction: column; gap: 6px; }

.online-row {
    display: grid;
    grid-template-columns: 36px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #ffffff;
    border: 1px solid var(--border);
    transition: border-color 0.12s, background 0.12s;
}
.online-row:hover         { border-color: var(--accent); background: #f4f8ff; }
.online-row.online-row-active {
    border-color: var(--accent-pink);
    background: #fff0f7;
}

.online-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    object-fit: cover;
    background: #d6e0f2;
    border: 1px solid var(--border);
}
.online-avatar-placeholder {
    display: flex; align-items: center; justify-content: center;
    color: var(--accent);
    font-weight: 800;
    font-size: 16px;
}
.online-name {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.online-call-btn { padding: 3px 10px; }

/* Strong-contrast link, used where a normal blue link blends in too
   much next to dark body text. Examples: "OTHER WAYS TO PAY" on the
   signup page. */
.link-emph {
    color: #b54f00;             /* dark orange - distinct from blue and black */
    font-weight: 800;
    text-decoration: underline;
    text-underline-offset: 2px;
    letter-spacing: 0.3px;
}
.link-emph:hover { color: #7c3500; }

/* ============================================================
   GALLERY (public pictures + videos by member)
   ============================================================ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin: 8px 0 24px;
}
.gallery-cell {
    position: relative;
    display: block;
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow: hidden;
    text-decoration: none;
    color: var(--fg);
    transition: transform 0.06s ease;
}
.gallery-cell:hover { transform: translateY(-2px); text-decoration: none; }
.gallery-cell img {
    display: block;
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: #000;
}
.gallery-cell-empty {
    display: flex; align-items: center; justify-content: center;
    height: 180px;
    background: #e9edf2;
    color: #5a6472;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.gallery-cell-name {
    padding: 6px 8px;
    font-size: 13px;
    line-height: 1.3;
}
.gallery-cell-name strong { display: block; color: var(--fg); }
.gallery-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 26px;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
}

.admin-tabs { display: flex; gap: 6px; margin: 8px 0 14px; }
.admin-tabs .btn { padding: 6px 14px; }

/* ============================================================
   ADMIN SECTION
   ============================================================ */
.admin-body         { background: var(--bg); }
.admin-topbar       { border-bottom: 3px solid var(--accent-2); }
.admin-topbar h1    { color: var(--accent-2); }

.admin-shell {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 16px;
    /* Full window width with a 15px border on each side; grows with the
       window instead of capping at a fixed centered column. */
    max-width: none;
    margin: 0;
    padding: 12px 15px;
}

.admin-sidebar {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 12px 10px;
    align-self: start;
    position: sticky;
    top: 10px;
}
.admin-sidebar h3   { margin: 0 0 8px 4px; color: var(--accent); font-size: 14px; }
.admin-sidebar a    {
    display: block; padding: 6px 8px; margin: 2px 0;
    border-radius: 4px; color: var(--fg); font-weight: 500;
}
.admin-sidebar a:hover { background: #e9edf2; text-decoration: none; }

.admin-main { min-width: 0; }

.admin-footer {
    max-width: none; margin: 12px 0 0; padding-left: 15px; padding-right: 15px;
    border-radius: 4px 4px 0 0;
}
/* Admin tables fill the widened main column. If a table is genuinely
   wider than the window, its panel scrolls sideways so NO column is ever
   clipped/hidden (instead of being cut off the right edge). */
.admin-table { width: 100%; }
.admin-main .panel,
.admin-main .card,
.admin-main .table-wrap { overflow-x: auto; max-width: 100%; }
.admin-main { overflow-x: auto; }

.admin-badge {
    display: inline-block;
    background: var(--bad);
    color: #fff;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: 11px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Dashboard tiles */
.admin-tiles {
    display: grid;
    /* Compact, capped width so tiles do NOT stretch wide with empty
       space on the right. They pack from the left. */
    grid-template-columns: repeat(auto-fill, minmax(150px, 185px));
    justify-content: start;
    gap: 8px; margin: 10px 0 16px;
}
.admin-tile {
    display: block;
    background: #fff;
    border: 1px solid var(--border);
    border-left: 5px solid var(--accent);
    border-radius: 4px;
    padding: 7px 10px;
}
/* Tiles that link somewhere are clickable across the WHOLE card. */
a.admin-tile { color: inherit; text-decoration: none; cursor: pointer; }
a.admin-tile:hover {
    box-shadow: 0 2px 8px rgba(10,61,143,0.18);
    border-color: var(--accent);
}
.admin-tile h4   { margin: 0 0 4px; font-size: 13px; color: #5a6472; font-weight: 600; }
.admin-tile .n   { font-size: 18px; font-weight: 700; color: var(--fg); line-height: 1; }
.admin-tile a    { font-size: 12px; display: inline-block; margin-top: 4px; }
.admin-tile.good { border-left-color: var(--good); }
.admin-tile.warn { border-left-color: var(--warn); }
.admin-tile.bad  { border-left-color: var(--bad); }

/* Admin table: denser than the front-of-site table */
.admin-table          { font-size: 13px; }
.admin-table th       { background: #e9edf2; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
.admin-table td       { vertical-align: top; padding: 5px 7px; }
.admin-table td code  { font-size: 12px; }

.admin-actions form   { margin: 0; }
.admin-actions .btn   { margin: 2px 2px; }
.btn-xs               { padding: 3px 7px; font-size: 11px; font-weight: 600; }
.btn.btn-approve       { background: var(--good); color: #fff; }
.btn.btn-approve:hover,
.btn.btn-approve:active,
.btn.btn-approve:focus { background: var(--good); color: #fff; transform: none; }
.btn.btn-reject        { background: var(--bad);  color: #fff; }
.btn.btn-reject:hover,
.btn.btn-reject:active,
.btn.btn-reject:focus  { background: var(--bad);  color: #fff; transform: none; }

.pill {
    display: inline-block; padding: 1px 7px;
    border-radius: 10px; font-size: 11px; font-weight: 700;
    color: #fff; letter-spacing: 0.3px;
}
.pill.good { background: var(--good); }
.pill.warn { background: var(--warn); }
.pill.bad  { background: var(--bad); }

.admin-filter-bar {
    display: flex; gap: 8px; align-items: center;
    margin: 6px 0 12px;
}
.admin-filter-bar input[type=text],
.admin-filter-bar select { width: auto; flex: 0 0 auto; min-width: 140px; }

.admin-pager { margin-top: 10px; }
.admin-pager .btn { margin-right: 4px; }

/* ID review cards */
.admin-id-card h3 { margin: 0 0 4px; }
.admin-id-thumbs  {
    display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0;
}
.admin-id-thumbs > div { text-align: center; }
.admin-id-thumb {
    max-width: 280px;  max-height: 220px;
    border: 1px solid var(--border); border-radius: 4px;
    background: #fff;
}

@media (max-width: 800px) {
    .admin-shell  { grid-template-columns: 1fr; }
    .admin-sidebar{ position: static; }
}

/* ============================================================
   LIVE GAME  -  two-pane chess board + sidebar layout
   ============================================================ */
.rtc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 12px;
    margin: 10px 0;
}
.rtc-pane {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px;
    display: flex;
    flex-direction: column;
}
.rtc-pane-title {
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 700; color: var(--accent);
    padding: 4px 6px 8px;
    border-bottom: 1px solid var(--border);
    margin-bottom: 8px;
}
.rtc-video {
    width: 100%;
    background: #000;            /* inside the <video> only -- pixels carry contrast */
    border: 1px solid var(--border);
    border-radius: 4px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/* ============================================================
   CHESS_SITE  -  machine.php two-sided operator layout
   ============================================================ */
.mach-root {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0;
}

.mach-video-row,
.mach-bottom-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.mach-video-row[data-expanded] {
    grid-template-columns: 1fr;     /* one pane fills the row */
}

.mach-pane {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.mach-pane-title {
    display: flex; justify-content: space-between; align-items: center;
    font-weight: 700; color: var(--accent);
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px; margin-bottom: 8px;
}
.mach-pane-title .btn { padding: 3px 9px; font-size: 12px; }

.mach-pane.mach-ctrl table { margin-top: 10px; }
.mach-pane.mach-ctrl table th,
.mach-pane.mach-ctrl table td { padding: 6px 8px; font-size: 14px; }
.mach-pane.mach-ctrl table td { font-family: Consolas, monospace; color: var(--accent); font-weight: 700; }

.mach-pane.mach-chat .chat-window { height: 180px; min-height: 120px; }

@media (max-width: 800px) {
    .mach-video-row,
    .mach-bottom-row { grid-template-columns: 1fr; }
}

/* ============================================================
   FAT FOOTER  -  multi-column legal / nav footer for SEO and
   Google Play store-listing requirements (privacy, terms,
   cookies, DMCA, contact)
   ============================================================ */
.site-footer {
    margin-top: 32px;
    padding: 24px 16px;
    background: #f6f3ee;
    border-top: 2px solid var(--border);
    color: #2a2a2a;
}
.footer-cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(150px, 1fr));
    gap: 24px;
    max-width: 1100px;
    margin: 0 auto 18px;
}
.footer-col h4 {
    margin: 0 0 8px;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--accent);
}
.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-col li {
    margin: 4px 0;
    font-size: 14px;
}
.footer-col a {
    color: #2a2a2a;
    text-decoration: none;
}
.footer-col a:hover {
    color: var(--accent);
    text-decoration: underline;
}
.footer-legal {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-size: 13px;
    line-height: 1.5;
}
.footer-legal p { margin: 4px 0; }
.footer-legal .contact-email { color: var(--accent); text-decoration: none; }
.footer-legal .contact-email:hover { text-decoration: underline; }

@media (max-width: 700px) {
    .footer-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .footer-cols { grid-template-columns: 1fr; }
}

/* ============================================================
   PLAYABLE BOARD  -  /play.php
   ============================================================ */
.play-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
    margin: 10px 0 14px;
}
.play-controls label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.play-controls input[type="color"] {
    width: 36px;
    height: 26px;
    border: 1px solid var(--border);
    padding: 0;
    background: transparent;
    cursor: pointer;
}
.play-controls select {
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}
/* On the play page (and only there) widen <main> beyond the
   site-wide 1100 px cap so the 16x16 board can grow ~33 % more
   per owner request. The :has() guard scopes this exclusively
   to pages that contain #boardPanel - /play.php and /testing.php;
   every other page keeps the original 1100 px main. */
main:has(#boardPanel) { max-width: 1900px; }

.board-wrap {
    width: 100%;
    max-width: 1862px;       /* matches the JS resize ceiling (1862 = 1400 * 1.33) so the canvas can fill the wider play-page main */
    margin: 0 auto;
    background: #fbf7f5;
    border: 2px solid #5d4037;        /* warm dark wood frame */
    border-radius: 4px;
    padding: 4px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    position: relative;      /* anchor for #programCenter overlay */
}
#chessBoard {
    display: block;
    width: 100%;
    height: auto;
    image-rendering: -webkit-optimize-contrast;
    cursor: pointer;
}
#gameStatus {
    margin: 10px auto;
    text-align: center;
    font-weight: 600;
}
#boardPanel details summary { cursor: pointer; }
#boardPanel details ol      { margin: 8px 0 8px 22px; }

/* Board container row (the inner row that centers the canvas). */
.board-row {
    display: flex;
    justify-content: center;
}

/* ===== /play.php three-pane layout ============================
   Left pane:  online members list + offline-challenge links.
   Center:    Player-2 / Player-1 edge labels stacked around the
              board canvas.
   Right pane: turn marker + chess clocks + Pass-clock button.
   Side panes stay narrow (~130 px) so the board keeps most of
   the available horizontal space. Collapses to a single column
   under 900 px so phones still get a usable board.           */
.play-grid {
    display: grid;
    grid-template-columns: 130px 1fr 130px;
    gap: 8px;
    align-items: start;
    margin: 8px 0;
    font-size: 13px;
}
.play-side {
    background: #fbf7f5;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 5px;
    padding: 6px 8px;
    font-size: 13px;
}
.play-side-title {
    margin: 0 0 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #5d4037;
}
.play-side-foot { margin-top: 8px; line-height: 1.4; font-size: 12px; }
.play-center { min-width: 0; }
.board-edge {
    text-align: center;
    font-weight: 700;
    padding: 3px 0;
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.board-edge.edge-top    { color: #1a4ca8; }
.board-edge.edge-bottom { color: #c0392b; }

.online-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 280px;
    overflow-y: auto;
    font-size: 13px;
}
.online-list li {
    padding: 3px 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.online-list li:last-child { border-bottom: 0; }
.online-list a { text-decoration: none; }

.turn-stack { display: flex; flex-direction: column; gap: 3px; }
/* Inactive turn marker is a flat neutral gray with grayed text -
   no hint of red or blue, so the inactive side cannot be
   confused with the active one. The player color (red for P1,
   blue for P2) ONLY paints when .active is set. */
.turn-marker {
    padding: 4px;
    text-align: center;
    border-radius: 3px;
    font-weight: 700;
    font-size: 12px;
    background: #9e9e9e;
    color: #ececec;
    transition: background 0.18s ease, color 0.18s ease, outline 0.18s ease;
}
.turn-marker.active {
    color: #fff;
    outline: 2px solid #2e7d32;
}
.turn-marker.active.p1 { background: #c0392b; }
.turn-marker.active.p2 { background: #1a4ca8; }

.clock-stack { display: flex; flex-direction: column; gap: 5px; }
.clock-tile {
    padding: 4px;
    text-align: center;
    border-radius: 3px;
    background: #fff;
    border: 1px solid rgba(0,0,0,0.10);
    opacity: 0.7;
    transition: opacity 0.18s, border-color 0.18s;
}
.clock-tile.active { opacity: 1; border: 2px solid #2e7d32; }
.clock-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #666;
}
.clock-time {
    font-family: 'Courier New', Consolas, monospace;
    font-size: 18px;
    font-weight: 700;
    color: #2a1f08;
    line-height: 1.1;
}

/* Compact button override scoped to the right pane so the Pass
   button stops being elephant-sized while keeping the global
   .btn unchanged elsewhere. */
.play-side .btn {
    padding: 4px 8px;
    font-size: 12px;
    line-height: 1.3;
}

.kbd {
    display: inline-block;
    background: rgba(0,0,0,0.06);
    border: 1px solid rgba(0,0,0,0.18);
    border-radius: 3px;
    padding: 0 4px;
    font-family: 'Courier New', monospace;
    font-size: 0.85em;
    line-height: 1.3;
}

/* AI thinking-time countdown - dramatic last-10-seconds + blink
   at zero. Used in #gameStatus on /play.php. */
.ai-countdown-ready {
    color: #c0392b;
    font-weight: 700;
    font-size: 1.10em;
    letter-spacing: 0.04em;
}
.ai-countdown-ready strong {
    display: inline-block;
    min-width: 1.2em;
    text-align: center;
    color: #c0392b;
    font-size: 1.35em;
    margin-left: 4px;
    animation: aiCountPulse 0.6s ease-in-out infinite alternate;
}
@keyframes aiCountPulse {
    from { opacity: 1; transform: scale(1); }
    to   { opacity: 0.55; transform: scale(1.18); }
}
.ai-countdown-blink {
    color: #c0392b;
    font-weight: 700;
    font-size: 1.30em;
    letter-spacing: 0.05em;
    animation: aiBlink 0.25s steps(2, jump-none) infinite;
}
@keyframes aiBlink {
    50% { opacity: 0; }
}

/* Move log inside the right pane on /play.php. Newest move at the
   TOP, older moves below. Capped scroll so a long game does not
   blow out the side pane. */
.move-log {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 220px;
    overflow-y: auto;
    font-family: 'Courier New', Consolas, monospace;
    font-size: 11px;
    line-height: 1.4;
}
.move-log li {
    padding: 2px 4px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    color: #444;
}
.move-log li.move-log-latest {
    color: #1b5e20;
    font-weight: 700;
    background: rgba(46, 125, 50, 0.08);
}

@media (max-width: 900px) {
    .play-grid { grid-template-columns: 1fr; }
    .play-side-left, .play-side-right { max-width: 480px; margin: 0 auto; }
    .online-list { max-height: 160px; }
}

/* Center-of-board overlay: shows the piece you are currently
   programming so you never lose sight of it while clicking
   destination squares. Sits over the canvas, ignores clicks. */
.program-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    text-shadow: 0 0 6px rgba(255,255,255,.85);
}
/* The .program-center rule above sets display:flex, which silently
   overrides the browser's default [hidden] { display:none } and
   leaves the "Programming: <piece>" overlay visible on /play.php
   even when the user is NOT programming anything. This explicit
   override puts that back. */
.program-center[hidden] { display: none; }
.program-center .pc-glyph {
    font-size: clamp(60px, 14vw, 160px);
    line-height: 1;
    color: #0a3d8f;
    opacity: .55;
}
.program-center .pc-label {
    margin-top: 6px;
    font-weight: 700;
    background: rgba(255,255,255,.85);
    padding: 4px 10px;
    border-radius: 4px;
    color: #0a3d8f;
}

/* Below-board horizontal menu rows. Same width as the board. */
.board-menu {
    width: 100%;
    max-width: 1100px;
    margin: 14px auto 0;
}
.board-menu .bm-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-bottom: 8px;
}
.board-menu .bm-row label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
}
.board-menu .bm-row select {
    min-width: 180px;          /* widen so options don't truncate */
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: #fff;
}
.board-menu .bm-row #difficulty {
    min-width: 240px;          /* AI-Level options are long */
}
.board-menu .bm-row #opponent {
    min-width: 220px;
}
.board-menu .bm-row input[type="color"] {
    width: 36px;
    height: 28px;
    border: 1px solid var(--border);
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.board-menu .bm-sep {
    color: var(--border);
    padding: 0 4px;
}
.board-menu .bm-panel {
    background: #fbf7f5;
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 14px;
    margin: 6px 0 10px;
}
.board-menu .legend-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 6px 14px;
}
.board-menu .lg-glyph {
    font-size: 1.4em;
    display: inline-block;
    width: 1.4em;
    text-align: center;
    color: #0a3d8f;
}
.board-menu .lg-super {
    border-radius: 50%;
    box-shadow: 0 0 0 2px #ffd700;
    background: #fbf7f5;
}

@media (max-width: 760px) {
    .board-menu .bm-row select { min-width: 140px; width: 100%; }
    .board-menu .bm-row label  { width: 100%; }
}

/* ================================================================
   READABILITY - bigger, readable text across the WHOLE site.
   Owner 2026-06-05: tired of tiny letters; everything must be
   readable and clearly larger. Appended last so it overrides the
   smaller sizes defined earlier in this file.
   ================================================================ */
body                       { font-size: 18px; line-height: 1.6; }
h1                         { font-size: 30px; }
h2                         { font-size: 25px; }
h3                         { font-size: 21px; }
h4                         { font-size: 18px; }
p, li, td, th, label, dt, dd,
a, button,
input, select, textarea    { font-size: 18px; }
small, .muted, .small      { font-size: 16px; }   /* no more 11-13px text */
.btn                       { font-size: 18px; }
.btn-xs                    { font-size: 15px; }
header.site h1             { font-size: 24px; }
header.site nav a          { font-size: 18px; }
/* play page: keep the edge labels, clocks and turn markers readable */
.board-edge, .clock-time, .clock-label,
.turn-marker, #gameStatus  { font-size: 19px; }
/* admin tables can stay a touch tighter but still readable */
.admin-table, .admin-table th, .admin-table td,
.admin-table td code       { font-size: 16px; }

/* Disabled buttons read as clearly grayed-out / not clickable - used by
   the piece-programming flow where only "Done" stays active. */
.btn:disabled, .btn[disabled],
button:disabled, button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    filter: grayscale(60%);
}