/* static/game.css */
/* Numbered Puzzles: keep title/list aligned like Scores */
#custom-panel .custom-title{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}
#custom-panel .custom-list{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}
/* ========================================================== */
/* COLOR MODE VARIABLES                                       */
/* ========================================================== */

:root{
    --tile-w: 75px;
    --tile-h: 75px;
    --hl1: #FFD54A;
    --hl2: #46D9FF;
    --hl3: #C85CFF;

    --topbar-h: 64px;
    --tile-aspect: 1;
--body-bg: #111;
    --board-bg: #111;

    --topbar-bg: #000;
    --topbar-border: #333;

    --panel-bg: #000;
    --panel-border: #333;

    --tile-bg: #1e2a44;
    --tile-border: #3c4e73;
    --tile-text: #ffffff;

    --selected-bg: #1976d2;
    --correct-bg: #2e7d32;
    --wrong-bg: #b71c1c;
    --already-bg: #7b1fa2;

    --link-color: #66aaff;
    --accent-btn: #1976d2;
  /* Added for themeable chat/wordlist highlights */
  --word-active-bg: #444;
  --word-active-fg: #fff;

  --chat-bg: #111;
  --chat-fg: #e8e8e8;
  --chat-msg-bg: #1a1a1a;
  --chat-msg-border: #333;
  --chat-input-bg: #222;
  --chat-input-border: #444;
  --pinned-color: #ff3b30;

/* Text defaults for modes that don't override --text */
--text: #dddddd;
--muted: rgba(221,221,221,0.72);
--topbar-text: #dddddd;

/* Admin accent default */
--admin-accent: var(--link-color);

/* Tabs (chat view) defaults */
--tab-bg: #111;
--tab-border: #333;
--tab-text: #ddd;
--tab-active-bg: #1d3d5c;
--tab-active-border: #2b6ca3;
--tab-active-text: #fff;
}


html.mode-color, body.mode-color{
    --body-bg: linear-gradient(135deg, #6a1b9a 0%, #ad1457 40%, #ef6c00 100%);
    --board-bg: transparent;

    /* bright medium brown tiles */
    --tile-bg: #a86a2d;
    --tile-border: #d59a61;
    --tile-text: #ffffff;

--text: #ffffff;
--muted: rgba(255,255,255,0.75);
--topbar-text: #ffffff;

--chat-bg: rgba(0,0,0,0.55);
--chat-fg: #ffffff;
--chat-msg-bg: rgba(0,0,0,0.35);
--chat-msg-border: rgba(255,255,255,0.18);
--chat-input-bg: #000000;
--chat-input-border: rgba(255,255,255,0.25);
}

html.mode-neon, body.mode-neon{
    /* Neon (DayGlo / blacklight) */
    --body-bg: #000000;
    --board-bg: #000000;

    --topbar-bg: #000000;
    --topbar-border: #ff0000;

    --panel-bg: #0d0d0d;
    --panel-border: #ff0000;

    --tile-bg: #1a1a1a;
    --tile-border: #39ff14;
    --tile-text: #39ff14;

    --link-color: #39ff14;
    --accent-btn: #000000;

    --selected-bg: #f7ff00;
    --correct-bg: #39ff14;
    --wrong-bg: #ff007f;
    --already-bg: #7b1fa2;

--text: #39ff14;
--muted: rgba(57,255,20,0.75);
--topbar-text: #39ff14;

--tab-bg: #000;
--tab-border: #ff0000;
--tab-text: #39ff14;
--tab-active-bg: #111;
--tab-active-border: #39ff14;
--tab-active-text: #39ff14;

--chat-bg: #000913;
--chat-fg: #00b3ff;
--chat-msg-bg: #001a2e;
--chat-msg-border: #00b3ff;
--chat-input-bg: #001a2e;
--chat-input-border: #00b3ff;

    /* Word tracing (drag selection) color for Bright */
    --selected-bg: #00d5ff; /* lighter blue */
    --selected-border: #ffffff;
    --selected-text: #ffffff;

    --pinned-color: #ff1744;

    --top-select-border: #39ff14;
}

html.mode-bw, body.mode-bw{
    --body-bg: #111;
    --board-bg: #111;

    /* BW tiles = the "current" (non-brown) look */
    --tile-bg: #1e2a44;
    --tile-border: #3c4e73;
    --tile-text: #ffffff;

--text: #dddddd;
--muted: rgba(221,221,221,0.72);
--topbar-text: #dddddd;

/* Admin accent default */
--admin-accent: var(--link-color);

--chat-bg: #111;
--chat-fg: #e8e8e8;
--chat-msg-bg: #1a1a1a;
--chat-msg-border: #333;
--chat-input-bg: #000000;
--chat-input-border: #444;

    /* Word tracing (drag selection) color for Dull */
    --selected-bg: #00d5ff; /* lighter blue */
    --selected-border: #ffffff;
    --selected-text: #ffffff;
}


html.mode-parchment, body.mode-parchment{
    --tile-aspect: 1;

    /* Explicit scrog vars used by scrog-only overrides */
    --scrog-page-bg: #faedc9;
    --scrog-wordlist-bg: #ffccaa;
    --scrog-tile-bg: #ebc388;

    /* Scrog theme */
    --body-bg: #faedc9;
    --board-bg: transparent;

    /* Every background except the word list should match the page */
    --topbar-bg: #faedc9;
    --topbar-border: #faedc9;
    --panel-bg: #faedc9;
    --panel-border: #faedc9;

    --tab-bg: #faedc9;
    --tab-border: #faedc9;
    --tab-active-bg: #faedc9;
    --tab-active-border: #faedc9;

    --button-bg: #faedc9;
    --button-border: #faedc9;

    /* Text defaults */
    --text: #000000;
    --muted: rgba(0,0,0,0.85);

    /* Top 2 rows (on load) + descriptive items */
    --topbar-text: #ff2525;
    --admin-accent: var(--topbar-text);
    --topbar-link: #ff2525;
    --topbar-muted: #ff2525;
    --top-select-bg: rgba(0,0,0,0.06);
    --top-select-border: rgba(0,0,0,0.18);

    /* Word list */
    --words-bg: #ffccaa;
    --words-border: rgba(0,0,0,0.18);

    /* Tiles */
    --tile-bg: #ebc388;
    --tile-border: rgba(0,0,0,0.25);
    --tile-text: #000000;

    /* Drag/selection color (word tracing). */
    --selected-bg: #1e3f7a; /* darker blue */
    --selected-text: #ffffff;

    /* Chat / pinned */
    --chat-bg: #faedc9;
    --chat-border: #faedc9;
    --chat-fg: #000000;
    --chat-name: #ff2525;
    --link-color: var(--topbar-link);
    --link-hover: var(--topbar-link);
    --accent-btn: #1f6feb;
    --accent-btn-hover: #1158c7;
    --admin-accent: var(--accent-btn);
    --chat-input-bg: var(--scrog-page-bg);
    --chat-input-border: #000;
    --tab-text: #000;
    --tab-active-text: #ff2525;
    --tab-border: #000;

    --chat-msg-bg: #faedc9;
    --chat-msg-border: #faedc9;
    --pinned-border: rgba(0,0,0,0.25);
    --pinned-color: #ff2525;
}
/* ========================================================== */
/* BASE LAYOUT                                                */
/* ========================================================== */

body {
    background: var(--body-bg);
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    color: var(--text);
    overflow-y: auto;
    overflow-x: hidden;
}

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

#top-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: nowrap;
    padding: 4px 10px;
    background: var(--topbar-bg);
    color: var(--topbar-text, var(--text));
    min-height: var(--topbar-h);
    box-sizing: border-box;
    border-bottom: 1px solid var(--topbar-border);
}


#status {
    font-size: 16px;
    font-weight: 900;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1.15;
    padding: 2px 6px;
}


#assistant-inline {
    margin-left: 0;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,0.90);
    border: 1px solid rgba(255,255,255,0.16);
    white-space: nowrap;
    z-index: 6100;
    position: relative;
}





#clear-dblclick {
    margin-left: 0;
    font-size: 14px;
    font-weight: 800;
    color: #fff;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(40,40,40,0.92);
    border: 1px solid rgba(255,255,255,0.16);
    white-space: nowrap;
    z-index: 6100;
    position: relative;
    cursor: pointer;
}
#clear-dblclick:active {
    transform: translateY(1px);
}
#drag-inline {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 0.6px;
    line-height: 1.1;

    color: #ffffff;
    background: rgba(0,0,0,0.85);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 12px;

    padding: 6px 14px;
    max-width: 70vw;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


#top-links {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    white-space: nowrap;
    flex-wrap: nowrap;
}


.top-link {
    color: var(--link-color);
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}

/* make sure toggles never render as white buttons */
.top-link,
.top-link:visited,
.top-link:hover,
.top-link:active {
    background: transparent;
}

.top-link.top-toggle {
    font: inherit;
    padding: 2px 8px;
    border: 1px solid var(--tab-border, rgba(102,170,255,0.65));
    border-radius: 5px;
    color: var(--link-color);
    background: transparent;
    line-height: 1.2;
}

