/* ============== Layout ============== */
@font-face {
    font-display: swap;
    font-family: "PangMenZhengDao";
    font-style: normal;
    font-weight: normal;
    src: url("https://cdn.imxiqi.cn/neonzoo_live/fonts/PangMenZhengDao.woff2") format("woff2");
}

@font-face {
  font-display: swap;
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 400;
  src: url('https://cdn.imxiqi.cn/neonzoo_live/fonts/orbitron-v31-latin-regular.woff2') format('woff2');
}

@font-face {
  font-display: swap;
  font-family: "Orbitron";
  font-style: normal;
  font-weight: 700;
  src: url('https://cdn.imxiqi.cn/neonzoo_live/fonts/orbitron-v31-latin-700.woff2') format('woff2');
}

html,
body {
    margin: 0;
    height: 100%;
    background: #000;
    font-family: "Orbitron", "PangMenZhengDao", Helvetica, Roboto, Arial, sans-serif;
    touch-action: pan-x pan-y;
    -ms-touch-action: manipulation;
    display: grid;
    grid-template-rows: 65vh 35vh;
    height: 100vh;
    overflow: hidden;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Removed global texture overlay */

/* 上半屏(65vh) 四宫格视频 */
#grid {
    height: 65vh;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    position: relative;
    z-index: 1;
}

.cell {
    position: relative;
    overflow: visible;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 10px;
}

.player-wrap {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.streamer-name {
    /* place the streamer name in the upper-left corner of the cell */
    position: absolute;
    left: 12px;
    top: 12px;
    color: #fff;
    font-size: clamp(18px, 3vw, 26px);
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
    max-width: calc(100% - 24px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    z-index: 2;
}

/* round timer in the chat panel */
#chat #round-timer {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: clamp(28px, 5vw, 44px);
    /* Add a subtle white neon glow around the timer */
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.8),
        0 0 8px rgba(255, 255, 255, 0.8), 0 0 16px rgba(255, 255, 255, 0.8);
    pointer-events: none;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
}
#chat #round-timer .round-time {
    line-height: 1;
}
#chat #round-timer .round-suffix {
    margin-top: 0.2em;
    font-size: 0.6em;
    text-align: center;
}
#chat #live-indicator {
    position: absolute;
    top: 8px;
    right: 12px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: clamp(14px, 3vw, 22px);
    text-shadow: 0 0 6px #ff0033, 0 0 12px #ff0033;
    border: 2px solid #ff0033;
    border-radius: 6px;
    padding: 2px 6px;
    /* Glow both outside and inside the border */
    box-shadow: 0 0 6px #ff0033, 0 0 12px #ff0033,
        inset 0 0 6px #ff0033, inset 0 0 12px #ff0033;
    pointer-events: none;
    z-index: 2;
}

#chat #viewer-count {
    position: absolute;
    top: 8px;
    left: 12px;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: clamp(14px, 3vw, 22px);
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.8);
    padding: 2px 6px;
    border: 2px solid transparent;
    border-radius: 6px;
    pointer-events: none;
    z-index: 2;
}

#chat #viewer-count .viewer-icon {
    width: 20px;
    height: 20px;
    margin-right: 4px;
    filter: drop-shadow(0 0 4px var(--neo-blue))
            drop-shadow(0 0 8px var(--neo-blue));
    vertical-align: middle;
    position: relative;
    z-index: 2;
}

#chat #viewer-count .viewer-number {
    margin-left: 4px;
    font-weight: bold;
    position: relative;
    z-index: 1;
}

#chat #live-indicator .live-dot {
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #ff0033;
    box-shadow: 0 0 6px #ff0033;
    /* Sync blink speed with like button ripple and round timer */
    animation: blink var(--ripple-duration, 1s) step-start infinite;
    animation-delay: var(--pulse-offset, 0s);
    vertical-align: middle;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}
#chat #round-timer .round-highlight {
    color: #fff;
    text-shadow: 0 0 20px var(--score-red), 0 0 40px var(--score-red);
}

