* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
    touch-action: pan-x pan-y;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior-y: none;
}

/* ==========================================================================
   THEME CONFIGURATION
   --------------------------------------------------------------------------
   Every theme is defined by CSS custom properties on [data-theme="..."].
   `theme.js` toggles `data-theme` on <html> + <body>; nothing else needs to
   know about themes.

   HOW TO ADD / EDIT A THEME
     1. Add a `[data-theme="name"]` block here with the colour tokens.
     2. Add the name to THEMES in theme.js (the cycle order lives there).
     3. Optionally set the "effect" tokens below (glow/neon). They default to
        `none`, so non-cyber themes stay flat and cheap to render.

   EFFECT TOKENS (used by the tone/neon components further down)
     --neon-danger : text-shadow applied to every danger/red element
     --neon-accent : text-shadow applied to accent/neon elements
     --neon-text   : text-shadow applied to emphasised text
   ========================================================================== */

:root {
    --bg: #0d1117;
    --panel: #161b22;
    --border: #30363d;
    --text: #c9d1d9;
    --heading: #f0f6fc;
    --muted: #8b949e;
    --faint: #6e7681;
    --accent: #58a6ff;
    --btn: #238636;
    --btn-hover: #2ea043;
    --btn-text: #ffffff;
    --ok: #3fb950;
    --err: #f85149;
    /* effect tokens (flat by default) */
    --neon-danger: none;
    --neon-accent: none;
    --neon-text: none;
}

[data-theme="light"] {
    --bg: #f6f8fa;
    --panel: #ffffff;
    --border: #d0d7de;
    --text: #24292f;
    --heading: #1f2328;
    --muted: #57606a;
    --faint: #6e7781;
    --accent: #0969da;
    --btn: #1a7f37;
    --btn-hover: #2da44e;
    --btn-text: #ffffff;
    --ok: #1a7f37;
    --err: #cf222e;
}

[data-theme="cyber"] {
    --bg: #000000;
    --panel: #000000;
    --border: #00ff41;
    --text: #00ff41;
    --heading: #00ff41;
    --muted: #00ff41;
    --faint: #00ff41;
    --accent: #00ff41;
    --btn: #00ff41;
    --btn-hover: #66ff66;
    --btn-text: #000000;
    --ok: #00ff41;
    --err: #ff3040;
    /* neon effects — change these to restyle every neon object at once */
    --neon-danger: 0 0 2px var(--err), 0 0 7px var(--err), 0 0 16px var(--err);
    --neon-accent: 0 0 4px var(--accent), 0 0 12px var(--accent);
    --neon-text: 0 0 1px var(--accent), 0 0 6px var(--accent), 0 0 12px var(--accent);
}

[data-theme="cute"] {
    --bg: #fff3f8;
    --panel: #ffffff;
    --border: #ffd3e2;
    --text: #6b5060;
    --heading: #c94f7c;
    --muted: #c98aa4;
    --faint: #d9a5ba;
    --accent: #f0629d;
    --btn: #ff8fbd;
    --btn-hover: #ffa9cc;
    --btn-text: #ffffff;
    --ok: #7bc88c;
    --err: #ff7d94;
}

/* Brighter title + triangle for light, dark & cute themes */
body[data-theme="light"] header h1,
body[data-theme="dark"] header h1,
body[data-theme="cute"] header h1 {
    --heading: #ffffff;
}

body[data-theme="light"] header h1 {
    --heading: #ffffff;
    --accent: #2f81f7;
}

body[data-theme="dark"] header h1 {
    --accent: #79c0ff;
}

body[data-theme="cute"] header h1 {
    --accent: #ff5f9e;
}

body[data-theme="light"] .wall-icon,
body[data-theme="dark"] .wall-icon,
body[data-theme="cute"] .wall-icon {
    color: #ff5f9e;
}

body[data-theme="light"] .wall-icon {
    color: #0969da;
    filter: drop-shadow(0 0 4px #2f81f7) drop-shadow(0 0 14px #79c0ff);
}

body[data-theme="dark"] .wall-icon {
    color: #79c0ff;
    filter: drop-shadow(0 0 4px #79c0ff) drop-shadow(0 0 14px #58a6ff);
}

body[data-theme="cute"] .wall-icon {
    color: #ff5f9e;
    filter: drop-shadow(0 0 4px #ff5f9e) drop-shadow(0 0 14px #f0629d);
}

html {
    overflow-x: clip;
    max-width: 100%;
    background: var(--bg);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@supports not (overflow: clip) {
    html {
        overflow-x: hidden;
    }
    body {
        position: relative;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100vh;
    padding-top: 36px;
    padding-bottom: 220px;
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: 'Press Start 2P';
    src: url('/board/fonts/PressStart2P-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Minecraft';
    src: url('/board/fonts/pixelify.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.topbtn {
    position: fixed;
    top: 30px;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--panel);
    border: 1px solid var(--border);
    text-decoration: none;
    color: var(--accent);
}

.topbtn:hover {
    border-color: var(--accent);
}

.theme-btn {
    right: 14px;
    top: 76px;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.info-link {
    right: 14px;
}

main {
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    padding: 0 3px 24px;
}

header {
    text-align: left;
    padding: 16px 6px 4px;
}

.title-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.wall-icon {
    height: 2.4em;
    width: auto;
    flex-shrink: 0;
    display: block;
    color: var(--heading);
    filter: drop-shadow(0 0 10px color-mix(in srgb, var(--accent) 70%, transparent));
}

header h1 {
    color: var(--heading);
    font-size: 2.4em;
    letter-spacing: -1px;
    line-height: 1.05;
    background-image: linear-gradient(100deg,
        var(--heading) 0%,
        var(--heading) 42%,
        var(--accent) 50%,
        var(--heading) 58%,
        var(--heading) 100%);
    background-size: 260% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: wall-breath 4s ease-in-out infinite;
}

@keyframes wall-breath {
    0%, 100% {
        background-position: 0% 50%;
        filter: drop-shadow(0 0 6px color-mix(in srgb, var(--accent) 35%, transparent));
    }
    50% {
        background-position: 100% 50%;
        filter: drop-shadow(0 0 22px color-mix(in srgb, var(--accent) 95%, transparent));
    }
}

.tag {
    color: var(--muted);
    margin-top: 6px;
    margin-bottom: 10px;
    font-size: 0.92em;
    font-weight: 500;
    letter-spacing: 0.4px;
    text-shadow: 0 0 10px color-mix(in srgb, var(--accent) 25%, transparent);
}

.tag-bar {
    height: 4px;
    width: 100%;
    border-radius: 4px;
    margin-bottom: 16px;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--accent) 60%, transparent) 15%,
        var(--accent) 50%,
        color-mix(in srgb, var(--accent) 60%, transparent) 85%,
        transparent 100%);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 50%, transparent);
}

body[data-theme="cyber"] header h1 {
    font-family: 'Minecraft', monospace;
    font-size: 2.4em;
    letter-spacing: 2px;
    line-height: 1.2;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: #00ff41;
    color: #00ff41;
    text-shadow:
        0 0 1px #00ff41,
        0 0 5px #00ff41,
        0 0 12px #00ff41;
    filter: none;
    animation: neon-flicker 3s infinite;
}

body[data-theme="cyber"] .wall-icon {
    height: 2.4em;
    color: #00ff41;
    filter: drop-shadow(0 0 2px #00ff41) drop-shadow(0 0 6px #00ff41) drop-shadow(0 0 14px #00ff41);
    animation: neon-flicker 3s infinite;
}

body[data-theme="cyber"] .tag {
    font-family: 'Minecraft', monospace;
    font-size: 0.92em;
    letter-spacing: 1px;
    color: #00ff41;
    text-shadow: 0 0 4px #00ff41, 0 0 10px #00ff41;
}

body[data-theme="cyber"] {
    font-family: 'Minecraft', monospace;
}

/* form controls don't inherit font-family — force the pixel font in cyber */
body[data-theme="cyber"] button,
body[data-theme="cyber"] input,
body[data-theme="cyber"] textarea,
body[data-theme="cyber"] select,
body[data-theme="cyber"] a,
body[data-theme="cyber"] .nav-btn,
body[data-theme="cyber"] .seg,
body[data-theme="cyber"] .contact-send,
body[data-theme="cyber"] .mini-btn,
body[data-theme="cyber"] .expand-btn,
body[data-theme="cyber"] #admin-send,
body[data-theme="cyber"] #host-username,
body[data-theme="cyber"] #host-name,
body[data-theme="cyber"] #join-username,
body[data-theme="cyber"] #join-code,
body[data-theme="cyber"] #lj-username,
body[data-theme="cyber"] #jm-username,
body[data-theme="cyber"] #contact-msg {
    font-family: 'Minecraft', monospace;
}

body[data-theme="cyber"] .post .text,
body[data-theme="cyber"] .comment-text,
body[data-theme="cyber"] #ai-modal-text {
    font-size: 16px;
    line-height: 1.8;
    letter-spacing: 0.3px;
}

body[data-theme="cyber"] .post .name,
body[data-theme="cyber"] .comment-name {
    font-size: 12px;
}

body[data-theme="cyber"] .post .time,
body[data-theme="cyber"] .comment-time {
    font-size: 10px;
}

body[data-theme="cyber"] .post .num,
body[data-theme="cyber"] .comment-cid {
    font-size: 10px;
}

body[data-theme="cyber"] .post,
body[data-theme="cyber"] .comment {
    letter-spacing: 0.2px;
}

body[data-theme="cyber"] .cmt-title,
body[data-theme="cyber"] .end,
body[data-theme="cyber"] .status,
body[data-theme="cyber"] .ticker span,
body[data-theme="cyber"] .ai-modal-note {
    font-size: 10px;
    letter-spacing: 0.3px;
}

body[data-theme="cyber"] #name-input,
body[data-theme="cyber"] #pwd-input,
body[data-theme="cyber"] #text-input,
body[data-theme="cyber"] #ai-modal-text {
    font-family: 'Minecraft', monospace;
    font-size: 14px;
    letter-spacing: 0.3px;
}

body[data-theme="cyber"] #send-btn,
body[data-theme="cyber"] .ai-post,
body[data-theme="cyber"] .ai-regen,
body[data-theme="cyber"] .del-btn,
body[data-theme="cyber"] .mode-chip,
body[data-theme="cyber"] .reply-btn,
body[data-theme="cyber"] .ai-btn {
    font-family: 'Minecraft', monospace;
    font-size: 12px;
    letter-spacing: 0.5px;
}

body[data-theme="cyber"] .info-page h1,
body[data-theme="cyber"] .info-page .card h2,
body[data-theme="cyber"] .card p,
body[data-theme="cyber"] .card li,
body[data-theme="cyber"] .card th,
body[data-theme="cyber"] .card td {
    font-family: 'Minecraft', monospace;
}

body[data-theme="cyber"] .info-page .card h2 {
    font-size: 13px;
    letter-spacing: 0.5px;
}

body[data-theme="cyber"] .card p,
body[data-theme="cyber"] .card li,
body[data-theme="cyber"] .card th,
body[data-theme="cyber"] .card td {
    font-size: 12px;
    line-height: 1.8;
    letter-spacing: 0.3px;
}

body[data-theme="cyber"] .info-page h1 {
    font-size: 18px;
    letter-spacing: 1px;
    text-shadow: 0 0 6px #00ff41, 0 0 16px #00ff41;
}

@keyframes neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow:
            0 0 1px #00ff41,
            0 0 5px #00ff41,
            0 0 12px #00ff41;
        opacity: 1;
    }
    20%, 22%, 55% {
        text-shadow: none;
        opacity: 0.6;
    }
}