.top-link.top-toggle:hover {
    background: rgba(102,170,255,0.12);
}

.top-link.top-toggle:active {
    background: rgba(102,170,255,0.20);
}

.top-link.top-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(102,170,255,0.25);
}

/* Yellow notify state for Chat ON (N) / Chat OFF (N) */
.top-link.top-toggle.notify {
    background: #ffd54f;
    border-color: #ffd54f;
    color: #000;
}

.top-link.top-toggle.notify:hover {
    background: #ffd54f;
}

#new-puzzle {
    padding: 4px 10px;
    background: var(--accent-btn);
    color: #fff;
    border: none;
    font-weight: bold;
    cursor: pointer;
}


/* Neon: New Puzzle should stay RED (no white) */
html.mode-neon #new-puzzle{
    background: #ff0000 !important;
    color: #ffffff !important;
}
/* ========================================================== */
/* MAIN AREA LAYOUT                                           */
/* ========================================================== */

#main-area {
    display: flex;
    min-height: 0;
    height: calc(100dvh - var(--topbar-h));
    height: calc(100vh - var(--topbar-h));
    border: 4px solid var(--panel-border);
    box-sizing: border-box;
    flex-wrap: nowrap;
    overflow: hidden;
}

/* ========================================================== */
/* BOARD AREA                                                 */
/* ========================================================== */

#board-area {
    position: relative;
    flex: 1;
    padding: 10px;
    box-sizing: border-box;
    overflow: auto;
    background: var(--board-bg);
    display: block;
    min-height: 0;
}

#board {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    flex-shrink: 0;
    min-width: 100px;
    min-height: 100px;
}

/* ========================================================== */
/* TILE STYLE                                                 */
/* ========================================================== */

.tile {
    font-kerning: normal;
    touch-action: none;
    position: absolute;
    background: var(--tile-bg);
    color: var(--tile-text);
    border-radius: 0;
    border: 1px solid var(--tile-border);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    box-sizing: border-box;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Liberation Sans", sans-serif;
    font-size: clamp(20px, calc(var(--tile-w) * 0.62), 56px);
    letter-spacing: -0.06em;

    font-weight: 400;
    transition: background 0.1s;
}

/* Scrabble-style tile bevel + score (works across color modes via CSS vars) */
.tile{
    letter-spacing: -0.03em;

    overflow: hidden;
    text-shadow: none;
}
.tile::before{
    display: none;
    content:"";
    position:absolute;
    inset:0;
    border-radius: inherit;
    pointer-events:none;
    /* subtle wood-ish sheen + bevel */
    background:
        linear-gradient(180deg, rgba(255,255,255,0.18), rgba(255,255,255,0.00) 42%),
        radial-gradient(120% 90% at 20% 10%, rgba(255,255,255,0.14), rgba(255,255,255,0) 60%),
        radial-gradient(140% 120% at 80% 90%, rgba(0,0,0,0.20), rgba(0,0,0,0) 55%),
        repeating-linear-gradient(135deg, rgba(0,0,0,0.025) 0px, rgba(0,0,0,0.025) 6px, rgba(255,255,255,0.02) 12px, rgba(255,255,255,0.02) 18px);
    mix-blend-mode: overlay;
}
.tile::after{
    content: attr(data-pts);
    position:absolute;
    right: max(6px, calc(var(--tile-w) * 0.07));
    top: max(4px, calc(var(--tile-h) * 0.06));
    font-size: clamp(12px, calc(var(--tile-h) * 0.24), 26px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    opacity: 0.92;
    color: var(--tile-text);
    text-shadow: none;
    pointer-events:none;
    display: none;
}

html.show-points .tile::after{ display:block; }
/*
   IMPORTANT: During word-drag selection, the selection color must win over
   any persistent tile highlights (e.g. hl1/hl2/hl3 from double-click).
   Those highlight rules intentionally use !important, so selection must too.
*/
.tile.selected      { background: var(--selected-bg) !important; }

/* Neon: selected tiles should be readable on neon-yellow */
html.mode-neon .tile.selected,
body.mode-neon .tile.selected{
    color: #000;
    text-shadow: none;
    box-shadow: none;}

.tile.correct       { background: var(--correct-bg) !important; }

body.mode-neon .tile.correct { color: #000 !important; text-shadow: 0 0 2px #fff, 0 0 4px #fff; }
.tile.wrong         { background: var(--wrong-bg) !important; }
.tile.already-found { background: var(--already-bg) !important; }

.tile.target-start {
    /* Start-tile highlight (1st letter) */
    background: var(--hl1) !important;
    color: #000 !important;
    outline: 3px solid var(--hl1);
    box-sizing: border-box;
}

.tile.target-next1 {
    /* Next-tile highlight (2nd letter) */
    background: var(--hl2) !important;
    color: #000 !important;
    outline: 3px solid var(--hl2);
    box-sizing: border-box;
}

.tile.target-next2 {
    /* Next-tile highlight (3rd letter) */
    background: var(--hl3) !important;
    color: #000 !important;
    outline: 3px solid var(--hl3);
    box-sizing: border-box;
}

/* Multi-letter (double-click) highlights: color the *tile* (not just an outline) */
.tile.hl1 {
    background: var(--hl1) !important;
    color: #000 !important;
    box-shadow: none;}
.tile.hl2 {
    background: var(--hl2) !important;
    color: #000 !important;
    box-shadow: none;}
.tile.hl3 {
    background: var(--hl3) !important;
    color: #000 !important;
    box-shadow: none;}

/* While dragging to trace a word, the selection color must win over double-click highlights
   and "target" hints, so the entire dragged path is a single consistent color per theme. */
.tile.selected.hl1,
.tile.selected.hl2,
.tile.selected.hl3,
.tile.selected.target-start,
.tile.selected.target-next1,
.tile.selected.target-next2,
.tile.selected.target,
.tile.selected.target-next {
    background: var(--selected-bg) !important;
    border-color: var(--selected-border) !important;
    color: var(--selected-text) !important;
    outline: none !important;
}

/* Re-assert selection styling after highlight rules (important because highlights also use !important). */
.tile.selected {
    background: var(--selected-bg) !important;
    border-color: var(--selected-border) !important;
    color: var(--selected-text) !important;
}


/* ========================================================== */
/* SOLVED OVERLAY                                             */
/* ========================================================== */

#solved-box {
    display: block;
}

/* ========================================================== */
/* WORD LIST COLUMN                                           */
/* ========================================================== */

#word-column {
    /* Keep word list compact; long lines can scroll horizontally in the panel */
    width: 190px;
    padding: 8px;
    box-sizing: border-box;
    border-left: 2px solid var(--panel-border);
    background: var(--panel-bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#word-column .wordcol-title {
    font-size: 14px;
    margin: 0 0 6px 0;
    font-weight: 600;
}

.points-details {
    flex: 0 0 auto;
    flex-shrink: 0;
    background: var(--panel-bg);
    border: 1px solid #555;
    padding: 8px;
    margin: 10px 0 10px 0;
    max-height: none;
    overflow-y: auto;
}

.points-details.collapsed {
    max-height: 0;
    padding: 0;
    border: none;
    overflow: hidden;
}

#words-panel {
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--panel-border);
    padding: 6px;
    box-sizing: border-box;
    background: var(--words-bg, var(--panel-bg));
    overflow-y: auto;
    overflow-x: auto;
}

#word-list {
    font-size: 13px;
}

.word-item {
    padding: 2px 0;
    cursor: pointer;
    white-space: nowrap;
}

.word-item.found {
    color: #8bc34a;
}

.word-item.found-other {
    color: #7b1fa2;
}

.word-item.admin-unfound {
    color: #FFD700 !important;
    font-weight: 700;
    text-shadow: 0 0 2px rgba(0,0,0,0.45);
}

html.mode-parchment .word-item.admin-unfound,
body.mode-parchment .word-item.admin-unfound {
    color: #FFD700 !important;
    background: #000 !important;
    border-radius: 6px;
    padding: 0 6px;
    opacity: 1 !important;
}
.word-item.active {
    background: var(--word-active-bg, rgba(25,118,210,0.25));
    color: var(--word-active-fg, var(--text));
    border-radius: 6px;
    font-weight: 900;
}


/* ========================================================== */
/* CHAT COLUMN                                                */
/* ========================================================== */

#chat-column {
    width: 495px;
    padding: 10px;
    box-sizing: border-box;
    border-left: 2px solid var(--panel-border);
    background: var(--panel-bg);
    display: flex;
    flex-direction: column;
    min-height: 0;
}

/* pinned box */
#chat-pinned {
    border: 1px solid var(--pinned-color);
    background: var(--chat-bg);
    padding: 6px;
    margin-bottom: 6px;
    border-radius: 6px;
}


#chat-pinned-title {
    font-size: 13px;
    font-weight: 900;
    margin-bottom: 4px;
    color: var(--pinned-color);
}

#chat-pinned-text {
    font-size: 13px;
    line-height: 1.25;
    color: var(--pinned-color);
    font-weight: 900;
    white-space: pre-wrap;
}