/* Host cell watermark */
#B1::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("https://cdn.imxiqi.cn/neonzoo_live/images/logo.webp") center/contain no-repeat;
    opacity: 0.3; /* subtle watermark */
    pointer-events: none;
    z-index: 0;
}

/* Removed scoreboard texture overlay */

video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 优先展示画面的中上部分，避免裁掉人脸 */
    object-position: 50% 20%;
    /* brighten remote player videos */
    filter: brightness(1.2) saturate(1.1);
}

/* 下半屏聊天面板 */
#chat {
    height: 35vh;
    display: flex;
    flex-direction: column;
    /* background: rgba(0, 0, 0, 0.65); */
    backdrop-filter: blur(6px);
    /* box-shadow: 0 -4px 20px rgba(0, 255, 255, 0.15) inset; */
    position: relative;
    z-index: 0;
    overflow: hidden;
}

/* Removed chat panel texture overlay */

@keyframes gridShift {
    from {
        background-position: 0 0, 0 0;
    }
    to {
        background-position: 200px 200px, -200px 200px;
    }
}

#chat-log {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1 1 0;
    min-height: 0;
    padding: 8px 16px 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scroll-behavior: smooth;
    /* Larger text for the comment section */
    font-size: clamp(24px, 4vw, 40px);
    line-height: 1.6;
    color: #fff;
    scrollbar-width: thin;
    word-break: break-all;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 30%,
        #000 98%,
        transparent 100%
    );                                   /* Safari/iOS 兼容 */
    mask-image: linear-gradient(
        180deg,
        transparent 0%,
        #000 30%,
        #000 98%,
        transparent 100%
    );
    mask-repeat: no-repeat;
    mask-size: 100% 100%;
}

#chat-log .spacer {
    flex: 1 1 auto;
    height: 0;
}

/* Removed scanline overlay in chat log */

#chat-bar {
    position: relative;
    padding: 10px 16px 14px;
}

/* Flex layout for input and button */
#chat-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

#chat-bar .comment-input {
    flex: 1 1 auto;
    height: 38px;
    background: rgba(0, 0, 0, 0.35);
    background-image: linear-gradient(
        120deg,
        rgba(0, 234, 255, 0.05) 0%,
        rgba(0, 234, 255, 0.2) 50%,
        rgba(0, 234, 255, 0.05) 100%
    );
    background-size: 200% 100%;
    border: 1px solid var(--neo-yellow);
    border-radius: 6px;
    font-family: "Orbitron", "PangMenZhengDao", Helvetica, Roboto, Arial, sans-serif;
    color: var(--neo-blue);
    font-size: clamp(16px, 2.5vw, 24px);
    line-height: 36px;
    padding: 0 10px;
    box-shadow: 0 0 4px var(--neo-blue), 0 0 8px var(--neo-blue) inset;
    caret-color: var(--neo-blue);
    white-space: nowrap;
    overflow: hidden;
    outline: none;
    position: relative;
    transition: 0.25s;
    animation: pulse-glow 3.5s ease-in-out infinite, input-shimmer 6s linear infinite;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
}

/* --------- 霓虹朋克输入 & 按钮 --------- */
:root {
    --neo-blue: #00eaff;
    --neo-yellow: #ffb700;
    --neo-pink: #ff006e;
}

#chat-bar .comment-input::placeholder {
    font-family: "Orbitron", "PangMenZhengDao", Helvetica, Roboto, Arial, sans-serif;
    color: var(--neo-blue);
    opacity: 1;
}

#chat-bar .comment-input:focus {
    border-color: var(--neo-blue);
    box-shadow: 0 0 6px var(--neo-blue), 0 0 12px var(--neo-blue) inset;
}

@keyframes input-shimmer {
    from {
        background-position: -100% 0;
    }
    to {
        background-position: 100% 0;
    }
}

#chat-bar .comment-send {
    width: 60px;
    height: 38px;
    border-radius: 6px;
    border: 2px solid rgba(0, 255, 255, 0.5);
    background: rgba(0, 255, 255, 0.1);
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 0 15px rgba(0, 255, 255, 0.3);
    backdrop-filter: blur(5px);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.25s;
}