.ticker-wrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    white-space: nowrap;
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    padding: 4px 0;
    z-index: 40;
}

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

.ticker span {
    display: inline-block;
    color: var(--accent);
    font-size: 10px;
    padding-right: 3em;
}

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

.post {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 6px;
    margin-bottom: 14px;
    position: relative;
    overflow: hidden;
}

.expand-btn {
    display: none;
    position: absolute;
    right: 6px;
    bottom: 6px;
    z-index: 5;
    background: var(--panel);
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 12px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.expand-btn:hover {
    background: var(--accent);
    color: var(--btn-text);
}

.post.expanded {
    overflow: visible;
}

.post .meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.post .name {
    color: var(--accent);
    font-size: 13px;
    font-weight: 600;
    word-break: break-word;
}

.post .time {
    color: var(--faint);
    font-size: 12px;
}

.post .text {
    color: var(--heading);
    font-size: 15px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

.end {
    text-align: center;
    color: var(--faint);
    font-size: 13px;
    padding: 8px 0 20px;
}

#post-form {
    position: fixed;
    z-index: 70;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--bg);
    opacity: 0.95;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-top: 1px solid var(--border);
    padding: 10px 14px;
    padding-bottom: calc(10px + env(safe-area-inset-bottom));
}

.panel-bar {
    display: none;
}

.resize-grip {
    display: none;
}

@media (min-width: 768px) {
    #post-form {
        left: auto;
        right: 24px;
        bottom: 24px;
        width: 340px;
        transform: none;
        border: 1px solid var(--border);
        border-radius: 16px;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    }

    main {
        max-width: 680px;
    }

    #post-form {
        position: fixed;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        min-width: 280px;
        min-height: 180px;
        max-width: 90vw;
        max-height: 90vh;
        padding: 0 14px 12px;
    }

    #post-form .textrow {
        flex: 1;
        min-height: 44px;
        margin-top: 8px;
    }

    #post-form #text-input {
        height: 100%;
        max-height: none;
    }

    .panel-bar {
        display: flex;
        align-items: center;
        gap: 8px;
        cursor: grab;
        user-select: none;
        -webkit-user-select: none;
        padding: 10px 0 6px;
        margin: 0 -14px;
        padding-left: 14px;
        padding-right: 14px;
        border-bottom: 1px solid var(--border);
        margin-bottom: 8px;
        flex-shrink: 0;
    }

    .panel-bar:active {
        cursor: grabbing;
    }

    .panel-dots {
        display: flex;
        gap: 5px;
    }

    .panel-dots i {
        width: 9px;
        height: 9px;
        border-radius: 50%;
        display: inline-block;
    }

    .panel-dots i:nth-child(1) { background: #ff5f57; }
    .panel-dots i:nth-child(2) { background: #febc2e; }
    .panel-dots i:nth-child(3) { background: #28c840; }

    .panel-title {
        color: var(--muted);
        font-size: 12px;
        letter-spacing: 0.5px;
        text-transform: uppercase;
    }

    .resize-grip {
        display: block;
        position: absolute;
        right: 4px;
        bottom: 4px;
        width: 18px;
        height: 18px;
        cursor: nwse-resize;
        background:
            linear-gradient(135deg, transparent 0 45%, var(--muted) 45% 55%, transparent 55% 70%, var(--muted) 70% 80%, transparent 80%);
    }

    body[data-theme="cyber"] .panel-title {
        font-family: 'Minecraft', monospace;
        font-size: 10px;
        color: #00ff41;
    }
}

#name-input, #pwd-input {
    flex: 1;
    min-width: 0;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--heading);
    padding: 8px 12px;
    font-size: 14px;
}

#name-input { margin-right: 3px; }

.namebar {
    display: flex;
    gap: 3px;
    margin-bottom: 3px;
}

.textrow {
    display: flex;
    gap: 3px;
    align-items: stretch;
}

.entry-actions {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    flex-shrink: 0;
}

#text-input {
    flex: 1;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--heading);
    padding: 10px 12px;
    font-size: 15px;
    resize: none;
    font-family: inherit;
    line-height: 1.4;
    max-height: 150px;
    overflow-y: auto;
}

#text-input:focus, #name-input:focus, #pwd-input:focus {
    outline: none;
    border-color: var(--accent);
}

#send-btn {
    background: var(--btn);
    color: var(--btn-text);
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

#send-btn:hover { background: var(--btn-hover); }
#send-btn:disabled { opacity: 0.5; cursor: default; }

.del-btn {
    background: transparent;
    color: var(--err);
    border: 1px solid var(--err);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.del-btn:hover { background: var(--err); color: var(--btn-text); }
.del-btn:disabled { opacity: 0.5; cursor: default; }

.ai-btn {
    width: 40px;
    height: 40px;
    align-self: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--panel);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    min-height: 38px;
    max-height: 150px;
}

.ai-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.ai-btn.on {
    background: var(--accent);
    color: var(--btn-text);
    border-color: var(--accent);
}

.status-row {
    margin-top: 6px;
    min-height: 16px;
}

.status {
    color: var(--muted);
    font-size: 12px;
}

.status.ok { color: var(--ok); }
.status.err { color: var(--err); }

/* info page */
.info-page {
    padding-top: 20px;
}

.info-page .back {
    color: var(--accent);
    text-decoration: none;
    font-size: 14px;
    display: inline-block;
    margin-bottom: 12px;
}

.info-page .back:hover { text-decoration: underline; }

.info-page h1 {
    color: var(--heading);
    font-size: 1.6em;
    margin-bottom: 16px;
}

.card {
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
}

.card h2 {
    color: var(--accent);
    font-size: 1.1em;
    margin-bottom: 10px;
}

.card p, .card li {
    color: var(--text);
    font-size: 15px;
    line-height: 1.6;
}

.card ul, .card ol {
    padding-left: 20px;
}

.card li { margin-bottom: 6px; }

.check { color: var(--ok); }
.cross { color: var(--err); }

.card table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 6px;
}

.card th, .card td {
    text-align: left;
    padding: 8px 6px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

.card th { color: var(--heading); }

/* selection + single entry */
.mode-chip {
    display: block;
    width: 100%;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--muted);
    padding: 7px 12px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    margin-bottom: 3px;
    cursor: pointer;
    font-family: inherit;
}