#chat-panel{
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--panel-border);
    padding: 6px;
    box-sizing: border-box;
    background: var(--chat-bg);
    overflow-y: auto;
    margin-bottom: 6px;

  line-height: 1.25;
}

.chat-msg {
    padding: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--chat-msg-border);
    background: var(--chat-msg-bg);
    font-size: 13px;
    line-height: 1.25;
    white-space: pre-wrap;
    user-select: text;
    cursor: text;

  color: var(--chat-fg);}

#chat-compose {
    display: flex;
    gap: 8px;
    align-items: flex-end;
    width: 100%;
}

#chat-input {
    flex: 1 1 auto;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px;
    border: 1px solid var(--chat-input-border);
    border-radius: 6px;
    background: var(--chat-input-bg);
    color: var(--chat-fg);
    font-size: 14px;
    line-height: 1.25;
    resize: none;
}


#chat-send {
    flex: 0 0 auto;
    padding: 10px 14px;
    background: var(--accent-btn);
    border: none;
    border-radius: 0;
    color: var(--tab-active-text, var(--text));
    font-weight: 900;
    cursor: pointer;
    white-space: nowrap;
}

#word-column h2,
#chat-column h2 {
    margin: 4px 0 6px 0;
    font-size: 18px;
}

/* ========================================================== */
/* MOBILE SUPPORT                                             */
/* ========================================================== */

@media (max-width: 900px) {

    body {
        overflow-x: hidden;
    }

    #top-bar {
        flex-wrap: wrap;
        height: auto;
        justify-content: center;
        text-align: center;
    }

    #status {
        width: 100%;
        text-align: center;
        margin-bottom: 4px;
    }

    #assistant-inline {
    margin-left: 0;
    font-size: 14px;
    font-weight: 900;
    color: #fff;
    padding: 6px 12px;
    border-radius: 12px;
    background: rgba(0,0,0,0.90);
    border: 1px solid rgba(255,255,255,0.16);
    white-space: nowrap;
    z-index: 6100;
    position: relative;
}

    #top-links {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
        flex-wrap: wrap;
        gap: 8px;
    }

    #new-puzzle {
        width: 100%;
        order: 10;
        margin-top: 4px;
    }

    .top-link {
        flex-grow: 1;
        text-align: center;
        min-width: 80px;
    }

    #main-area {
        flex-direction: column;
        height: calc(100vh - var(--topbar-h));
        border: none;
        overflow: hidden;
    }

    #board-area {
        width: 100%;
        min-height: auto;
        order: 1;
        padding: 4px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: auto;
    }

    #board {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0;
    }

    #word-column {
        width: 100%;
        height: 300px;
        border-left: none;
        border-top: 2px solid var(--panel-border);
        order: 2;
        min-height: 0;
    }

    #chat-column {
        width: 100%;
        height: 250px;
        border-left: none;
        border-top: 2px solid var(--panel-border);
        order: 3;
        min-height: 0;
    }
}

/* Word list flash effects */
.word-item.flash-found {
    background: rgba(0, 200, 0, 0.35);
    border-color: rgba(0, 200, 0, 0.8);
    color: #fff;
}
.word-item.flash-already {
    background: rgba(160, 60, 200, 0.35);
    border-color: rgba(160, 60, 200, 0.8);
    color: #fff;
}


#solved-box .solved-title {
    font-size: 28px;
    margin-bottom: 6px;
}
#solved-box .solved-sub {
    font-size: 14px;
    opacity: 0.85;
    margin-bottom: 10px;
}
#solved-box .solved-results {
    display: flex;
    gap: 16px;
    font-size: 14px;
    text-align: left;
    align-items: flex-start;
    max-height: 380px;
}
#solved-box .scores, #solved-box .breakdown {
    flex: 1;
    min-width: 0;
}
#solved-box .section-title {
    font-weight: bold;
    margin-bottom: 6px;
    font-size: 14px;
}
#solved-box .score-line, #solved-box .word-line {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
}
#solved-box .breakdown-list {
    max-height: 260px;
    overflow: auto;
    padding-right: 6px;
    border-top: 1px solid rgba(255,255,255,0.12);
    margin-top: 6px;
}
#solved-box .muted {
    opacity: 0.75;
}

/* ========================================================== */
/* SOLVED MODAL + PLAYER COUNT (MP)                            */
/* ========================================================== */

#active-count {
    white-space: pre-line;
    line-height: 1.15;
}

.solved-overlay {
    position: fixed;
    inset: 0;
    display: none;
    /* When shown, JS sets display:flex */
    z-index: 9999;
    background: rgba(0,0,0,0.75);
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.solved-box {
    width: min(560px, 94vw);
    max-height: 80vh;
    overflow: auto;
    background: var(--panel-bg, #111);
    color: var(--text, #ddd);
    border: 1px solid var(--panel-border, #444);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.55);
}

.solved-box h2 {
    margin: 0 0 10px 0;
    font-size: 18px;
}

.solved-box .solved-sub {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: var(--muted, rgba(221,221,221,0.72));
}

.solved-box .solved-stats {
    margin: 8px 0 14px 0;
    font-size: 13px;
    color: var(--text, #ddd);
}

.solved-box .solved-list {
    margin: 0;
    padding-left: 18px;
    font-size: 13px;
    color: var(--text, #ddd);
}

.solved-box .solved-hint {
    margin-top: 12px;
    font-size: 12px;
    color: var(--muted, rgba(221,221,221,0.72));
}

/* -------------------------------------------------- */
/* -------------------------------------------------- */
#top-bar {
    position: relative;
    z-index: 10000;
}
#top-links {
    position: relative;
    z-index: 10001;
}

/* Name required overlay */
.name-overlay{
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.65);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.name-box{
  background: var(--panel-bg);
  color: var(--text);
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 16px;
  min-width: 280px;
  max-width: 92vw;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.name-title{ font-weight: 900; margin-bottom: 6px; }
.name-hint{ font-size: 12px; color: var(--muted); margin-bottom: 10px; }
#name-input{
  width: 100%;
  padding: 10px;
  border-radius: 0;
  border: 1px solid var(--chat-input-border);
  background: var(--chat-input-bg);
  color: var(--text);
  box-sizing: border-box;
  margin-bottom: 10px;
}

#pass-input{
  width: 100%;
  padding: 10px;
  border-radius: 0;
  border: 1px solid var(--chat-input-border);
  background: var(--chat-input-bg);
  color: var(--text);
  box-sizing: border-box;
  margin-bottom: 10px;
}
.name-hint-small{
  margin-top: -4px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--muted);
}
.name-actions{
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-wrap: wrap;
}
.name-error{
  margin-top: -4px;
  margin-bottom: 10px;
  font-size: 12px;
  color: #ff9a9a;
}


/* Chat unread badge (desktop) */
#chat-unread{
  margin-left: 0;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid #555;
  font-size: 12px;
  color: #ddd;
  vertical-align: middle;
}

/* ========================================================== */
/* INTRO OVERLAY                                               */
/* ========================================================== */
.intro-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.75);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.intro-box {
  width: min(600px, calc(100vw - 24px));
  background: #1a1a1a;
  border: 1px solid #333;
  border-radius: 12px;
  padding: 16px;
  color: #ddd;
}
.intro-title { font-size: 20px; margin-bottom: 10px; }
.intro-text { font-size: 14px; line-height: 1.4; margin-bottom: 12px; }
.intro-text ul { margin: 0 0 0 18px; padding: 0; }
.intro-text li { margin: 6px 0; }
.intro-actions { display:flex; justify-content:flex-end; }
.intro-actions button { padding: 10px 16px; cursor: pointer; }

#top-bar{position:relative;z-index:5000;}
#top-links{position:relative;z-index:5001;}




/* NEW MESSAGE INDICATOR */
#chat-new-indicator {
    display: none;
    margin: 6px 0;
    padding: 6px 10px;
    border-radius: 0;
    background: #ffd400;
    color: #000;
    font-weight: 900;
    text-align: center;
    cursor: pointer;
    user-select: none;
}
#chat-new-indicator.show {
    display: block;
}


/* Chat / Players toggle (desktop) */
.chat-view-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.chat-view-tab.tab-new {
  background: #ffd400 !important;
  color: #000 !important;
  font-weight: 800 !important;
  border-color: #b59c00 !important;
}
.chat-view-tab {
  background: var(--tab-bg, #111);
  border: 1px solid var(--tab-border, #333);
  color: var(--tab-text, #ddd);
  padding: 4px 10px;
  border-radius: 0;
  cursor: pointer;
  font-size: 12px;
}
.chat-view-tab.active {
  background: var(--tab-active-bg, #1d3d5c);
  border-color: var(--tab-active-border, #2b6ca3);
  color: var(--tab-active-text, #fff);
}
/* Reuse players styles */

#players-panel,
#online-panel,
#admin-panel {
  flex: 1 1 auto;
  min-height: 0;
  border: 1px solid var(--panel-border);
  padding: 6px;
  box-sizing: border-box;
  background: var(--panel-bg);
  overflow: hidden; /* lists inside handle scrolling */
  margin-bottom: 6px;
  display: flex;
  flex-direction: column;
}


/* Make each admin view fill the full right-column panel height */
#admin-view-regs,
#admin-view-results,
#admin-view-lastseen,
#admin-view-custom {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* inner lists handle scrolling */
}


.players-info {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}
.players-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.player-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid #222;
  border-radius: 0;
  margin-bottom: 6px;
  background: rgba(255,255,255,0.03);
  font-size: 13px;
}
.player-meta {
  font-size: 11px;
  color: var(--muted);
  white-space: normal;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  line-height: 1.15;
}

/* ========================================================== */
/* ACCOUNT UI (HIDDEN BY DEFAULT)                             */
/* ========================================================== */
/* We keep account/registration code in the project, but do not show it unless explicitly enabled. */
/* Enable: add ?authui=1 to the URL (or set localStorage.authUiEnabled="1") */
#pass-input,
#auth-login,
#auth-register {
  display: none;
}
html.auth-ui-enabled #pass-input {
  display: block;
}
html.auth-ui-enabled #auth-login,
html.auth-ui-enabled #auth-register {
  display: inline-block;
}