#chat-bar .comment-send .plane-icon {
    width: 24px;
    height: 24px;
    fill: none; /* prevent Safari from filling the SVG background */
    position: relative;
    display: inline-block;
    filter: drop-shadow(0 0 8px rgba(0, 255, 255, 0.5));
}

#chat-bar .comment-send .plane-base {
    fill: currentColor;
}

#chat-bar .comment-send .plane-glitch1,
#chat-bar .comment-send .plane-glitch2 {
    opacity: 0;
    filter: blur(1px);
    animation: glitch 2s infinite;
}

#chat-bar .comment-send .plane-glitch1 {
    fill: #ff00ff;
}

#chat-bar .comment-send .plane-glitch2 {
    fill: #00ffff;
    animation: glitch 2s infinite reverse;
}

#chat-bar .comment-send .scan-line {
    position: absolute;
    width: 100%;
    height: 2px;
    background: linear-gradient(
        to right,
        transparent,
        rgba(0, 255, 255, 0.8),
        transparent
    );
    top: 0;
    animation: scan 2s linear infinite;
    filter: blur(1px);
}

#chat-bar .comment-send:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 20px rgba(0, 255, 255, 0.6);
}

#chat-bar .comment-send.pressed {
    transform: scale(0.92);
    box-shadow: 0 0 8px rgba(0, 255, 255, 0.6);
}

@keyframes glitch {
    0%,
    100% {
        transform: translateX(0);
        opacity: 0.3;
    }
    20% {
        transform: translateX(-5px);
        opacity: 0.5;
    }
    40% {
        transform: translateX(5px);
        opacity: 0.7;
    }
    60% {
        transform: translateX(-3px);
        opacity: 0.5;
    }
    80% {
        transform: translateX(3px);
        opacity: 0.3;
    }
}

@keyframes scan {
    0% {
        top: -10%;
    }
    100% {
        top: 110%;
    }
}

@keyframes pulse-glow {
    0%,
    100% {
        box-shadow: 0 0 4px var(--neo-blue), 0 0 8px var(--neo-blue) inset;
    }

    50% {
        box-shadow: 0 0 8px var(--neo-blue), 0 0 16px var(--neo-blue) inset;
    }
}

#chat-log .msg {
    position: relative;
    padding: 2px 0;
    font-weight: 500;
}

#chat-log .msg::before,
#chat-log .msg::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    pointer-events: none;
    opacity: 0;
    filter: blur(1px);
}

#chat-log .msg::before {
    color: #ff00ff;
}

#chat-log .msg::after {
    color: #00ffff;
}

#chat-log.glitching .msg::before,
#chat-log.glitching .msg::after {
    opacity: 0.4;
    animation: glitch 0.4s;
}

#chat-log.glitching .msg::after {
    animation: glitch 0.4s reverse;
}

/* 六色循环：蓝→粉→黄→青→紫→橙 → 再循环 */
#chat-log .msg:nth-child(6n + 1) {
    color: #23c8fe; /* Bright Blue */
    text-shadow: 0 0 4px rgba(35, 200, 254, 0.9), 0 0 12px rgba(35, 200, 254, 0.55);
}

#chat-log .msg:nth-child(6n + 2) {
    color: #fe23a1; /* Bright Pink */
    text-shadow: 0 0 4px rgba(254, 35, 161, 0.9), 0 0 12px rgba(254, 35, 161, 0.5);
}

#chat-log .msg:nth-child(6n + 3) {
    color: #feb023; /* Bright Yellow */
    text-shadow: 0 0 4px rgba(254, 176, 35, 0.9), 0 0 12px rgba(254, 176, 35, 0.5);
}

#chat-log .msg:nth-child(6n + 4) {
    color: #00ffe1; /* Cyan */
    text-shadow: 0 0 4px rgba(0, 255, 225, 0.9), 0 0 12px rgba(0, 255, 225, 0.5);
}