.mode-chip.active {
    color: var(--accent);
    border-color: var(--accent);
    background: var(--bg);
}

.post {
    cursor: pointer;
    transition: background 0.12s ease;
    -webkit-tap-highlight-color: transparent;
}

.post.selected {
    background: var(--accent);
    border-color: var(--accent);
}

.post.selected .meta .name,
.post.selected .meta .time,
.post.selected .text,
.post.selected .num,
.post.selected .cmt-wrap,
.post.selected .cmt-title,
.post.selected .comment {
    color: var(--btn-text);
    border-color: var(--btn-text);
}

.meta-left {
    display: flex;
    align-items: center;
    gap: 3px;
}

.num {
    color: var(--faint);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.post.selected .num {
    color: var(--btn-text);
}

.cmt-wrap {
    margin-top: 3px;
}

.cmt-title {
    color: var(--faint);
    font-size: 11px;
    margin-bottom: 3px;
}

.comment {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 3px 6px;
    margin-bottom: 3px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.comment.cmt-selected {
    background: var(--accent);
    border-color: var(--accent);
}

.comment.cmt-selected > .comment-meta .comment-name,
.comment.cmt-selected > .comment-meta .comment-cid,
.comment.cmt-selected > .comment-meta .comment-time {
    color: var(--btn-text);
}

.comment.cmt-selected > .comment-text {
    color: var(--btn-text);
}

.comment.cmt-selected > .comment-meta .comment-cid {
    background: transparent;
    color: var(--btn-text);
}

.comment.cmt-selected > .cmt-children {
    border-left-color: var(--btn-text);
}

.cmt-children {
    margin-left: 8px;
    padding-left: 6px;
    border-left: 1px solid var(--border);
    margin-top: 3px;
}

.comment-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.comment-name {
    color: var(--accent);
    font-size: 11px;
    font-weight: 600;
}

.comment-cid {
    color: var(--faint);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

.comment-time {
    color: var(--faint);
    font-size: 11px;
}

.comment-text {
    color: var(--heading);
    font-size: 13px;
    line-height: 1.5;
    word-break: break-word;
    white-space: pre-wrap;
}

/* AI convert modal */
.ai-modal {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.ai-modal[hidden] {
    display: none;
}

.ai-modal-card {
    width: 100%;
    max-width: 520px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px;
}

.ai-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.ai-modal-title,
#ai-modal-title {
    color: var(--heading);
    font-size: 16px;
    font-weight: 700;
}

.ai-modal-close {
    background: transparent;
    color: var(--muted);
    border: none;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
}

#ai-modal-text {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--heading);
    padding: 10px 12px;
    font-size: 15px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
    margin-bottom: 10px;
}

#ai-modal-text:focus {
    outline: none;
    border-color: var(--accent);
}

.ai-modal-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-modal-note {
    flex: 1;
    color: var(--muted);
    font-size: 12px;
}

.ai-regen {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.ai-regen:hover { background: var(--panel); }
.ai-regen:disabled { opacity: 0.5; cursor: default; }

.ai-post {
    background: var(--btn);
    color: var(--btn-text);
    border: none;
    border-radius: 8px;
    padding: 9px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

.ai-post:hover { background: var(--btn-hover); }
.ai-post:disabled { opacity: 0.5; cursor: default; }

/* Desktop responsive feed: 1-3 columns by window width */
#feed {
    display: grid;
    gap: 10px;
    align-items: start;
}

@media (min-width: 768px) {
    main {
        max-width: none;
        width: calc(100% - 420px);
        min-width: 0;
        margin-left: 24px;
        margin-right: auto;
    }
}

@media (min-width: 768px) and (max-width: 1159px) {
    #feed {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1160px) {
    main {
        max-width: 1300px;
    }
    #feed {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Splash page */
.splash-body {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
}

.splash {
    max-width: none;
    width: auto;
    margin: 0;
    padding: 0;
}

.splash-head {
    text-align: center;
    padding: 0;
}

.splash-row {
    justify-content: center;
    font-size: 4.6em;
}

.splash h1 {
    font-size: 1em;
}

.splash .wall-icon {
    height: 1.1em;
}

.splash .tag {
    font-size: 1.1em;
    margin-bottom: 0;
}

.splash-body[data-theme="cyber"] .splash h1 {
    font-size: 1em;
}

/* Admin panel window */
.admin-panel[hidden] {
    display: none;
}

.admin-panel {
    position: fixed;
    z-index: 90;
    width: 460px;
    max-width: 92vw;
    height: 320px;
    max-height: 70vh;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    top: 120px;
    left: 50%;
    transform: translateX(-50%);
}

.admin-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    padding: 10px 14px 8px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    min-height: 40px;
}

.admin-bar:active { cursor: grabbing; }

.admin-term {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 13px;
    line-height: 1.5;
    color: var(--heading);
    white-space: pre-wrap;
    word-break: break-word;
}

.admin-term .t-out { color: var(--muted); }
.admin-term .t-in { color: var(--accent); }
.admin-term .t-err { color: var(--err); }
.admin-term .t-ok { color: var(--ok); }

.admin-row {
    display: flex;
    gap: 8px;
    padding: 8px 14px 12px;
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

#admin-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--heading);
    padding: 8px 12px;
    font-size: 14px;
    font-family: 'SFMono-Regular', Consolas, Menlo, monospace;
    outline: none;
}

#admin-input:focus { border-color: var(--accent); }

#admin-send {
    background: var(--btn);
    color: var(--btn-text);
    border: none;
    border-radius: 8px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}

#admin-send:hover { background: var(--btn-hover); }

@media (max-width: 767px) {
    .admin-panel {
        display: none !important;
    }

    /* announcement pinned to top, entry pinned to bottom */
    .ticker-wrap {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }

    #post-form {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
    }

    /* reserve only as much space as the phone entry bar needs */
    body {
        padding-bottom: 160px;
    }

    /* backdrop-filter blurs/composites text on phones — disable it there */
    #post-form {
        opacity: 1;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: var(--bg);
    }
}

/* Cyber admin panel -> pixel font + neon */
body[data-theme="cyber"] .admin-panel {
    border-color: #00ff41;
}

body[data-theme="cyber"] .admin-term,
body[data-theme="cyber"] #admin-input,
body[data-theme="cyber"] #admin-send {
    font-family: 'Minecraft', monospace;
}

body[data-theme="cyber"] .admin-term {
    font-size: 12px;
    color: #00ff41;
}

body[data-theme="cyber"] .admin-term .t-out { color: #00ff41; }
body[data-theme="cyber"] .admin-term .t-in { color: #00ff41; }
body[data-theme="cyber"] .admin-term .t-ok { color: #00ff41; text-shadow: 0 0 6px #00ff41; }

body[data-theme="cyber"] #admin-input {
    font-size: 13px;
    letter-spacing: 0.3px;
    color: #00ff41;
    border-color: #00ff41;
}

body[data-theme="cyber"] #admin-send {
    background: #00ff41;
    color: #000000;
    font-size: 12px;
}

body[data-theme="cyber"] .admin-bar .panel-title {
    color: #00ff41;
}
body[data-theme="dark"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M3%202%20L20%2013%20L12.5%2014%20L8%2021%20Z%27%20fill%3D%27%2358a6ff%27%20stroke%3D%27%230d1117%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 1 1, auto; }
body[data-theme="dark"] a, body[data-theme="dark"] button, body[data-theme="dark"] .post, body[data-theme="dark"] .comment, body[data-theme="dark"] .reply-btn, body[data-theme="dark"] .expand-btn, body[data-theme="dark"] .ai-btn, body[data-theme="dark"] .mode-chip, body[data-theme="dark"] .topbtn, body[data-theme="dark"] .del-btn, body[data-theme="dark"] .admin-bar { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M3%202%20L20%2013%20L12.5%2014%20L8%2021%20Z%27%20fill%3D%27%2358a6ff%27%20stroke%3D%27%230d1117%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 1 1, auto; }
body[data-theme="light"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M3%202%20L20%2013%20L12.5%2014%20L8%2021%20Z%27%20fill%3D%27%230969da%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 1 1, auto; }
body[data-theme="light"] a, body[data-theme="light"] button, body[data-theme="light"] .post, body[data-theme="light"] .comment, body[data-theme="light"] .reply-btn, body[data-theme="light"] .expand-btn, body[data-theme="light"] .ai-btn, body[data-theme="light"] .mode-chip, body[data-theme="light"] .topbtn, body[data-theme="light"] .del-btn, body[data-theme="light"] .admin-bar { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M3%202%20L20%2013%20L12.5%2014%20L8%2021%20Z%27%20fill%3D%27%230969da%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 1 1, auto; }
body[data-theme="cyber"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M3%202%20L20%2013%20L12.5%2014%20L8%2021%20Z%27%20fill%3D%27%2300ff41%27%20stroke%3D%27%23000000%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 1 1, auto; }
body[data-theme="cyber"] a, body[data-theme="cyber"] button, body[data-theme="cyber"] .post, body[data-theme="cyber"] .comment, body[data-theme="cyber"] .reply-btn, body[data-theme="cyber"] .expand-btn, body[data-theme="cyber"] .ai-btn, body[data-theme="cyber"] .mode-chip, body[data-theme="cyber"] .topbtn, body[data-theme="cyber"] .del-btn, body[data-theme="cyber"] .admin-bar { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M3%202%20L20%2013%20L12.5%2014%20L8%2021%20Z%27%20fill%3D%27%2300ff41%27%20stroke%3D%27%23000000%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 1 1, auto; }
body[data-theme="cute"] { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M3%202%20L20%2013%20L12.5%2014%20L8%2021%20Z%27%20fill%3D%27%23f0629d%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 1 1, auto; }
body[data-theme="cute"] a, body[data-theme="cute"] button, body[data-theme="cute"] .post, body[data-theme="cute"] .comment, body[data-theme="cute"] .reply-btn, body[data-theme="cute"] .expand-btn, body[data-theme="cute"] .ai-btn, body[data-theme="cute"] .mode-chip, body[data-theme="cute"] .topbtn, body[data-theme="cute"] .del-btn, body[data-theme="cute"] .admin-bar { cursor: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%3E%3Cpath%20d%3D%27M3%202%20L20%2013%20L12.5%2014%20L8%2021%20Z%27%20fill%3D%27%23f0629d%27%20stroke%3D%27%23ffffff%27%20stroke-width%3D%271%27%2F%3E%3C%2Fsvg%3E") 1 1, auto; }

/* Themed scrollbars */
#text-input::-webkit-scrollbar,
.admin-term::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#text-input::-webkit-scrollbar-track,
.admin-term::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    background: transparent;
}

#text-input::-webkit-scrollbar-thumb,
.admin-term::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--accent) 45%, var(--bg));
    border-radius: 8px;
}