html.mode-neon body{
    color: var(--text);
}

html.mode-neon #top-bar{
    color: var(--link-color);
}

html.mode-neon #status{
    color: var(--link-color);
}

html.mode-neon #name-label,
html.mode-neon #name-change,
html.mode-neon #name-change a{
    color: var(--link-color) !important;
}


html.mode-neon #clue-toggle,
html.mode-neon #point-toggle,
html.mode-neon #first-letter-toggle,
html.mode-neon #points-explained-toggle,
html.mode-neon #directions-link{
    color: var(--link-color);
}


html.mode-neon #word-column h2,
html.mode-neon #chat-column h2{
    color: #ff007f;
    text-transform: uppercase;
    text-shadow: 0 0 10px #ff007f;
}

html.mode-neon .word-item{
    color: var(--link-color);
}

html.mode-neon .word-item.found{
    color: #39ff14;
    text-shadow: 0 0 8px #39ff14;
}

html.mode-neon .word-item.found-other{
    color: #c084fc;
}

html.mode-neon .chat-msg{
    background: var(--chat-msg-bg);
    border-bottom: 1px solid var(--chat-msg-border);
    color: var(--chat-fg);
    box-shadow: 0 0 6px rgba(0, 179, 255, 0.35);
    text-shadow: 0 0 8px rgba(0, 179, 255, 0.45);
}

html.mode-neon #chat-input{
    background: #000000;
    border: 1px solid var(--panel-border);
    color: var(--link-color);
}

html.mode-neon #chat-input::placeholder{
    color: var(--link-color);
    opacity: 0.85;
}

html.mode-neon #chat-send{
    background: #000000;
    border: 1px solid var(--panel-border);
    color: #ff007f;
    box-shadow: 0 0 8px rgba(255,0,127,0.35);
}

html.mode-neon .tile.unused{    box-shadow: none;
    text-shadow: 0 0 8px rgba(57,255,20,0.70);
}

/* Dropdown in top bar (desktop) */
.top-select{
    appearance:auto;
    background: var(--top-select-bg, var(--topbar-bg));
    color: var(--topbar-text, var(--text));
    border: 1px solid var(--top-select-border, var(--panel-border, var(--topbar-border)));border-radius: 0;
    padding: 7px 8px;
    font-size: 14px;
    height: 34px;
    cursor: pointer;
}


html.mode-neon .top-select{
    background: #000000;
    color: #39ff14;
    border: 1px solid #39ff14;
    box-shadow: 0 0 5px rgba(57,255,20,0.45);
}


/* ========================================================== */
/* NEON MODE FIXES: red lines + blue text (no white UI chrome) */
/* ========================================================== */

html.mode-neon #top-bar {
  color: var(--link-color);
}

html.mode-neon #top-bar .top-link,
html.mode-neon #top-bar .top-select:not(#color-select) {
  color: var(--link-color);
}

/* Keep these 5 menu items red (as requested) */
html.mode-neon #clue-toggle,
html.mode-neon #point-toggle,
html.mode-neon #first-letter-toggle,
html.mode-neon #points-explained-toggle,
html.mode-neon #directions-link {
  color: #ff0000;
}

/* Make all UI lines red */
html.mode-neon .top-link.top-toggle,
html.mode-neon .top-select:not(#color-select) {
  border-color: var(--topbar-border) !important;
}

/* Right-side panels + chat input borders */
html.mode-neon #words-panel-header,
html.mode-neon #words-panel,
html.mode-neon #chat-panel,
html.mode-neon #chat-input,
html.mode-neon #chat-message-input,
html.mode-neon #chat-send {
  border-color: var(--panel-border) !important;
}

/* Replace gray dividers with red */
html.mode-neon #words-panel-header {
  border-bottom: 1px solid var(--panel-border) !important;
  background: var(--panel-bg);
}

/* REMOVE separators between puzzle words (no lines) */
html.mode-neon .word-item {
  border-bottom: none !important;
}

html.mode-neon .chat-view-tab {
  border-color: var(--panel-border) !important;
  color: var(--link-color) !important;
  background: var(--panel-bg) !important;
}
html.mode-neon .chat-view-tab.active {
  border-color: var(--panel-border) !important;
  color: var(--link-color) !important;
  background: var(--panel-bg) !important;
}

html.mode-neon #chat-panel {
  background: var(--panel-bg) !important;
}

html.mode-neon #chat-message-input {
  background: var(--board-bg) !important;
  color: var(--link-color) !important;
}

html.mode-neon #chat-send {
  background: var(--accent-btn) !important;
  color: var(--link-color) !important;
}

html.mode-neon #color-select {
  color: var(--tile-text) !important;
  border-color: var(--tile-border) !important;
}

/* NEON: force ALL panel borders red (fix gray box borders) */
html.mode-neon #word-column,
html.mode-neon #chat-column,
html.mode-neon #words-panel,
html.mode-neon #chat-panel,
html.mode-neon #players-panel,
html.mode-neon #admin-panel {
  border-color: var(--panel-border) !important;
}

/* If your layout uses left dividers */
html.mode-neon #word-column,
html.mode-neon #chat-column {
  border-left-color: var(--panel-border) !important;
}


/* ========================================================== */
/* SCROLLBAR (WORDS PANEL)                                    */
/* Chrome/Edge/Safari                                         */
/* ========================================================== */

#words-panel {
    scrollbar-color: var(--panel-border) var(--panel-bg);
    scrollbar-width: thin;
}

#words-panel::-webkit-scrollbar {
    width: 12px;
}

#words-panel::-webkit-scrollbar-track {
    background: var(--panel-bg);
}

#words-panel::-webkit-scrollbar-thumb {
    background: var(--panel-border);
    border: 2px solid var(--panel-bg);
    border-radius: 0;
}

#words-panel::-webkit-scrollbar-thumb:hover {
    background: #444;
}




/* ========================================================== */
/* MY PUZZLES OVERLAY                                         */
/* ========================================================== */
.history-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.72);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
}
.history-box{
  background: #151515;
  border: 1px solid #333;
  border-radius: 0;
  max-width: 720px;
  width: 100%;
  max-height: 80vh;
  overflow: hidden;
  box-shadow: 0 10px 35px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
}
.history-title{
  font-size: 18px;
  font-weight: bold;
  padding: 12px 12px 6px 12px;
}
.history-hint{
  font-size: 12px;
  color: #aaa;
  padding: 0 12px 10px 12px;
}
.history-list{
  overflow: auto;
  padding: 0 12px 12px 12px;
}
.history-row{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid #2a2a2a;
}
.history-row:first-child{ border-top: none; }
.history-meta{
  font-size: 13px;
  color: #ddd;
}
.history-sub{
  font-size: 12px;
  color: #aaa;
  margin-top: 2px;
}
.history-actions{
  padding: 10px 12px;
  border-top: 1px solid #2a2a2a;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.history-btn{
  cursor: pointer;
}


/* ==========================================================
#scores-refresh-note {
  font-size: 12px;
  opacity: 0.85;
}

#scores-title {
  font-size: 18px;
  font-weight: 900;
  margin-top: 2px;
}

#scores-status {
  text-align: center;
  font-size: 13px;
  opacity: 0.9;
  padding: 4px 0;
  flex: 0 0 auto;
}

#scores-table {
  flex: 1 1 auto;
  overflow-y: auto; /* scroll only if needed */
  overflow-x: hidden;
  padding: 6px 6px 10px 6px;
}

#scores-table .scores-table-inner {
  width: 100%;
  border-collapse: collapse;
  margin: 0 auto;
  max-width: 520px;
}

#scores-table .scores-table-inner th,
#scores-table .scores-table-inner td {
  padding: 6px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  font-size: 13px;
}

#scores-table .scores-table-inner thead th {
  position: sticky;
  top: 0;
  background: rgba(0,0,0,0.65);
  backdrop-filter: blur(2px);
  color: #fff;

}


/* Parchment theme: add a little "wood tile" depth */
html.mode-parchment .tile{
    letter-spacing: -0.03em;
  background-image: none;
}