#chat-log .msg:nth-child(6n + 5) {
    color: #c770ff; /* Purple */
    text-shadow: 0 0 4px rgba(199, 112, 255, 0.9), 0 0 12px rgba(199, 112, 255, 0.5);
}

#chat-log .msg:nth-child(6n) {
    color: #ffa600; /* Orange */
    text-shadow: 0 0 4px rgba(255, 166, 0, 0.9), 0 0 12px rgba(255, 166, 0, 0.5);
}

#chat-log .msg.system {
    color: #ffffff !important;
    text-shadow: 0 0 6px rgba(255, 255, 255, 1), 0 0 18px rgba(255, 255, 255, 0.8);
    font-style: italic;
    font-weight: 700;
    font-size: 1.2em;
    white-space: pre-line; /* allow newline characters */
    /* make system messages stand out more */
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid var(--neo-yellow);
    border-radius: 6px;
    padding: 4px 8px;
    margin: 4px 0;
    box-shadow: 0 0 6px var(--neo-yellow), 0 0 12px var(--neo-yellow) inset;
}

/* ============== Heart Button ============== */
:root {
    --btn-size: 65px;
    --icon-size: 85%;
    /* Duration of the like button ripple animation */
    --ripple-duration: 1s;
    /* Synchronizes the start time of ripple and blink animations */
    --pulse-offset: 0s;
}

.heart-btn {
    width: var(--btn-size);
    aspect-ratio: 1;
    border: none;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    background: linear-gradient(145deg, hsla(0, 0%, 100%, 0.1), hsla(0, 0%, 100%, 0.02) 65%);
    border: 1px solid hsla(0, 0%, 100%, 0.15);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 0 12px currentColor, 0 0 24px currentColor;
    backdrop-filter: blur(4px) saturate(140%);

    position: relative;
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    z-index: 3;
}

.heart-btn.pressed {
    transform: scale(0.92);
}

.cell.out .heart-btn {
    display: none;
}

/* Removed elimination texture overlay */

/* Show a bold red OUT label when a video cell is eliminated */
.cell.out::after {
    content: "OUT";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(40px, 8vw, 60px);
    font-weight: 900;
    color: #ff0022;
    text-shadow: 0 0 20px #ff0022, 0 0 40px #ff0022;
    pointer-events: none;
    z-index: 2;
}

/* ============== Heart Icon & Ripple ============== */
.heart-icon,
.ripple {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.heart-icon {
    width: var(--icon-size);
    pointer-events: none;
}

.heart-icon path {
    fill: currentColor;
}

@keyframes rippleHeart {
    from {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
    }

    to {
        transform: translate(-50%, -50%) scale(8);
        opacity: 0;
    }
}

.ripple {
    width: var(--icon-size);
    height: var(--icon-size);
    fill: none;
    stroke: currentColor;
    stroke-width: 10;
    stroke-linejoin: round;
    pointer-events: none;
    opacity: 0.65;
    filter: blur(3px) drop-shadow(0 0 14px currentColor) drop-shadow(0 0 34px currentColor);
    /* Speed of the ripple matches the CSS variable so JS can adjust it */
    animation: rippleHeart var(--ripple-duration, 1s) linear infinite;
    animation-delay: var(--pulse-offset, 0s);
}

#A1 .heart-btn {
    color: #fe23a1; /* adjusted brightness */
}

#A2 .heart-btn {
    color: #23c8fe; /* adjusted brightness */
}

#B2 .heart-btn {
    color: #feb023; /* adjusted brightness */
}

/* ============== Flying Heart & +1 ============== */
@keyframes float {
    from {
        transform: translate(-50%, 0) scale(0.8);
        opacity: 1;
    }

    to {
        transform: translate(-50%, -260px) scale(2);
        opacity: 0;
        filter: blur(2px);
    }
}

.like {
    position: absolute;
    width: 36px;
    height: 36px;
    animation: float 1.6s ease-out forwards;
    filter: drop-shadow(0 0 10px currentColor) drop-shadow(0 0 24px currentColor);
    pointer-events: none;
    z-index: 3;
}