#text-input::-webkit-scrollbar-thumb:hover,
.admin-term::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}

body[data-theme="cyber"] #text-input::-webkit-scrollbar-thumb,
body[data-theme="cyber"] .admin-term::-webkit-scrollbar-thumb,
body[data-theme="cyber"] body::-webkit-scrollbar-thumb {
    background: #00ff41;
    box-shadow: 0 0 6px #00ff41;
}

body {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--bg)) transparent;
}

#text-input,
.admin-term {
    scrollbar-width: thin;
    scrollbar-color: color-mix(in srgb, var(--accent) 45%, var(--bg)) transparent;
}

/* Help page contact form */
#contact-msg {
    width: 100%;
    margin-top: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--heading);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
}

#contact-msg:focus {
    outline: none;
    border-color: var(--accent);
}

.contact-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.contact-status {
    flex: 1;
    font-size: 12px;
    color: var(--muted);
}

.contact-status.ok { color: var(--ok); }
.contact-status.err { color: var(--err); }

.contact-send {
    background: var(--btn);
    color: var(--btn-text);
    border: none;
    border-radius: 8px;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.contact-send:hover { background: var(--btn-hover); }

.room-row .start-btn {
    margin-left: auto;
}

.wait-host {
    margin-left: auto;
    font-size: 13px;
    color: var(--text);
    opacity: 0.75;
    letter-spacing: 0.3px;
    white-space: nowrap;
    animation: wait-pulse 1.8s ease-in-out infinite;
}

.wait-host[hidden] { display: none; }

@keyframes wait-pulse {
    0%, 100% { opacity: 0.45; }
    50% { opacity: 0.9; }
}

@media (prefers-reduced-motion: reduce) {
    .wait-host { animation: none; opacity: 0.75; }
}

.start-btn {
    background: var(--ok);
    color: #05130a;
    min-width: 140px;
}

.start-btn:hover {
    background: color-mix(in srgb, var(--ok) 82%, #000);
}

.leave-btn {
    background: var(--err);
    color: #fff;
}

.leave-btn:hover {
    background: color-mix(in srgb, var(--err) 82%, #000);
}

body[data-theme="cyber"] .start-btn {
    color: #001a06;
    box-shadow: 0 0 10px color-mix(in srgb, var(--ok) 55%, transparent);
}

body[data-theme="cyber"] .leave-btn {
    box-shadow: 0 0 10px color-mix(in srgb, var(--err) 55%, transparent);
}
.contact-send:disabled { opacity: 0.5; cursor: default; }

/* header nav bar (themed) */
.nav-bar {
    display: flex;
    gap: 8px;
    padding: 8px;
    margin-bottom: 16px;
    border-radius: 999px;
    background: linear-gradient(100deg,
        color-mix(in srgb, var(--accent) 30%, var(--panel)) 0%,
        color-mix(in srgb, var(--accent) 12%, var(--panel)) 50%,
        color-mix(in srgb, var(--accent) 30%, var(--panel)) 100%);
    border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 6px 24px color-mix(in srgb, var(--accent) 25%, transparent),
                inset 0 1px 0 color-mix(in srgb, #fff 10%, transparent);
}

.nav-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    color: var(--heading);
    background: color-mix(in srgb, var(--panel) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
    border-radius: 999px;
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.2px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.nav-btn svg {
    flex-shrink: 0;
    opacity: 0.9;
}

.nav-btn:hover,
.nav-btn:focus-visible {
    color: var(--btn-text);
    background: var(--accent);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--accent) 55%, transparent);
    outline: none;
}

.nav-btn:active {
    transform: scale(0.97);
}

body[data-theme="cyber"] .nav-bar {
    background: linear-gradient(100deg,
        color-mix(in srgb, #00ff41 25%, #000) 0%,
        color-mix(in srgb, #00ff41 8%, #000) 50%,
        color-mix(in srgb, #00ff41 25%, #000) 100%);
    border-color: #00ff41;
    box-shadow: 0 0 16px color-mix(in srgb, #00ff41 45%, transparent);
}

body[data-theme="cyber"] .nav-btn {
    color: #00ff41;
    background: rgba(0, 0, 0, 0.55);
    border-color: color-mix(in srgb, #00ff41 40%, transparent);
}

body[data-theme="cyber"] .nav-btn:hover {
    color: #000;
    background: #00ff41;
}

/* Game room */
#host-username, #host-name, #join-username, #join-code,
#lj-username {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--heading);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    margin-top: 8px;
}

#host-username:focus, #host-name:focus, #join-username:focus,
#join-code:focus, #lj-username:focus {
    outline: none;
    border-color: var(--accent);
}

.room-toggle {
    display: flex;
    gap: 6px;
    margin-top: 8px;
}

.seg {
    flex: 1;
    background: var(--bg);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.seg.active {
    background: var(--accent);
    color: var(--btn-text);
    border-color: var(--accent);
}

.room-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}

.room-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.room-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 10px 12px;
}

.room-info { min-width: 0; }

.room-name {
    color: var(--heading);
    font-weight: 600;
    font-size: 15px;
    word-break: break-word;
}

.room-sub {
    color: var(--faint);
    font-size: 12px;
    margin-top: 2px;
}

.room-empty {
    color: var(--muted);
    font-size: 14px;
    padding: 6px 0;
}

/* public rooms header + refresh */
.public-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.public-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.room-stats {
    font-size: 12px;
    color: var(--muted);
    font-variant-numeric: tabular-nums;
}

.refresh-btn {
    font-size: 16px;
    line-height: 1;
    padding: 5px 10px;
}

.refresh-btn.spinning { animation: spin 0.6s linear; }

/* cyber: no spinning — a terminal-style glitch flick instead */
body[data-theme="cyber"] .refresh-btn {
    font-family: 'Minecraft', monospace;
    border-radius: 4px;
    text-shadow: var(--neon-accent);
}

body[data-theme="cyber"] .refresh-btn:hover {
    border-color: var(--accent);
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 40%, transparent);
}

body[data-theme="cyber"] .refresh-btn.spinning {
    animation: refresh-glitch 0.5s steps(2, end);
}

@keyframes refresh-glitch {
    0% { transform: translateX(-2px); opacity: 0.5; color: #ff3040; }
    25% { transform: translateX(2px); opacity: 1; color: #00e5ff; }
    50% { transform: translateX(-1px); color: var(--accent); }
    75% { transform: translateX(1px); }
    100% { transform: none; opacity: 1; }
}

.room-item-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.room-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ok);
    font-variant-numeric: tabular-nums;
}

.room-item.busy {
    border-color: color-mix(in srgb, var(--ok) 45%, var(--border));
}

.room-item.busy .room-avatar {
    animation: avatar-pulse 2.4s ease-in-out infinite;
}

@keyframes avatar-pulse {
    0%, 100% { box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent); }
    50% { box-shadow: 0 0 14px color-mix(in srgb, var(--ok) 55%, transparent); }
}

.room-list.pulse { animation: list-pulse 0.45s ease; }

@keyframes list-pulse {
    from { opacity: 0.4; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .room-item.busy .room-avatar,
    .room-list.pulse,
    .refresh-btn.spinning {
        animation: none;
    }
}

.room-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--text);
    font-size: 14px;
    margin-top: 6px;
}

.room-code { color: var(--accent); }

.mini-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
}

.mini-btn:hover {
    background: var(--accent);
    color: var(--btn-text);
}

.room-h3 {
    color: var(--heading);
    font-size: 15px;
    margin-top: 14px;
}

.member-list {
    list-style: none;
    padding: 0;
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.member-list li {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    color: var(--text);
}

body[data-theme="cyber"] .seg.active,
body[data-theme="cyber"] .mini-btn:hover {
    background: #00ff41;
    color: #000;
    border-color: #00ff41;
}

/* Game room join popup */
.join-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    background: rgba(0, 0, 0, 0.65);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.join-modal[hidden] { display: none; }

.join-modal-card {
    width: 100%;
    max-width: 400px;
    background: var(--panel);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    padding: 18px;
}

.join-modal-card h2 {
    color: var(--heading);
    font-size: 1.1em;
    margin-bottom: 4px;
}

/* host-paused popup */
.pause-modal {
    position: fixed;
    inset: 0;
    z-index: 130;
    background: rgba(0, 0, 0, 0.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.pause-modal[hidden] { display: none; }

.pause-card {
    width: 100%;
    max-width: 420px;
    max-height: 82vh;
    overflow-y: auto;
    background: var(--panel);
    border: 1px solid var(--accent);
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.6);
    padding: 18px;
}

.pause-card h2 { color: var(--accent); font-size: 1.9em; letter-spacing: 0.5px; margin-bottom: 4px; }
.pause-sub { color: var(--text); opacity: 0.9; font-size: 16px; margin-bottom: 12px; }

.pause-card .stand-name { font-size: 15px; }
.pause-card .stand-points { font-size: 18px; }

/* round result popup */
.result-modal {
    position: fixed;
    inset: 0;
    z-index: 140;
    background: rgba(0, 0, 0, 0.78);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.result-modal[hidden] { display: none; }

.result-card {
    width: 100%;
    max-width: 460px;
    text-align: center;
    background: var(--panel);
    border: 2px solid var(--accent);
    border-radius: 16px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65);
    padding: 24px 18px;
}

.result-modal:not([hidden]) .result-card {
    animation: win-open 0.34s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

.result-card h2 {
    font-size: 2.4em;
    letter-spacing: 1px;
    margin-bottom: 6px;
    color: var(--accent);
    text-transform: uppercase;
}

.result-card.win h2,
.result-card.blackjack h2,
.result-card.charlie h2 { color: var(--ok); }

.result-card.lose h2,
.result-card.bust h2 { color: var(--err); }

.result-delta {
    font-size: 1.7em;
    font-weight: 800;
    margin-bottom: 14px;
    color: var(--accent);
}

.result-card.win .result-delta,
.result-card.blackjack .result-delta,
.result-card.charlie .result-delta { color: var(--ok); }

.result-card.lose .result-delta,
.result-card.bust .result-delta { color: var(--err); }

.result-vs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 6px 0;
}

.result-side { display: flex; flex-direction: column; align-items: center; }

.result-who {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
}

.result-side b {
    font-size: 3.2em;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    color: var(--heading);
}

.result-vs-x { font-size: 1.2em; font-weight: 800; color: var(--muted); }

.result-line {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--text);
    margin: 10px 0 18px;
}

.pause-btn {
    background: #e3b341;
    color: #201a00;
}

.pause-btn:hover { background: #f0c14b; }

body[data-theme="cyber"] .pause-btn {
    color: #001a06;
    box-shadow: 0 0 10px color-mix(in srgb, #e3b341 55%, transparent);
}

#jm-username {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--heading);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    margin-top: 10px;
}

#jm-username:focus {
    outline: none;
    border-color: var(--accent);
}

/* Game room live styling */
.room-card { animation: card-in 0.35s ease both; }

/* once the game has started nobody can join -> hide the join info */
.room-card.in-game .qr-wrap,
.room-card.in-game .room-big-item.code,
.room-card.in-game .room-meta {
    display: none;
}

@keyframes card-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

.room-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.room-head-left {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
}

.room-clock {
    font-size: 12px;
    color: var(--text);
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

body[data-theme="cyber"] .room-clock {
    color: var(--accent);
    opacity: 0.9;
    text-shadow: var(--g-glow, 0 0 4px #00ff41);
}

.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    color: var(--ok);
    border: 1px solid color-mix(in srgb, var(--ok) 50%, transparent);
    background: color-mix(in srgb, var(--ok) 12%, transparent);
    border-radius: 999px;
    padding: 3px 10px;
    flex-shrink: 0;
}

.live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--ok);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 70%, transparent);
    animation: live-pulse 1.6s infinite;
}

@keyframes live-pulse {
    0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); }
    70% { box-shadow: 0 0 0 7px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}