html.mode-parchment .tile{
    letter-spacing: -0.03em;
  background-image: none;
}
html.mode-parchment #topbar a, html.mode-parchment #topbar .topbar-link{
  color: var(--topbar-link);
}



/* Players tab split layout */
#players-split {
    display: flex;
    gap: 10px;
    min-height: 0;
}

#players-left,
#players-right {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

#players-divider {
    width: 1px;
    background: var(--panel-border);
}

@media (max-width: 560px) {
    #players-split {
        flex-direction: column;
    }
    #players-divider {
        width: 100%;
        height: 1px;
    }

/* ====================================================== */
/* MOBILE LAYOUT TUNING (PHONES)                           */
/* ====================================================== */
:root{
    --topbar-h: 56px;
}

#main-area{
    /* allow natural vertical scrolling on phones */
    height: auto;
    overflow: auto;
}

#board-area{
    padding: 6px;
    overflow: auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#board{
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    margin: 4px auto 0 auto;
}

/* Give the board more space by shrinking side panels */
#word-column{
    height: min(26dvh, 180px);
}

#chat-column{
    height: min(26dvh, 180px);
}

.tile{
    letter-spacing: -0.03em;

    border-radius: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
}

#top-bar button,
#top-bar .tab-button{
    padding: 6px 8px;
    font-size: 14px;
}
}


/* Admin sub-tabs */
.admin-tabs {
    display: flex;
    gap: 8px;
    margin: 8px 0;
}

.admin-tab {
    padding: 6px 10px;
    border-radius: 0;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    color: var(--text);
    cursor: pointer;
    font-size: 12px;
    user-select: none;
}

.admin-tab.is-active {
    background: rgba(255,255,255,0.08);
    border-color: var(--admin-accent);
    color: var(--admin-accent);
    font-weight: 800;
}

.admin-sanity {
    margin: 0;
    padding: 10px;
    border-radius: 0;
    border: 1px solid var(--panel-border);
    background: var(--panel-bg);
    color: var(--text);
    overflow: auto;
    max-height: 320px;
    font-size: 12px;
}


/* Ensure chat scroll works within chat column */
#chat-main {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}


/* Ensure admin lists can flex + scroll */
#admin-view-regs,
#admin-view-results,
#admin-view-lastseen,
#admin-view-sanity,
#admin-view-static {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#admin-sanity {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}

#admin-static-sanity {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
}


/* ===== Top area: 2-row layout ===== */
#top-bar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 6px 10px 4px 10px;
}

#top-bar .top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

#top-left-1, #top-left-2 {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

#top-right-1 {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

#top-right-2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

#status {
  white-space: nowrap;
}

#active-count {
  white-space: nowrap;
}

/* Directions overlay additions */
.intro-subtitle {
  margin-top: 10px;
  font-weight: 900;
  color: #bbb;
}
.intro-points {
  margin-top: 6px;
}


/* Personal score line (Scores tab) */
.my-score-line {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 13px;
  padding: 2px 0 6px 0;
  white-space: pre;
  color: #9f9;
}


/* Scores: click-to-jump highlight */
.score-highlight td {
  box-shadow: 0 0 0 2px #0f0 inset;
}


/* Admin ON: show not-found words in purple (found stays green) */
.admin-enabled .word-item:not(.found):not(.found-other) {
    color: #4169e1;
}


html.mode-parchment .word-item.found{
  color: #000;
}


/* Parchment (O.G.): score table header must be readable on light background */
html.mode-parchment #scores-table .scores-table-inner thead th{
  background: var(--panel-bg);
  color: var(--topbar-text);
  border-bottom: 1px solid rgba(160, 140, 106, 0.75);
  font-weight: 900;
}
html.mode-parchment #scores-table .scores-table-inner th,
html.mode-parchment #scores-table .scores-table-inner td{
  border-bottom: 1px solid rgba(160, 140, 106, 0.35);
}

/* Parchment (Scrog): Scores tab background should match the page background */
html.mode-parchment #scores-panel{
  background: var(--page-bg);
  color: var(--text);
}


.player-meta-line { white-space: normal; }



/* -----------------------
   Header layout (two rows)
   ----------------------- */
#top-bar .top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: nowrap;
}

#top-bar .top-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#top-bar .top-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

#status-line-1,
#status-line-2 {
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

#status-line-2 {
  opacity: 0.95;
}

.top-select.top-select-narrow {
  width: 78px;
  min-width: 78px;
  padding-left: 8px;
  padding-right: 8px;
}

/* Inline pills should not look like black boxes; hide unless populated. */
.inline-pill {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: none;
  background: transparent;
  color: var(--muted);
}

/* -----------------------
   Admin maintenance cards
   ----------------------- */
.admin-maintenance {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 10px 0 14px 0;
}

.admin-tools-card {
  border: 1px solid var(--panel-border);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 280px;
  background: var(--panel-bg);
}

.admin-tools-title {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 900;
}

.admin-tools-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-tools-input {
  padding: 6px 10px;
  border-radius: 0;
  border: 1px solid var(--panel-border);
  background: var(--panel-bg);
  color: inherit;
  min-width: 240px;
}

.admin-tools-msg {
  margin-top: 8px;
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  opacity: 0.95;
}

.admin-tools-small {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.35;
}





/* ========================================================== */
/* MULTI-LETTER HIGHLIGHT (dblclick)                           */
/* ========================================================== */
.tile.hl1{
    background: var(--hl1) !important;
    color: #000 !important;
    box-shadow: none;}
.tile.hl2{
    background: var(--hl2) !important;
    color: #000 !important;
    box-shadow: none;}
.tile.hl3{
    background: var(--hl3) !important;
    color: #000 !important;
    box-shadow: none;}

@media (max-width: 560px){
    .tile.hl1{ background: var(--hl1) !important; color: #000 !important; box-shadow: none; }
    .tile.hl2{ background: var(--hl2) !important; color: #000 !important; box-shadow: none; }
    .tile.hl3{ background: var(--hl3) !important; color: #000 !important; box-shadow: none; }
}


/* Chat formatting */
.chat-msg{padding:2px 0; margin:0; line-height:1.25;}
.chat-name{color:var(--chat-name); font-weight: 900; margin-right:6px;}
.chat-stamp{opacity:.65; font-size:12px; margin-right:6px;}
.chat-text{color:inherit;}
.chat-toggle{opacity:.85;}
.chat-toggle.on{box-shadow:0 0 0 1px rgba(255,255,255,.15) inset;}
#chat-pinned{border-color: rgba(255,64,64,.35) !important;}
#chat-pinned-title{color:#ff5c5c !important;}
#chat-pinned-text{color:#ff5c5c !important;}
body.mode-parchment #chat-pinned{background: var(--chat-bg) !important; border-color: rgba(0,0,0,0.25) !important;}
body.mode-parchment #chat-pinned-title{color: var(--pinned-color) !important;}
body.mode-parchment #chat-pinned-text{color: var(--pinned-color) !important;}


/* Always-visible online strip */
.online-strip{margin:6px 0 4px 0;padding:6px 8px;border:1px solid rgba(255,255,255,.12);border-radius: 0;font-size:12px;line-height:1.2;opacity:.95;white-space: normal;display:none;word-break: break-word;overflow-wrap:anywhere;}
.players-list .player-row{padding:4px 6px;}
.players-list .player-meta{opacity:.75; font-size:12px;}


/* Chat name visibility tweaks by theme */
html.mode-parchment .chat-name, body.mode-parchment .chat-name{color:var(--chat-name);}
html.mode-neon .chat-name, body.mode-neon .chat-name{color:#39ff14;}

.intro-paragraph{margin:8px 0; line-height:1.35;}


/* Drag word overlay (shown while selecting tiles). */
.drag-overlay{
  position:fixed;
  left:50%;
  top:40px;
  transform:translate(-50%, -50%);
  z-index:6000;
  background: rgba(0,0,0,0.88);
  color:#fff;

  /* Keep the pill compact so it never looks like it "fills" the top bar. */
  display:inline-block;
  padding: 4px 10px;
  line-height: 1.05;
  border-radius: 0;

  font-weight: 900;
  font-size: clamp(18px, 3.2vw, 36px);
  letter-spacing: 0.06em;
  text-transform: uppercase;

  pointer-events:none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);

  max-width: min(900px, calc(100vw - 24px));
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align:center;
}


/* Dragged word display: keep it in the top bar center and avoid covering right-side status (e.g., Point Solving). */
#top-bar #drag-inline.drag-overlay{
  position:fixed;
  left:50%;
  top:40px;
  transform:translate(-50%, -50%);
  z-index:6000;
  background: rgba(0,0,0,0.88);
  color:#fff;

  /* Keep the pill compact so it never looks like it "fills" the top bar. */
  display:inline-block;
  padding: 4px 10px;
  line-height: 1.05;
  border-radius: 0;

  font-weight: 900;
  font-size: clamp(18px, 3.2vw, 36px);
  letter-spacing: 0.06em;
  text-transform: uppercase;

  pointer-events:none;
  box-shadow: 0 10px 24px rgba(0,0,0,0.45);

  max-width: min(900px, calc(100vw - 24px));
  box-sizing: border-box;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align:center;
}


/* Scores panel layout */
.scores-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 8px;
    border-bottom: 1px solid rgba(255, 0, 0, 0.35);
}

.scores-title {
    font-size: 13px;
    font-weight: 900;
}

.scores-refresh {
    padding: 4px 10px;
    font-size: 12px;
}

.scores-me {
    padding: 6px 8px;
    font-size: 12px;
    border-bottom: 1px solid rgba(255, 0, 0, 0.15);
    white-space: pre-wrap;
}

.scores-list {
    padding: 6px 8px;
}

.scores-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

.scores-table th,
.scores-table td {
    padding: 2px 4px;
    vertical-align: top;
}

.scores-table thead th {
    font-weight: 900;
    border-bottom: 1px solid rgba(255, 0, 0, 0.25);
}

.scores-table tbody tr:nth-child(odd) td {
    opacity: 0.95;
}

.scores-table .col-rank { width: 28px; text-align: right; }
.scores-table .col-pts  { width: 70px; text-align: right; }
.scores-table .col-words{ width: 70px; text-align: right; }

.scores-me .me-star {
    font-weight: 900;
}


/* Scores columns */
.scores-table .col-puzzles,
.scores-table .col-finished { width: 56px; text-align: right; }


/* Scores: keep summary/header above table (prevent side-by-side collapse) */
#scores-panel .scores-header,
#scores-panel .scores-me,
#scores-panel .scores-table-wrap {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    box-sizing: border-box;
}