@keyframes pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.4);
    }

    15% {
        opacity: 1;
        transform: translate(-50%, -70%) scale(1);
    }

    80% {
        opacity: 1;
        transform: translate(-50%, -160%) scale(1.4);
    }

    100% {
        opacity: 0;
        transform: translate(-50%, -240%) scale(1.4);
    }
}

.plusone {
    position: absolute;
    font-size: 76px;
    font-weight: 900;
    color: currentColor;
    text-shadow: 0 0 20px currentColor, 0 0 40px currentColor, 0 0 80px currentColor;
    animation: pop 1.2s ease-out forwards;
    pointer-events: none;
    z-index: 3;
}

#new-tip {
    position: absolute;
    right: 18px;
    bottom: 60px;
    /* 按输入框高度自行微调 */
    padding: 4px 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #00eaff;
    font-size: clamp(16px, 2vw, 24px);
    border: 1px solid #00eaff;
    border-radius: 20px;
    cursor: pointer;
    box-shadow: 0 0 6px #00eaff;
    transition: opacity 0.25s;
    z-index: 4;
}

#new-tip.hidden {
    opacity: 0;
    pointer-events: none;
}

/* ============== Scoreboard ============== */
:root {
    --score-red: #ff3366;
}

#board {
    position: absolute;
    top: 50%;
    left: 0; /* 10px margin comes from the parent cell's padding */
    transform: translateY(-50%) scale(var(--board-scale, 1));
    transform-origin: left center;
    box-sizing: border-box;
    color: #fff;
    font-size: clamp(20px, 7vmin, 30px);
    pointer-events: none;
    text-shadow: 0 0 6px currentColor;
    z-index: 4;
}

#board .row {
    position: absolute;
    top: 0;
    display: grid;
    /* allow the score column to grow when values are long */
    grid-template-columns: 24px auto minmax(70px, max-content);
    align-items: center;
    column-gap: 8px;
    padding: 2px 0;
    will-change: transform;
    transition: transform 0.4s ease;
    transform: translateY(0);
}

#board .name {
    white-space: nowrap; /* keep streamer names on a single line */
    justify-content: flex-start;
}

#board .rank {
    width: 24px;
    color: #999;
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    line-height: 1;
}

#board .name,
#board .score {
    display: flex;
    align-items: center;
    line-height: 1;
}

#board .score {
    position: relative;
    width: max-content;
    min-width: 70px;
    text-align: right;
    font-weight: 700;
    justify-content: flex-end;
}

#board .score .value {
    display: block;
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
}

#board .row.last .name,
#board .row.last .score {
    /* breathing effect on last row should remain */
    animation: breathe-color var(--breathe-duration, 1.2s) ease-in-out infinite;
}

#board .row.last .score {
    color: var(--score-red);
}

#board .row.last .score .value {
    text-shadow: 0 0 20px var(--score-red), 0 0 40px var(--score-red);
}

#board .row.bump .score .value {
    animation: bump 0.4s;
}

#board .row.out {
    opacity: 0.5;
}

#board .row.out .rank,
#board .row.out .name,
#board .row.out .score {
    filter: grayscale(1);
    /* override individual player colors to ensure identical brightness */
    color: #999 !important;
}

/* hide scores and ranks during the intro round */
#board.noscore .row {
    grid-template-columns: auto;
}
#board.noscore .rank,
#board.noscore .score {
    display: none;
}
#board.noscore .name {
    width: 100%;
    justify-content: center;
}

/* show a blood-red cross over eliminated streamers
   the icon should not exceed the text height */
#board .row.out::after {
    content: "\274C"; /* cross mark */
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em; /* match text height */
    line-height: 1;
    width: 1em;
    height: 1em;
    color: #ff0022;
    text-shadow: 0 0 20px #ff0022, 0 0 40px #ff0022;
    pointer-events: none;
    z-index: 1;
}


/* match scoreboard name color with like button color */
#board .row.jason .name {
    color: #fe23a1; /* adjust brightness */
}

#board .row.qing .name {
    color: #23c8fe; /* adjust brightness */
}