.room-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    color: var(--btn-text);
    background: linear-gradient(135deg, var(--accent), color-mix(in srgb, var(--accent) 55%, var(--panel)));
    flex-shrink: 0;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 35%, transparent);
}

.room-item {
    transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
    animation: card-in 0.3s ease both;
}

.room-item:hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 18%, transparent);
}

.member-list.pulse { animation: none; }

.member-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 12px 5px 8px;
    font-size: 13px;
    color: var(--text);
    transition: border-color 0.2s ease, opacity 0.2s ease;
}

.member-chip.is-me {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 16%, var(--bg));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 40%, transparent);
}

.member-chip.is-me .member-name {
    color: var(--accent);
    font-weight: 700;
}

.member-chip .presence-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--err);
    box-shadow: 0 0 6px color-mix(in srgb, var(--err) 70%, transparent);
    flex-shrink: 0;
}

.member-chip.online .presence-dot {
    background: var(--ok);
    box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 80%, transparent);
}

.member-chip:not(.online) {
    opacity: 0.72;
}

.member-chip:not(.online) .member-name {
    color: var(--err);
}

.member-chip .host-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    border-radius: 999px;
    padding: 1px 7px;
}

.member-chip .you-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--bg);
    background: var(--accent);
    border-radius: 999px;
    padding: 1px 7px;
}

.member-enter { animation: member-in 0.3s ease both; }

@keyframes member-in {
    from { opacity: 0; transform: scale(0.8) translateY(4px); }
    to { opacity: 1; transform: none; }
}

.member-leaving {
    animation: member-out 0.25s ease both;
    pointer-events: none;
}

@keyframes member-out {
    to { opacity: 0; transform: scale(0.8) translateY(-4px); }
}

/* ============ PAGE + WINDOW TRANSITIONS ============ */
@keyframes page-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* cross-document view transitions (no JS delay, browser animates between pages) */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out 0.16s ease both; }
::view-transition-new(root) { animation: vt-in 0.22s ease both; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }

/* fallback page fade for browsers without view transitions */
@supports not (view-transition-name: none) {
    body { animation: page-in 0.3s ease; }
}

body.page-leaving {
    opacity: 0 !important;
    transition: opacity 0.15s ease !important;
}

/* generic window open (no transform so centered panels stay centered) */
.win-anim {
    animation: win-open 0.3s ease both;
}
@keyframes win-open {
    from { opacity: 0; clip-path: inset(6% 4% 6% 4% round 14px); filter: brightness(1.4); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round 0); filter: none; }
}

/* content cards ease in */
.card, .post {
    animation: card-ease 0.4s ease;
}
@keyframes card-ease {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

/* modal cards */
.ai-modal:not([hidden]) .ai-modal-card,
.join-modal:not([hidden]) .join-modal-card,
.pause-modal:not([hidden]) .pause-card {
    animation: win-open 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) both;
}

/* ============ CYBER: HACKER WINDOW OPEN ============ */
@keyframes hack-open {
    0%   { opacity: 0; clip-path: inset(0 0 100% 0); filter: brightness(3); }
    18%  { opacity: 1; clip-path: inset(0 0 72% 0); filter: brightness(2.4); }
    32%  { clip-path: inset(38% 0 34% 0); filter: brightness(1.7); }
    46%  { clip-path: inset(0 30% 0 0); filter: brightness(2.2); }
    58%  { clip-path: inset(0 0 0 22%); filter: brightness(0.7); }
    70%  { clip-path: inset(10% 0 12% 0); filter: brightness(1.8); }
    84%  { clip-path: inset(0 0 0 0); opacity: 0.85; filter: brightness(0.9); }
    100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; }
}

body[data-theme="cyber"] .win-anim,
body[data-theme="cyber"] .card,
body[data-theme="cyber"] .post,
body[data-theme="cyber"] .ai-modal:not([hidden]) .ai-modal-card,
body[data-theme="cyber"] .join-modal:not([hidden]) .join-modal-card {
    animation: hack-open 0.5s steps(9, end) both;
}