/* Scores table: center within panel */
#scores-panel .scores-table-wrap {
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}


#scores-panel .scores-me {
    text-align: center !important;
    white-space: normal !important;
}

#scores-panel .scores-header {
    align-items: center;
}

#scores-panel .scores-table {
    table-layout: fixed;
}



/* Scores view: fullscreen like legacy screenshot */
body.scores-fullscreen #board-area,
body.scores-fullscreen #word-column {
    display: none !important;
}

body.scores-fullscreen #chat-column {
    width: 100% !important;
    flex: 1 1 auto !important;
    border-left: none !important;
    padding: 10px 12px !important;
}

html.mode-parchment body.scores-fullscreen #chat-column {
    background: var(--page-bg) !important;
}

body.scores-fullscreen #chat-view-tabs {
    justify-content: center;
}

body.scores-fullscreen #scores-panel .scores-table-wrap {
    max-width: 520px;
    margin: 0 auto;
}

/* Scores (centered like legacy screenshot; tight rows) */
#scores-panel { overflow: auto; padding: 10px 10px 16px 10px; }

#scores-panel .scores-me-line {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    margin: 4px 0 8px 0;
    white-space: pre;
}



/* Numbered Puzzles: match Scores alignment/centering (no Refresh button) */
#custom-panel .scores-table-wrap{
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

#custom-panel .scores-updates-line{
    max-width: 520px;
    margin: 0 auto 6px auto;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#custom-panel .scores-updates-text{
    width: 100%;
    text-align: center;
    padding-right: 0;
    box-sizing: border-box;
}

#custom-panel .scores-me-line{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}

/* Puzzle number rankings: wrap into 2 columns (no horizontal scroll) */
#custom-panel .custom-all-title{
    font-size: 18px !important;
    font-weight: 600;
    text-align: center;
    margin: 10px 0 6px 0;
    line-height: 1.15;
}

#custom-panel .custom-all-grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    padding: 6px 0 14px 0;
    max-width: 100%;
    margin: 0 auto;
    overflow: visible;
}

@media (max-width: 640px){
    #custom-panel .custom-all-grid{
        grid-template-columns: 1fr;
    }
}

#custom-panel .custom-all-card{
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

#custom-panel .custom-all-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 0 6px 0;
    padding: 2px 0 2px 0;
    background: transparent;
}

#custom-panel .custom-all-chip{
    background: transparent;
    color: inherit;
    border: 0;
    padding: 0;
    border-radius: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
}

#custom-panel .custom-all-chip-link{
    cursor: pointer;
    text-decoration: underline;
}

#custom-panel .custom-all-chip-link:focus{
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

#custom-panel .custom-all-cols{
    display: flex;
    gap: 18px;
    align-items: center;
    justify-content: flex-end;
    font-size: 16px;
    font-weight: 400;
    white-space: nowrap;
}

/* Keep mini tables compact */
#custom-panel table.custom-mini{
    width: 100%;
    border-collapse: collapse;
}

#custom-panel table.custom-mini tbody td{
    padding: 3px 6px;
}

#custom-panel table.custom-mini .col-rank{
    width: 34px;
}

#custom-panel table.custom-mini .col-pts,
#custom-panel table.custom-mini .col-words{
    text-align: right;
    width: 64px;
}

#custom-panel table.custom-mini .col-check{
    width: 34px;
    text-align: center;
}
#scores-panel .scores-me-line .scores-me-name {
    font-size: 12px;
    font-weight: 400;
    margin-right: 10px;
    display: inline-block;
}

#scores-panel .scores-me-line .scores-me-stats {
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
}


/* Scores: keep the table compact (avoid columns stretching too far apart) */
#scores-panel .scores-table-wrap{
    max-width: 520px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}

/* Align the "Updates / Refresh" row to the same width as the table */
#scores-panel .scores-updates-line{
    /* Keep this row aligned to the same width as the table */
    max-width: 520px;
    margin: 0 auto 6px auto;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-sizing: border-box;
}

/* Center the updates text; keep room for the Refresh button on the right */
#scores-panel .scores-updates-text{
    width: 100%;
    text-align: center;
    padding-right: 0;
    box-sizing: border-box;
    font-size: 14px;
    line-height: 1.2;
}

/* Keep Refresh on the right edge of the same width as the table */
#scores-panel .scores-refresh{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    padding: 2px 8px;
    font-size: 11px;
}

/* Align the "me" line to the same width as the table */
#scores-panel .scores-me-line{
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
}




#scores-panel .scores-title-big {
    text-align: center;
    font-size: 26px;
    font-weight: 900;
    margin: 4px 0 10px 0;
}

#scores-panel .scores-table-wrap {
    background: rgba(0,0,0,0.20);
    padding: 6px 8px 8px 8px;
    border-radius: 6px;
}

#scores-panel .scores-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}

#scores-panel .scores-table thead th {
    font-weight: 900;
    padding: 6px 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

#scores-panel .scores-table tbody td {
    padding: 2px 4px; /* tighter lines */
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#scores-panel .scores-table tbody tr:last-child td { border-bottom: none; }

#scores-panel .col-rank { width: 26px; text-align: right; }
#scores-panel .col-pts,
#scores-panel .col-puzzles,
#scores-panel .col-finished,
#scores-panel .col-words { width: 56px; text-align: right; }


/* Scores: align header titles with their columns */
#scores-panel th.col-name{ text-align: left; padding-left: 6px; }
/* Custom (Numbered Puzzles) table: fit columns without horizontal scrolling */
#custom-panel .scores-table-wrap{ overflow-x: hidden; }
#custom-panel .scores-table{ width: 100%; table-layout: fixed; }
#custom-panel th.col-rank, #custom-panel td.col-rank{ width: 26px; text-align: right; padding-right: 4px; }
#custom-panel th.col-name, #custom-panel td.col-name{
    width: 110px; max-width:110px;
    text-align: left; padding-left: 6px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#custom-panel th.col-pts, #custom-panel td.col-pts,
#custom-panel th.col-puzzles, #custom-panel td.col-puzzles,
#custom-panel th.col-finished, #custom-panel td.col-finished,
#custom-panel th.col-words, #custom-panel td.col-words{
    width: 52px; text-align: right;
}
#custom-panel th.col-words{ padding-right: 6px; }


#scores-panel td.col-name{ text-align: left; padding-left: 6px; }

/* Slightly tighter rank column */
#scores-panel th.col-rank, #scores-panel td.col-rank{ padding-right: 4px; }

/* Scrog/Parchment: make Scores background match theme (remove gray wrap) */
html.mode-parchment #scores-panel .scores-table-wrap,
body.mode-parchment #scores-panel .scores-table-wrap {
    background: transparent !important;
}

html.mode-parchment #scores-panel .scores-table thead th {
    border-bottom: 1px solid rgba(160, 140, 106, 0.75);
}
html.mode-parchment #scores-panel .scores-table tbody td {
    border-bottom: 1px solid rgba(160, 140, 106, 0.35);
}

/* Scrog/Parchment: table header bars should match parchment background (no dark strip)
   Applies to Scores / Today / Numbered Puzzles tables.
*/
body.mode-parchment #scores-panel .scores-table thead th,
body.mode-parchment #today-panel  .scores-table thead th,
body.mode-parchment #custom-panel .scores-table thead th {
    background: var(--page-bg) !important;
    backdrop-filter: none !important;
}

body.mode-parchment #today-panel .scores-table thead th,
body.mode-parchment #custom-panel .scores-table thead th {
    border-bottom: 1px solid rgba(160, 140, 106, 0.75);
}