#board .row.nana .name {
    color: #feb023; /* adjust brightness */
}

/* match scoreboard score color with like button color */
#board .row.jason .score {
    color: #fe23a1; /* adjust brightness */
}

#board .row.qing .score {
    color: #23c8fe; /* adjust brightness */
}

#board .row.nana .score {
    color: #feb023; /* adjust brightness */
}

.board-plusone {
    position: absolute;
    right: 0;
    top: 50%;
    /* start aligned with the score value */
    transform: translate(50%, -50%);
    font-size: 24px;
    font-weight: 700;
    color: currentColor;
    text-shadow: 0 0 10px currentColor, 0 0 20px currentColor;
    animation: board-pop 0.8s ease-out forwards;
    pointer-events: none;
    z-index: 5;
}

@keyframes board-pop {
    from {
        opacity: 1;
        /* maintain alignment with the score value */
        transform: translate(50%, -50%) scale(1);
    }
    to {
        opacity: 0;
        /* move upward while keeping horizontal position */
        transform: translate(50%, -90px) scale(1.2);
    }
}

@keyframes bump {
    0% { transform: scale(1); }
    50% { transform: scale(1.5); }
    100% { transform: scale(1); }
}

@keyframes breathe-color {
    0%,
    100% {
        filter: brightness(1);
    }
    50% {
        filter: brightness(0.6);
    }
}

/* ----------- Round End Countdown ----------- */
#countdown {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    /* Larger font and stronger glow for more urgency */
    font-size: clamp(80px, 15vw, 220px);
    font-weight: 700;
    color: var(--score-red);
    text-shadow: 0 0 20px var(--score-red), 0 0 40px var(--score-red);
    pointer-events: none;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.3s;
}

#countdown.show {
    opacity: 1;
    /* Continuous glow effect while the countdown is visible */
    animation: countdown-glow 0.6s ease-in-out infinite alternate;
}

/* When pulsing, combine the glow and pulse animations */
#countdown.show.pulse {
    animation: countdown-glow 0.6s ease-in-out infinite alternate,
        countdown-pulse 0.6s ease-out;
}

@keyframes countdown-pulse {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.6);
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
}

@keyframes countdown-glow {
    from {
        text-shadow: 0 0 20px var(--score-red), 0 0 40px var(--score-red);
    }
    to {
        text-shadow: 0 0 40px var(--score-red), 0 0 80px var(--score-red);
    }
}

/* ============ OFFLINE OVERLAY ============ */
#offline-overlay {
    position: absolute;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.8) url("https://cdn.imxiqi.cn/neonzoo_live/images/logo.webp") center/60% no-repeat;
    z-index: 5;
}

#offline-overlay.show {
    display: flex;
}

#offline-overlay .offline-text {
    font-size: clamp(48px, 10vw, 120px);
    font-weight: 700;
    color: #fff;
    position: relative;
    text-transform: uppercase;
}

#offline-overlay .offline-text::before,
#offline-overlay .offline-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.4;
    filter: blur(1px);
}

#offline-overlay .offline-text::before {
    color: #ff00ff;
    animation: glitch 2s infinite;
}

#offline-overlay .offline-text::after {
    color: #00ffff;
    animation: glitch 2s infinite reverse;
}

/* ----------- Round Start Banner ----------- */
#round-start {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: clamp(80px, 15vw, 220px);
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 20px var(--score-red), 0 0 40px var(--score-red);
    text-align: center;
    pointer-events: none;
    opacity: 0;
    z-index: 5;
    transition: opacity 0.3s;
}

#round-start.show {
    opacity: 1;
}

#round-start.show.pulse {
    animation: countdown-glow 0.6s ease-in-out infinite alternate,
        countdown-pulse 0.6s ease-out;
}


/* ============== Responsive Layout ============== */
@media (orientation: landscape) and (min-width: 800px) {
    body {
        grid-template-rows: none;
        grid-template-columns: 65vw 35vw;
    }

    #grid {
        height: 100vh;
    }

    #chat {
        height: 100vh;
    }
}