@keyframes crt-on {
    0% { opacity: 0; }
    35% { opacity: 1; }
    60% { opacity: 0.9; }
    75% { opacity: 1; }
    100% { opacity: 1; }
}

/* scanline sweep across windows on open */
body[data-theme="cyber"] .win-anim::after,
body[data-theme="cyber"] .card::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(180deg, transparent, rgba(0, 255, 65, 0.35), transparent);
    mix-blend-mode: screen;
    animation: scan-sweep 0.5s ease-out both;
}
body[data-theme="cyber"] .card { position: relative; overflow: hidden; }
body[data-theme="cyber"] .post { position: relative; overflow: hidden; }

@keyframes scan-sweep {
    from { transform: translateY(-100%); opacity: 1; }
    to { transform: translateY(100%); opacity: 0; }
}

/* subtle persistent CRT scanlines on cyber */
body[data-theme="cyber"]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 255, 65, 0.05) 0px,
        rgba(0, 255, 65, 0.05) 1px,
        transparent 1px,
        transparent 3px
    );
    animation: crt-flicker 0.12s infinite;
}
@keyframes crt-flicker {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.65; }
}

/* ============ CYBER: CONSTANT GLITCH ============ */
/* full-screen glitch bands + rgb tear overlay */
body[data-theme="cyber"]::after {
    content: "";
    position: fixed;
    inset: -2px;
    z-index: 9998;
    pointer-events: none;
    background:
        repeating-linear-gradient(
            0deg,
            transparent 0px,
            transparent 2px,
            rgba(0, 255, 65, 0.07) 2px,
            rgba(0, 255, 65, 0.07) 3px,
            transparent 3px,
            transparent 26px
        ),
        linear-gradient(90deg, rgba(255, 0, 64, 0.04), transparent 20%, transparent 80%, rgba(0, 120, 255, 0.04));
    mix-blend-mode: screen;
    animation: screen-glitch 3.2s steps(1, end) infinite;
}

@keyframes screen-glitch {
    0%, 12%, 13%, 26%, 40%, 41%, 62%, 76%, 77%, 100% {
        transform: translate(0, 0);
        clip-path: inset(0 0 0 0);
        opacity: 0.32;
    }
    12.5% {
        transform: translate(calc(-1 * var(--g-screen) * 0.5), 1px);
        clip-path: inset(12% 0 74% 0);
        opacity: 0.6;
    }
    13.5% {
        transform: translate(calc(var(--g-screen) * 0.7), -2px);
        clip-path: inset(64% 0 18% 0);
        opacity: 0.55;
    }
    40.5% {
        transform: translate(var(--g-screen), 1px);
        clip-path: inset(30% 0 48% 0);
        opacity: 0.65;
    }
    41.5% {
        transform: translate(calc(-1 * var(--g-screen) * 0.8), 2px);
        clip-path: inset(80% 0 4% 0);
        opacity: 0.6;
    }
    76.5% {
        transform: translate(calc(-1 * var(--g-screen)), -1px);
        clip-path: inset(46% 0 30% 0);
        opacity: 0.65;
    }
    77.5% {
        transform: translate(calc(var(--g-screen) * 0.6), 2px);
        clip-path: inset(8% 0 70% 0);
        opacity: 0.55;
    }
}

/* glitch intensity variables (scaled down on smaller screens) */
body[data-theme="cyber"] {
    --g-rgb: 2px;
    --g-rgb2: 1.5px;
    --g-glow: 6px;
    --g-glow2: 3px;
    --g-shift: 1px;
    --g-skew: 2deg;
    --g-screen: 4px;
    --g-jitter: 1px;
}

@media (max-width: 900px) {
    body[data-theme="cyber"] {
        --g-rgb: 1.5px;
        --g-rgb2: 1px;
        --g-glow: 4px;
        --g-glow2: 2px;
        --g-shift: 1px;
        --g-skew: 1.5deg;
        --g-screen: 3px;
        --g-jitter: 1px;
    }
}

@media (max-width: 600px) {
    body[data-theme="cyber"] {
        --g-rgb: 1px;
        --g-rgb2: 0.75px;
        --g-glow: 2.5px;
        --g-glow2: 1.5px;
        --g-shift: 0.5px;
        --g-skew: 1deg;
        --g-screen: 2px;
        --g-jitter: 0.5px;
    }
}

@media (max-width: 400px) {
    body[data-theme="cyber"] {
        --g-rgb: 0.75px;
        --g-rgb2: 0.5px;
        --g-glow: 2px;
        --g-glow2: 1px;
        --g-shift: 0.5px;
        --g-skew: 0.5deg;
        --g-screen: 1px;
        --g-jitter: 0.5px;
    }
}

@keyframes glitch-text {
    0%, 8%, 10%, 24%, 36%, 38%, 55%, 70%, 72%, 100% {
        text-shadow: 0 0 1px #00ff41, 0 0 var(--g-glow2, 4px) #00ff41, 0 0 var(--g-glow) #00ff41;
        transform: none;
    }
    8.5% {
        text-shadow: calc(-1 * var(--g-rgb)) 0 #ff0040, var(--g-rgb) 0 #00e5ff, 0 0 8px #00ff41;
        transform: translateX(calc(-1 * var(--g-shift)));
    }
    9.5% {
        text-shadow: var(--g-rgb) 0 #ff0040, calc(-1 * var(--g-rgb)) 0 #00e5ff, 0 0 8px #00ff41;
        transform: translateX(var(--g-shift));
    }
    37% {
        text-shadow: calc(-1 * var(--g-rgb2)) 0 #00e5ff, var(--g-rgb2) 0 #ff0040, 0 0 var(--g-glow) #00ff41;
        transform: translateX(var(--g-shift)) skewX(calc(-1 * var(--g-skew)));
    }
    71% {
        text-shadow: var(--g-rgb2) 0 #ff0040, calc(-1 * var(--g-rgb2)) 0 #00e5ff, 0 0 var(--g-glow) #00ff41;
        transform: translateX(calc(-1 * var(--g-shift))) skewX(var(--g-skew));
    }
}

@keyframes glitch-text-safe {
    0%, 9%, 11%, 27%, 41%, 43%, 58%, 74%, 76%, 100% {
        text-shadow: 0 0 1px #00ff41, 0 0 var(--g-glow2, 4px) #00ff41, 0 0 var(--g-glow) #00ff41;
    }
    10% { text-shadow: calc(-1 * var(--g-rgb)) 0 #ff0040, var(--g-rgb) 0 #00e5ff, 0 0 8px #00ff41; }
    42% { text-shadow: var(--g-rgb) 0 #ff0040, calc(-1 * var(--g-rgb)) 0 #00e5ff, 0 0 8px #00ff41; }
    75% { text-shadow: calc(-1 * var(--g-rgb2)) 0 #00e5ff, var(--g-rgb2) 0 #ff0040, 0 0 var(--g-glow) #00ff41; }
}

/* apply the title glitch to EVERYTHING visible in cyber (text-shadow is inherited) */
body[data-theme="cyber"] {
    animation: crt-on 0.45s steps(6, end) both, glitch-text-safe 4.2s steps(1, end) infinite;
}

body[data-theme="cyber"] .tag,
body[data-theme="cyber"] header h1,
body[data-theme="cyber"] .wall-icon,
body[data-theme="cyber"] .live-badge,
body[data-theme="cyber"] .room-name,
body[data-theme="cyber"] .panel-title,
body[data-theme="cyber"] .admin-term,
body[data-theme="cyber"] .admin-term .t-err,
body[data-theme="cyber"] .admin-term .t-ok,
body[data-theme="cyber"] .info-page h1,
body[data-theme="cyber"] .ticker span {
    animation: glitch-text-safe 4.2s steps(1, end) infinite;
}

body[data-theme="cyber"] header h1 {
    animation: neon-flicker 3s infinite, glitch-text 2.6s steps(1, end) infinite;
}

/* constant subtle jitter on the feed */
body[data-theme="cyber"] #feed {
    animation: cyber-jitter 4.8s steps(1, end) infinite;
}

@keyframes cyber-jitter {
    0%, 49%, 51%, 73%, 75%, 100% { transform: translate(0, 0); }
    49.5% { transform: translate(var(--g-jitter), calc(-1 * var(--g-jitter))); }
    50.5% { transform: translate(calc(-1 * var(--g-jitter)), var(--g-jitter)); }
    74% { transform: translate(var(--g-jitter), 0); }
}

/* random glitch bar - injected by JS at random time/position */
.glitch-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(0, 255, 65, 0.7);
    box-shadow: 0 0 10px #00ff41, 0 0 3px #fff;
    pointer-events: none;
    z-index: 20;
    opacity: 0;
    animation: glitch-bar-run 0.5s ease-out both;
}

@keyframes glitch-bar-run {
    0% { opacity: 0; transform: translateY(-6px) scaleX(0.6); }
    20% { opacity: 1; transform: translateY(0) scaleX(1); }
    100% { opacity: 0; transform: translateY(10px) scaleX(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* composer + ticker entrance */
@keyframes panel-up {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: none; }
}
#post-form {
    animation: panel-up 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.1) both;
}
body[data-theme="cyber"] #post-form {
    animation: hack-open 0.5s steps(9, end) both;
}
.ticker-wrap {
    animation: panel-up 0.4s ease both;
}