body.mode-parchment #today-panel .scores-table tbody td,
body.mode-parchment #custom-panel .scores-table tbody td {
    border-bottom: 1px solid rgba(160, 140, 106, 0.35);
}

/* Today panel: center the header area (title/date/updates/prev-days) while keeping table columns aligned. */
#today-panel .today-title,
#today-panel .today-subtitle,
#today-panel .today-date,
#today-panel .scores-updates-line,
#today-panel .today-prev-days-title,
#today-panel .today-prev-days {
    text-align: center;
}

#today-panel .scores-table th.col-name,
#today-panel .scores-table td.col-name {
    text-align: left;
    padding-left: 6px;
}


/* --- Scrog (parchment) readability fixes --- */
body.mode-parchment {
    background: var(--page-bg) !important;
}

/* Top two rows: bold red by default (except the blue action buttons) */
body.mode-parchment #status-line-1,
body.mode-parchment #status-line-2,
body.mode-parchment #status-line-1 *,
body.mode-parchment #status-line-2 * {
    color: #ff2525 !important;
    font-weight: 700;
}

body.mode-parchment #top-bar .top-link:not(#new-puzzle):not(#my-puzzles),
body.mode-parchment #top-bar .top-link:not(#new-puzzle):not(#my-puzzles) * {
    color: #ff2525 !important;
    font-weight: 700;
}

body.mode-parchment #top-bar select {
    background: var(--page-bg) !important;
    color: #ff2525 !important;
    border: 1px solid #000 !important;
}

/* Keep the main action buttons blue */
body.mode-parchment #new-puzzle,
body.mode-parchment #my-puzzles {
    background: var(--accent-btn) !important;
    border-color: var(--accent-btn) !important;
    color: #fff !important;
    font-weight: 700;
}

/* Tabs should sit on the page bg (not gray) */
body.mode-parchment .tab-btn {
    background: var(--page-bg) !important;
    border-color: #000 !important;
    color: #000 !important;
}
body.mode-parchment .tab-btn.active {
    background: var(--wordlist-bg) !important;
    color: #ff2525 !important;
}

/* Chat input: page bg with black border, black placeholder */
body.mode-parchment #chat-compose {
    background: var(--page-bg) !important;
}
body.mode-parchment #chat-input {
    background: var(--page-bg) !important;
    border: 2px solid #000 !important;
    color: #000 !important;
}
body.mode-parchment #chat-input::placeholder {
    color: #000 !important;
}

/* Scrog theme: make sure the play area matches the parchment background (no white panel) */
body.mode-parchment {
  --page-bg: #faedc9;
}

body.mode-parchment #main-area,
body.mode-parchment #board-area {
    background: var(--page-bg) !important;
}

/* Scrog theme: send button text should be readable (button can stay blue) */
body.mode-parchment #chat-send {
    color: #fff !important;
}

/* Scrog theme: clicked/active word highlight */
body.mode-parchment .word-item.active,
body.mode-parchment .word-item.active * {
    background: #770000 !important;
    color: #fff !important;
}

/* Word list: ensure default text starts black */
body.mode-parchment #words-panel,
body.mode-parchment #words-panel * {
    color: #000;
}

/* Name bar / account controls (JS adds these IDs) */
body.mode-parchment #name-bar {
    background: var(--accent-btn) !important;
    color: #fff !important;
}
body.mode-parchment #name-bar * {
    color: #fff !important;
}


/* Today's Scores (daily leaderboard) */
#today-panel {
    width: 100%;
    box-sizing: border-box;
}

#today-panel .today-title {
    font-weight: 700;
    margin: 2px 0 2px 0;
}

#today-panel .today-subtitle {
    font-size: 0.8em;
    opacity: 0.85;
    margin: 0 0 6px 0;
    font-weight: 400;
}

#today-panel .today-date {
    font-size: 0.9em;
    opacity: 0.85;
    margin: 0 0 6px 0;
}


#today-panel .today-prev-days-title {
    font-weight: 600;
    margin: 10px 0 4px 0;
    opacity: 0.9;
}

#today-panel .today-prev-days {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 4px 0;
}

#today-panel .today-day-btn {
    padding: 6px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.25);
    background: rgba(0,0,0,0.12);
    cursor: pointer;
    font-size: 0.9em;
}

/* Ensure the date buttons are readable in Dull/Neon/Bright themes */
html.mode-bw #today-panel .today-day-btn,
html.mode-neon #today-panel .today-day-btn,
html.mode-color #today-panel .today-day-btn {
    color: #fff;
}

#today-panel .today-day-btn.active {
    outline: 2px solid rgba(255,255,255,0.35);
}


/* ----------------------------------------
   Custom / Numbered puzzles (public tab)
---------------------------------------- */
#custom-panel { overflow: auto; padding: 10px 10px 16px 10px; }
#custom-panel .custom-title { font-size: 16px; font-weight: 700; margin: 2px 0 8px 0; }
#custom-panel .custom-controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px 0; }
#custom-panel .custom-id-wrap { display: flex; align-items: center; gap: 6px; }
#custom-panel .custom-id-label { font-size: 12px; opacity: 0.9; }
#custom-panel #custom-id { width: 80px; padding: 4px 6px; border-radius: 10px; border: 1px solid rgba(160,200,255,0.35); background: rgba(0,0,0,0.25); color: inherit; }
/* Scrog/Parchment: make custom puzzle number input match theme backgrounds */
html.mode-parchment #custom-panel #custom-id,
body.mode-parchment #custom-panel #custom-id {
    background: var(--top-select-bg) !important;
    border-color: var(--top-select-border) !important;
    color: #000000 !important;
}

#custom-panel .custom-info { font-size: 12px; opacity: 0.95; margin: 4px 0 10px 0; }
#custom-panel .scores-table-wrap { max-height: calc(100vh - 220px); overflow: auto; border-radius: 14px; }


#custom-panel .custom-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 6px 0 10px 0;
    /* Let the page scroll naturally (users shouldn't have to discover an inner scroll area). */
    max-height: none;
    overflow-y: visible;
    overflow-x: visible;
}

#custom-panel .custom-list-pager {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 6px 0 8px 0;
}

#custom-panel .custom-list-page-btn {
    padding: 4px 10px;
    border: 1px solid currentColor;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    line-height: 1.1;
}

#custom-panel .custom-list-page-btn.active {
    background: rgba(0, 0, 0, 0.15);
}

#custom-panel .custom-list-check {
    margin-left: 6px;
    font-weight: 900;
}

#custom-panel .custom-list-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 12px;
    border: 1px solid rgba(160,200,255,0.35);
    background: rgba(0,0,0,0.20);
    color: inherit;
    cursor: pointer;
    font-size: 12px;
    line-height: 1.2;
    box-sizing: border-box;
    white-space: nowrap;
}

#custom-panel .custom-list-check {
    font-weight: 900;
    margin-left: 2px;
}

#custom-panel .custom-list-item:hover {
    background: rgba(0,0,0,0.28);
}

#custom-panel .custom-list-item.active {
    border-color: rgba(160,200,255,0.75);
    background: rgba(0,0,0,0.35);
    /* do not change font-weight; keep button width stable */
    outline: 1px solid rgba(160,200,255,0.35);
}

/* Parchment mode */
html.mode-parchment #custom-panel .custom-list-item,
body.mode-parchment #custom-panel .custom-list-item {
    background: var(--top-select-bg) !important;
    border-color: var(--top-select-border) !important;
    color: #000000 !important;
}
html.mode-parchment #custom-panel .custom-list-item.active,
body.mode-parchment #custom-panel .custom-list-item.active {
    background: rgba(255,255,255,0.65) !important;
    border-color: rgba(0,0,0,0.35) !important;
}

#clueLink{
  position: fixed;
  left: 8px;
  bottom: 6px;
  font-size: 12px;
  opacity: 0.85;
  text-decoration: none;
  z-index: 50;
}
#clueLink:hover{
  opacity: 1;
  text-decoration: underline;
}




#custom-panel .scores-me-line{ display:flex; justify-content:center; gap:10px; }


/* ==========================================================
   Scores tables (Scores / Today / Numbered Puzzles)
   Fix centering + font fit + sticky header
   ========================================================== */

#scores-panel .scores-table-wrap,
#today-panel  .scores-table-wrap,
#custom-panel .scores-table-wrap {
    width: 100%;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 6px 10px 6px;
}

#scores-panel .scores-table,
#today-panel  .scores-table,
#custom-panel .scores-table {
    width: 100%;
    max-width: 520px;
    margin: 0 auto;
    border-collapse: collapse;
}

#scores-panel .scores-table th,
#scores-panel .scores-table td,
#today-panel  .scores-table th,
#today-panel  .scores-table td,
#custom-panel .scores-table th,
#custom-panel .scores-table td {
    padding: 5px 6px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    font-size: 12px;
    line-height: 1.2;
    white-space: nowrap;
}

#scores-panel .scores-table thead th,
#today-panel  .scores-table thead th,
#custom-panel .scores-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(0,0,0,0.65);
    backdrop-filter: blur(2px);
}

#scores-panel .scores-table .col-name,
#today-panel  .scores-table .col-name,
#custom-panel .scores-table .col-name {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}