/* Game room: QR + big host/code */
.qr-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 12px 0 14px;
}

.qr-box {
    background: #ffffff;
    padding: 10px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
    line-height: 0;
}

.qr-box img,
.qr-box canvas {
    display: block;
    width: 200px;
    height: 200px;
    image-rendering: pixelated;
}

.qr-link {
    font-size: 11px;
    color: var(--faint);
    word-break: break-all;
    text-align: center;
}

.room-big {
    display: flex;
    gap: 10px;
    margin: 4px 0 10px;
}

.room-big-item {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
    text-align: center;
}

.room-big-item b {
    display: block;
    color: var(--heading);
    font-size: 22px;
    font-weight: 800;
    margin-top: 2px;
    word-break: break-word;
}

.room-big-label {
    display: block;
    color: var(--muted);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
}

body[data-theme="cyber"] .room-big-item b {
    font-size: 20px;
}

/* Loading spinner (all themes) */
.spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
    border-top-color: var(--accent);
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 6px;
    animation: spin 0.7s linear infinite;
}

.spinner[hidden] { display: none; }

.room-sub-live {
    display: flex;
    align-items: center;
    gap: 6px;
}

.spinner.spinner-sm {
    width: 11px;
    height: 11px;
    border-width: 2px;
    margin-left: 0;
    flex-shrink: 0;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

body[data-theme="cyber"] .spinner {
    border-color: color-mix(in srgb, #00ff41 30%, transparent);
    border-top-color: #00ff41;
}

/* Ambient "alive" room feel for every theme except cyber */
body:not([data-theme="cyber"]) .room-card {
    position: relative;
    overflow: hidden;
    animation: card-in 0.35s ease both, room-breathe 4s ease-in-out infinite 0.35s;
}

@keyframes room-breathe {
    0%, 100% { box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 6%, transparent); }
    50% { box-shadow: 0 6px 26px color-mix(in srgb, var(--accent) 18%, transparent); }
}

body:not([data-theme="cyber"]) .room-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    width: 40%;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--accent), transparent);
    animation: room-sweep 4.5s ease-in-out infinite;
    pointer-events: none;
}

@keyframes room-sweep {
    0% { left: -40%; }
    60%, 100% { left: 100%; }
}

body:not([data-theme="cyber"]) .member-chip.online .presence-dot {
    animation: dot-breathe 1.8s ease-in-out infinite;
}

@keyframes dot-breathe {
    0%, 100% { transform: scale(1); box-shadow: 0 0 6px color-mix(in srgb, var(--ok) 70%, transparent); }
    50% { transform: scale(1.35); box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 95%, transparent); }
}

body:not([data-theme="cyber"]) .member-chip .host-tag {
    animation: crown-bob 2.6s ease-in-out infinite;
}

@keyframes crown-bob {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-1.5px); }
}

body:not([data-theme="cyber"]) .live-badge {
    animation: badge-glow 3s ease-in-out infinite;
}

@keyframes badge-glow {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 0%, transparent); }
    50% { box-shadow: 0 0 12px color-mix(in srgb, var(--ok) 28%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
    body:not([data-theme="cyber"]) .room-card,
    body:not([data-theme="cyber"]) .room-card::before,
    body:not([data-theme="cyber"]) .member-chip.online .presence-dot,
    body:not([data-theme="cyber"]) .member-chip .host-tag,
    body:not([data-theme="cyber"]) .live-badge {
        animation: none;
    }
}

/* Room chat (participants only) */
.rv-chat {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.chat-log {
    max-height: 190px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 10px 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.chat-empty {
    color: var(--text);
    opacity: 0.55;
    font-size: 13px;
    font-style: italic;
    margin: 0;
}

.chat-msg {
    display: flex;
    gap: 8px;
    align-items: baseline;
    font-size: 14px;
    line-height: 1.5;
    animation: chat-in 0.2s ease both;
}

@keyframes chat-in {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

.chat-who {
    color: var(--accent);
    font-weight: 700;
    flex-shrink: 0;
    max-width: 40%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chat-who::after { content: ":"; }

.chat-text {
    color: var(--heading);
    word-break: break-word;
    white-space: pre-wrap;
}

.chat-msg.is-me .chat-text {
    color: var(--accent);
}

.chat-form {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}

.chat-input {
    flex: 1;
    min-width: 0;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--heading);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
}

.chat-input:focus {
    outline: none;
    border-color: var(--accent);
}

.chat-send {
    flex-shrink: 0;
    background: var(--accent);
    color: var(--btn-text);
    border: none;
    border-radius: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}

.chat-send:hover { filter: brightness(1.08); }
.chat-send:disabled { opacity: 0.55; cursor: default; }

body[data-theme="cyber"] .chat-log,
body[data-theme="cyber"] .chat-input {
    background: #000;
}

body[data-theme="cyber"] .chat-who {
    text-shadow: var(--g-glow, 0 0 4px #00ff41);
}

/* Game vote menu */
.game-menu {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
}

.game-timer {
    font-size: 12px;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
    margin-left: 6px;
}

.game-timer.danger {
    color: var(--err);
    animation: timer-pulse 0.6s ease-in-out infinite;
}

@keyframes timer-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(1.15); }
}

/* animated phase countdown bar */
.count-bar {
    height: 4px;
    margin: 7px 0 4px;
    background: color-mix(in srgb, var(--border) 70%, transparent);
    border-radius: 999px;
    overflow: hidden;
}

.count-bar[hidden] { display: none; }

.count-bar i {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--accent);
    border-radius: 999px;
    transition: background 0.25s ease;
    will-change: width;
}

.count-bar.warn i { background: #e3b341; }

.count-bar.danger i {
    background: var(--err);
    animation: bar-pulse 0.6s ease-in-out infinite;
}

@keyframes bar-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.45; }
}

body[data-theme="cyber"] .count-bar i {
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 60%, transparent);
}

.bet-balance {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--text);
    opacity: 0.9;
}

.bet-balance b {
    color: var(--accent);
    font-size: 15px;
    font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
    .game-timer.danger,
    .count-bar.danger i {
        animation: none;
    }
}

.game-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.game-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 15px;
    font-family: inherit;
    color: var(--heading);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.game-option:hover:not(:disabled) {
    border-color: var(--accent);
    transform: translateY(-1px);
}

.game-option:disabled {
    cursor: default;
    opacity: 0.85;
}

.game-option.voted {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--bg));
}

.game-option-name { font-weight: 700; }

.game-option-count {
    min-width: 26px;
    text-align: center;
    font-weight: 800;
    font-size: 14px;
    background: color-mix(in srgb, var(--accent) 18%, transparent);
    color: var(--accent);
    border-radius: 999px;
    padding: 2px 8px;
}

.game-result {
    margin-top: 10px;
    font-weight: 700;
    color: var(--accent);
    font-size: 17px;
}

.game-result[hidden] { display: none; }

body[data-theme="cyber"] .game-option.voted {
    box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 40%, transparent);
}

/* ---- Blackjack table, standings, betting ---- */
.game-menu [hidden] { display: none !important; }

.stand-list {
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
}

.stand-row.is-me { border-color: var(--accent); }
.stand-row.dead { opacity: 0.5; }
.stand-row.dead .stand-name { text-decoration: line-through; color: var(--err); }
.stand-name { color: var(--heading); font-weight: 600; }
.stand-points {
    color: var(--accent);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.stand-row.is-me .stand-name { color: var(--accent); }

.stand-bank {
    margin: 10px 0 0;
    font-size: 13px;
    color: var(--text);
    opacity: 0.85;
}
.stand-bank b { color: var(--accent); font-size: 15px; }

.bet-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.bet-chip {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--heading);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
}
.bet-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.bet-chip:disabled { opacity: 0.4; cursor: default; }

.bet-chip.bet-clear {
    color: var(--err);
    border-color: color-mix(in srgb, var(--err) 45%, var(--border));
}
.bet-chip.bet-clear:hover:not(:disabled) { border-color: var(--err); color: var(--err); }

.bet-input {
    width: 84px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--heading);
    padding: 8px 10px;
    font-size: 14px;
    font-family: inherit;
}
.bet-input:focus { outline: none; border-color: var(--accent); }
.bet-status { margin: 8px 0 0; font-size: 13px; color: var(--text); opacity: 0.85; }

.bj-side {
    margin-top: 6px;
    text-align: center;
}
.bj-side-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text);
    opacity: 0.75;
}

.hand {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    min-height: 4px;
}

.hand .pcard {
    width: clamp(38px, 11vw, 54px);
    aspect-ratio: 222 / 323;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    padding: 0;
    margin: 0;
    border: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    animation: card-deal 0.22s ease both;
    flex-shrink: 0;
}

.hand .pcard img { display: block; width: 100%; height: 100%; object-fit: cover; }

.hand .pcard.no-anim { animation: none; }

@keyframes card-deal {
    from { opacity: 0; transform: translateY(-26px) rotate(calc(-7deg + var(--rot, 0deg))) scale(0.82); }
    to { opacity: 1; transform: rotate(var(--rot, 0deg)); }
}

.hand-total {
    margin-top: 4px;
    font-size: 22px;
    font-weight: 800;
    color: var(--accent);
    font-variant-numeric: tabular-nums;
}

.bj-players {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.bj-player {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 10px;
    background: color-mix(in srgb, var(--panel) 70%, var(--bg));
}
.bj-player.is-me { border-color: var(--accent); }
.bj-player.done { opacity: 0.92; }

.bj-player-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.bj-player-name { font-weight: 700; color: var(--heading); }
.bj-player.is-me .bj-player-name { color: var(--accent); }
.bj-player-total { font-weight: 800; color: var(--accent); font-size: 22px; font-variant-numeric: tabular-nums; }

.bj-player .hand { justify-content: flex-start; }

.bj-player-foot { margin-top: 6px; font-size: 12px; color: var(--text); opacity: 0.85; }
.bj-player-foot.win, .bj-player-foot.blackjack, .bj-player-foot.charlie { color: var(--ok); opacity: 1; font-weight: 700; }
.bj-player-foot.lose, .bj-player-foot.bust { color: var(--err); opacity: 1; font-weight: 700; }

.bj-controls {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}
.bj-controls .contact-send { flex: 1; }

body[data-theme="cyber"] .hand .pcard {
    box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 35%, transparent);
}

/* ---- Cyber: pixel font for numbers, red neon for red words ---- */
body[data-theme="cyber"] .room-clock,
body[data-theme="cyber"] .stand-points,
body[data-theme="cyber"] .stand-bank b,
body[data-theme="cyber"] .hand-total,
body[data-theme="cyber"] .bj-player-total,
body[data-theme="cyber"] .game-timer,
body[data-theme="cyber"] .game-option-count,
body[data-theme="cyber"] .room-big b,
body[data-theme="cyber"] #rv-count,
body[data-theme="cyber"] .live-badge {
    font-family: 'Minecraft', monospace;
    font-variant-numeric: normal;
}

/* ==========================================================================
   TONE: danger (red)
   --------------------------------------------------------------------------
   Single definition for EVERY red / error element. Do not hard-code reds or
   their glow anywhere else — add selectors here (or give the element a
   `danger` class) and the theme decides the colour (`--err`) and the neon
   (`--neon-danger`, set in the THEME CONFIG block at the top).
   ========================================================================== */
.danger,
.err,
.t-err,
.status.err,
.contact-status.err,
.del-btn,
.cross,
.member-chip:not(.online) .member-name,
.stand-row.dead .stand-name,
.bj-player-foot.lose,
.bj-player-foot.bust,
.bet-chip.bet-clear {
    color: var(--err);
    text-shadow: var(--neon-danger);
}

/* delete button keeps a red outline/border in every theme */
.del-btn {
    border-color: var(--err);
}

body[data-theme="cyber"] .del-btn {
    box-shadow: 0 0 8px color-mix(in srgb, var(--err) 45%, transparent);
}

body[data-theme="cyber"] .del-btn:hover {
    color: var(--btn-text);
    text-shadow: none;
}

/* When the browser animates page changes (view transitions), don't also
   replay per-element entrance animations — that causes flashing boxes. */
@supports (view-transition-name: none) {
    .card, .post, .room-item {
        animation: none;
    }
    .room-card {
        animation: none;
    }
    body:not([data-theme="cyber"]) .room-card {
        animation: room-breathe 4s ease-in-out infinite 0.35s;
    }
    body[data-theme="cyber"] {
        animation: glitch-text-safe 4.2s steps(1, end) infinite;
    }
}

/* ---- Game activity log (real room) ---- */
.activity-log {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.activity-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 170px;
    overflow-y: auto;
    font-size: 13px;
    line-height: 1.45;
    font-variant-numeric: tabular-nums;
}

.activity-list .lg { color: var(--text); }
.activity-list .lg.ok { color: var(--ok); }
.activity-list .lg.err { color: var(--err); }
.activity-list .lg.sys { color: var(--muted); }
.activity-list .lg.bet { color: var(--faint); }

/* snappy button press feel */
.contact-send:active,
.chat-send:active,
.mini-btn:active,
.bet-chip:active,
.start-btn:active,
.leave-btn:active,
.pause-btn:active {
    transform: translateY(1px) scale(0.97);
    filter: brightness(0.94);
}

/* optimistic "card being dealt" placeholder */
.pcard.pending {
    opacity: 0.92;
}

/* ==========================================================================
   ROOM VIEW LAYOUT — 3 boxes on desktop, left/right drawers on phones
   ========================================================================== */
.room-head-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 2px 0 12px;
}

.room-drawer-bar { display: none; }

.drawer-backdrop { display: none; }

.room-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}

.room-shell > .room-card { margin-bottom: 0; min-width: 0; }

.room-activity-card .activity-log {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.room-activity-card .rv-chat { margin-top: 14px; }

@media (max-width: 820px) {
    .room-drawer-bar {
        display: flex;
        gap: 8px;
        margin: 12px 0 12px;
    }

    .drawer-toggle {
        position: relative;
        flex: 1;
        background: var(--panel);
        border: 1px solid var(--border);
        color: var(--heading);
        border-radius: 8px;
        padding: 9px 12px;
        font-size: 14px;
        font-weight: 700;
        font-family: inherit;
        cursor: pointer;
    }

    .unread-dot {
        position: absolute;
        top: 6px;
        right: 10px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: var(--err);
        box-shadow: 0 0 6px var(--err);
    }

    .room-shell { display: block; }

    #panel-info,
    #panel-activity {
        position: fixed;
        top: 0;
        bottom: 0;
        width: min(86vw, 360px);
        z-index: 210;
        border-radius: 0;
        margin: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        padding: 16px;
        padding-top: max(16px, env(safe-area-inset-top));
        transition: transform 0.25s ease;
        will-change: transform;
    }

    #panel-info { left: 0; transform: translateX(-103%); }
    #panel-activity { right: 0; transform: translateX(103%); }

    body.drawer-info-open #panel-info { transform: translateX(0); }
    body.drawer-activity-open #panel-activity { transform: translateX(0); }

    .drawer-backdrop {
        position: fixed;
        inset: 0;
        z-index: 200;
        background: rgba(0, 0, 0, 0.55);
    }

    body.drawer-info-open .drawer-backdrop,
    body.drawer-activity-open .drawer-backdrop {
        display: block;
    }
}

/* widen the page while inside a room so the 3 boxes fit */
main.room-wide {
    width: min(1280px, 96vw);
    max-width: min(1280px, 96vw);
    margin: 0 auto;
}

.room-big-item b { word-break: keep-all; }

/* Hi-Low */
.hl-hint {
    font-size: 14px;
    color: var(--muted);
    margin: 2px 0 8px;
}

.hl-player .bj-player-foot .hl-mult {
    font-size: 15px;
    font-weight: 800;
    color: var(--accent);
}

.result-card.cashout h2 { color: var(--ok); }
.result-card.cashout .result-delta { color: var(--ok); }

/* Hi-Low: fanned/stacked hand */
.hl-stack {
    position: relative;
    display: block;
    margin-top: 8px;
    min-height: 76px;
}

.hl-stack .pcard {
    position: absolute;
    top: 0;
    width: clamp(34px, 9.5vw, 48px);
    transform: rotate(var(--rot, 0deg));
    transform-origin: 50% 100%;
    transition: transform 0.22s ease, left 0.22s ease;
    will-change: transform;
}

.bj-player-total.hl-bump {
    animation: hl-bump 0.4s ease;
}

@keyframes hl-bump {
    0% { transform: scale(1); }
    40% { transform: scale(1.6); color: var(--ok); }
    100% { transform: scale(1); }
}

/* Hi-Low: the card that busted you */
.hl-stack .pcard.hl-lose {
    outline: 2px solid var(--err);
    outline-offset: -1px;
    animation: hl-lose-shake 0.45s ease both;
    z-index: 99;
    filter: saturate(0.7) brightness(0.92);
}

@keyframes hl-lose-shake {
    0% { opacity: 0; transform: translateY(-20px) rotate(8deg) scale(0.85); }
    60% { opacity: 1; transform: translateX(-3px) rotate(8deg); }
    80% { transform: translateX(3px) rotate(8deg); }
    100% { transform: translateX(0) rotate(8deg); }
}