#scores-panel .scores-table .col-rank,
#today-panel  .scores-table .col-rank,
#custom-panel .scores-table .col-rank {
    width: 34px;
    text-align: right;
}

#scores-panel .scores-table .col-pts,
#today-panel  .scores-table .col-pts,
#custom-panel .scores-table .col-pts,
#scores-panel .scores-table .col-puzzles,
#today-panel  .scores-table .col-puzzles,
#scores-panel .scores-table .col-finished,
#today-panel  .scores-table .col-finished,
#scores-panel .scores-table .col-words,
#today-panel  .scores-table .col-words,
#custom-panel .scores-table .col-words {
    text-align: right;
}

/* Numbered puzzle buttons: reserve space for the check so width never changes */
#custom-panel .custom-check {
    flex: 0 0 16px;
    width: 16px;
    text-align: center;
    display: inline-block;
    visibility: hidden;
}

#custom-panel .custom-list-item.active .custom-check {
    visibility: visible;
}

#custom-panel .custom-label {
    white-space: nowrap;
}

/* Prevent the mini-grid checkmark from wrapping onto its own line */
#custom-panel table.custom-mini td {
    white-space: nowrap;
}

/* ==========================================================
   TODAY TAB: ensure the panel actually scrolls
   (overflow-y:auto alone won't scroll without a height cap)
   ========================================================== */
#today-panel {
    /* Single internal scroll for the whole Today tab (no nested scroll areas) */
    max-height: calc(100vh - 240px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 10px 10px 16px 10px;
}

#today-panel .scores-table-wrap {
    /* Let the table expand naturally; the panel itself scrolls */
    max-height: none;
    overflow: visible;
}



/* ========================================================== */
/* MOBILE PORTRAIT: keep Words + Chat side-by-side under board */
/* ========================================================== */
/*
   MOBILE PORTRAIT: keep Words + Chat side-by-side under board
   Use the same breakpoint as the general mobile layout, because some
   devices (and/or zoom levels) exceed 560px CSS width even in portrait.
*/
@media (max-width: 900px) and (orientation: portrait) {

    /* Override the generic <=900px stacking: use a 2-row grid
       Row 1: board spans full width
       Row 2: Words (left) + Chat (right) */
    /* Make the top controls look "normal": don't force New Puzzle full-width */
    #new-puzzle {
        width: auto;
        order: unset;
        margin-top: 0;
        display: inline-block;
    }

    /* Don't stretch the top links into giant blocks on portrait phones */
    .top-link {
        flex-grow: 0;
    }

    /* 2-row grid:
       Row 1: board spans full width
       Row 2: Words (left) + Chat (right) */
    #main-area {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-rows: auto 1fr;
        grid-template-areas:
            "board board"
            "words chat";
        height: calc(100dvh - var(--topbar-h));
        height: calc(100vh - var(--topbar-h));
        overflow: hidden;
        border: 4px solid var(--panel-border);
        box-sizing: border-box;
    }

    #board-area {
        grid-area: board;
        width: 100%;
        order: unset;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 4px;
        min-height: 0;
    }

    #board {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: 0;
    }

    #word-column {
        grid-area: words;
        width: auto;
        height: 100%;
        order: unset;
        border-left: none;
        border-top: 2px solid var(--panel-border);
        border-right: 2px solid var(--panel-border);
        padding: 6px;
        min-width: 0;
        min-height: 0;
    }

    #chat-column {
        grid-area: chat;
        width: auto;
        height: 100%;
        order: unset;
        border-left: none;
        border-top: 2px solid var(--panel-border);
        padding: 6px;
        min-width: 0;
        min-height: 0;
    }

    /* Ensure the scroll stays inside the panels, not the page */
    #words-panel,
    #chat-panel,
    #online-panel,
    #scores-panel,
    #today-panel,
    #custom-panel,
    #admin-panel {
        min-height: 0;
    }

    #chat-main {
        min-height: 0;
    }
}



/* Chat timestamp toggle button (icon) */
.chat-stamp-btn{
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  padding: 0;
  margin-left: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.chat-stamp-btn svg{
  width: 18px;
  height: 18px;
  display:block;
}
.chat-stamp-btn.on{ opacity: .95; }
.chat-stamp-btn.off{ opacity: .95; color: var(--danger, #ff3b3b); }
body.mode-parchment .chat-stamp-btn.off{ color: #b00000; }

/* Admin Registrations: compact single-line rows (no boxes) */
#admin-view-regs .admin-reg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 3px 6px;
  margin: 0;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.15);
  background: transparent;
  font-size: 13px;
}

#admin-view-regs .admin-reg-name {
  flex: 0 0 auto;
  min-width: 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#admin-view-regs .admin-reg-right {
  flex: 1 1 auto;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--muted);
}

/* Admin lists: keep meta text readable in parchment/scrog */
#admin-view-regs .player-meta,
#admin-view-lastseen .player-meta {
  color: var(--muted);
}

#admin-view-regs .admin-reg-link {
  color: inherit;
  text-decoration: underline;
}

#admin-view-regs .admin-reg-link:visited {
  color: inherit;
}

/* FORCE 6-COLUMN GRID ALIGNMENT */
.scores-table {
    width: 100% !important;
    table-layout: fixed !important;
}

/* 1. Rank Column (#) */
.scores-table th:nth-child(1), 
.scores-table td:nth-child(1) { 
    width: 30px !important; 
    text-align: right !important; 
}

/* 2. Player Name */
.scores-table th:nth-child(2), 
.scores-table td:nth-child(2) { 
    width: 85px !important; 
    text-align: left !important; 
    padding-left: 5px !important; 
}

/* 3. Points */
.scores-table th:nth-child(3), 
.scores-table td:nth-child(3), 
.col-pts { 
    width: 80px !important; 
    text-align: right !important; 
}

/* 4. Puzzles */
.scores-table th:nth-child(4), 
.scores-table td:nth-child(4), 
.col-puzzles { 
    width: 65px !important; 
    text-align: right !important; 
}

/* 5. Finished */
.scores-table th:nth-child(5), 
.scores-table td:nth-child(5), 
.col-finished { 
    width: 65px !important; 
    text-align: right !important; 
}

/* 6. Words - Width increased to ensure it appears on right edge */
.scores-table th:nth-child(6), 
.scores-table td:nth-child(6), 
.col-words { 
    width: 85px !important; 
    text-align: right !important; 
    padding-right: 15px !important; 
    font-family: monospace !important; 
}

/* THE HEADER FIX: Forces headers to align right to match the numbers */
.scores-table thead th { text-align: right !important; }
.scores-table thead th:nth-child(2) { text-align: left !important; }

/* FORCE 6-COLUMN GRID - Paste this after .admin-reg-link:visited */
.scores-table thead tr, 
.scores-table tr {
    display: grid !important;
    grid-template-columns: 35px 95px 80px 70px 70px 90px !important;
    width: 100% !important;
}

.scores-table th, .scores-table td {
    padding: 6px 2px !important;
    white-space: nowrap !important;
    border: none !important;
    display: block !important;
}

.scores-table th:nth-child(1), .scores-table td:nth-child(1) { text-align: right !important; }
.scores-table th:nth-child(2), .scores-table td:nth-child(2) { text-align: left !important; padding-left: 5px !important; }
.scores-table th:nth-child(n+3), .scores-table td:nth-child(n+3) { text-align: right !important; }

/* Highlights rows with partial progress */
.status-in-progress {
    color: #2a9d8f !important; /* A distinct teal color */
    font-weight: bold !important;
}

/* Optional: Add a small dot icon before the number */
.status-in-progress::before {
    content: "• ";
    font-size: 1.2em;
}

/* Build badge: show only when Today tab is active */
#chat-view-today .build-badge{display:none;font-size:11px;margin-left:6px;opacity:0.65;}
#chat-view-today.active .build-badge{display:inline;}


/* Numbered puzzle strip (1-10, 11-20, ...) */
.numbered-strip { margin: 10px 0 14px 0; }
.numbered-strip-inner {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 6px 2px;
  scrollbar-width: thin;
}
.numbered-strip-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 110px;
  flex: 0 0 auto;
}
.numbered-strip-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 10px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.25);
  background: rgba(255,255,255,0.08);
  color: inherit;
  cursor: pointer;
  font-weight: 800;
}
.numbered-strip-btn:hover { filter: brightness(1.05); }
.numbered-strip-label { font-size: 12px; line-height: 1; white-space: nowrap; }
.numbered-strip-badge { font-size: 14px; line-height: 1; margin-left: 8px; }

/* Special color for Admin words */
.admin-word {
    color: #FFD700 !important; /* Gold color */
    font-weight: bold;
}

/* Scores subtabs */
.scores-subtabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0 6px 0;}
.scores-subtab{border:1px solid rgba(255,255,255,0.18);background:rgba(0,0,0,0.18);color:inherit;border-radius:10px;padding:6px 10px;font-size:13px;cursor:pointer;}
.scores-subtab.active{background:rgba(255,255,255,0.12);border-color:rgba(255,255,255,0.28);font-weight:700;}