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

/* 配色取自 PokerFans 參考圖（docs/PokerFans2.jpg 的時鐘顯示設置）：
   格子標題金黃、內容近白、格線白、底部新聞紅。 */
:root {
    --tv-tile: rgba(10, 10, 10, .48);
    --tv-line: rgba(252, 253, 253, .88);
    --tv-label: #ffcc00;
    --tv-value: #fef8fb;
    --tv-muted: #aeb1b5;
    --tv-news: #fff;
}

html, body {
    height: 100%;
    background: #0d0d0d;
    color: var(--tv-value);
    font-family: Arial, "Helvetica Neue", "PingFang TC", "Noto Sans TC", sans-serif;
    overflow: hidden;
}

.board {
    position: fixed;
    inset: .55vh .35vw;
    background:
        radial-gradient(circle at 50% 52%, rgba(255, 255, 255, .045), transparent 43%),
        #111;
    border: 1px solid rgba(255, 255, 255, .18);
}

.widget {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 0;
    background: var(--tv-tile);
    box-shadow:
        inset -1px 0 0 var(--tv-line),
        inset 0 -1px 0 var(--tv-line);
    overflow: hidden;
}

.widget.off { display: none; }

.watermark {
    position: absolute;
    left: 51.5%;
    top: 49%;
    transform: translate(-50%, -50%);
    width: 34vw;
    height: 55vh;
    object-fit: contain;
    opacity: .16;
    filter: grayscale(1);
    pointer-events: none;
    z-index: 0;
}

.widget[data-widget="logo"] {
    justify-content: flex-end;
    padding: 1.8vh .75vw 1.8vh 1.8vw;
}

.store-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
}

.widget[data-widget="storeName"] {
    justify-content: flex-start;
    padding: 0 .55em;
}

.store-name {
    max-width: 100%;
    color: var(--tv-label);
    font-size: .72em;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.widget[data-widget="tournamentName"] {
    padding: 0 .5em;
}

.name {
    max-width: 100%;
    color: #fff;
    font-size: .9em;
    font-weight: 700;
    letter-spacing: .02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phase {
    font-size: .72em;
    font-weight: 500;
    letter-spacing: .03em;
    color: #fff;
    white-space: nowrap;
}

.phase .phase-prefix {
    color: var(--tv-label);
    margin-right: .42em;
}

.phase.break { color: var(--tv-label); }

.countdown {
    position: relative;
    z-index: 1;
    font-size: 1em;
    line-height: 1;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.045em;
    white-space: nowrap;
}

.countdown.paused { opacity: .48; }
.countdown.warning { color: #ff6666; }

/* 兩行並存（盲注＋前注）時維持原本的左標右值，兩行才塞得下同一格 */
.widget[data-widget="blinds"] {
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: .06em;
    padding: .08em .4em;
}

.blind-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    align-items: baseline;
    gap: .18em;
    min-width: 0;
}

.blinds-label {
    color: var(--tv-label);
    font-size: .58em;
    font-weight: 500;
    white-space: nowrap;
}

.blinds,
.ante {
    justify-self: end;
    color: var(--tv-value);
    font-size: .55em;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 店家把 BB Ante 拉成獨立格子時，盲注格只留盲注一行，
   單行就能改成跟其他統計格一樣的金色小標在上、白色數值在下 */
.widget[data-widget="blinds"].ante-split { align-items: center; padding: .1em .3em; }

.widget[data-widget="blinds"].ante-split .blind-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .04em;
}

.widget[data-widget="blinds"].ante-split .blinds-label { font-size: .34em; letter-spacing: .01em; }
.widget[data-widget="blinds"].ante-split .blinds { font-size: .62em; font-weight: 500; }

/* 要壓過上面那條 .blind-row 的 display:flex，所以放在最後 */
.widget[data-widget="blinds"].ante-split [data-ante-row] { display: none; }

.widget[data-widget="announce"] {
    align-items: stretch;
    justify-content: stretch;
}

.announce {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .28em;
    padding: .5em .12em;
    overflow: hidden;
}

.announce-text {
    max-width: 100%;
    color: var(--tv-muted);
    font-size: .75em;
    line-height: 1.15;
    font-weight: 700;
    text-align: center;
    white-space: pre-wrap;
    word-break: break-word;
    overflow: hidden;
}

.announce-text.long { font-size: .48em; }
.announce-text.longer { font-size: .34em; }
.announce-page {
    position: absolute;
    right: .7em;
    bottom: .45em;
    font-size: .2em;
    color: rgba(255, 255, 255, .6);
    letter-spacing: .08em;
}

.stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .1em;
    width: 100%;
    height: 100%;
    padding: .2em .28em;
    min-width: 0;
}

.stat-label {
    color: var(--tv-label);
    font-size: .42em;
    font-weight: 500;
    letter-spacing: .01em;
    white-space: nowrap;
}

.stat-value {
    color: var(--tv-value);
    font-size: .78em;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* 右欄統計：標題靠右、數值置中，底部再壓一條白線收邊 */
.right-stat {
    align-items: flex-end;
    padding-right: .48em;
}

.right-stat .stat-value {
    align-self: center;
    font-size: 1.05em;
}

.right-stat::after {
    content: "";
    position: absolute;
    left: 5%;
    right: 5%;
    bottom: 0;
    height: 2px;
    border-radius: 999px;
    background: var(--tv-value);
}

.prize-stat {
    flex-direction: column;
    gap: .06em;
}

.prize-stat .stat-label { font-size: .48em; }
.prize-stat .stat-value { font-size: .62em; }

.next-level-stat {
    flex-direction: row;
    justify-content: flex-start;
    gap: .35em;
    padding-left: .3em;
}

.next-level-stat .stat-label { font-size: .55em; }
.next-level-stat .stat-value { color: var(--tv-muted); font-size: .52em; }

.schedule {
    font-size: .72em;
    letter-spacing: 0;
}

.widget[data-widget="marquee"] {
    align-items: stretch;
    justify-content: stretch;
    padding: .25em 2.25em;
}

.marquee {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-width: 0;
}

.marquee-text {
    position: absolute;
    top: 50%;
    left: 0;
    color: var(--tv-news);
    white-space: nowrap;
    font-size: .58em;
    font-style: italic;
    font-weight: 700;
    letter-spacing: .02em;
    animation: marquee-scroll 20s linear infinite;
    will-change: transform;
}

@keyframes marquee-scroll {
    0% { transform: translate(var(--marquee-w, 100vw), -50%); }
    100% { transform: translate(-100%, -50%); }
}

.sys-badges {
    position: fixed;
    top: 1.4vh;
    right: 1.2vw;
    display: flex;
    align-items: center;
    gap: 1.2vw;
    z-index: 6;
    opacity: 0;
    transition: opacity .2s ease;
}

.board:hover .sys-badges,
.sys-badges:focus-within { opacity: 1; }
body.preview .sys-badges { display: none; }

.sound-toggle {
    border: 1px solid #455a64;
    border-radius: 1vh;
    padding: .7vh 1.1vw;
    background: #18232c;
    color: #cfd8dc;
    font-size: 1.7vh;
    cursor: pointer;
}

.sound-toggle[aria-pressed="true"] { border-color: #4caf50; color: #81c784; }
.sound-toggle:focus-visible { outline: 3px solid #42a5f5; outline-offset: 2px; }

.badge {
    font-size: 2.4vh;
    font-weight: 700;
    padding: .6vh 1.4vw;
    border-radius: 1.2vh;
    letter-spacing: .1em;
}

.badge.paused { background: #b3541e; color: #fff; animation: pulse 1.2s ease-in-out infinite; }
.badge.finished { background: #2e7d32; color: #fff; }
.badge.notstarted { background: #37474f; color: #cfd8dc; }
/* 版本號跟其他系統標記一樣藏在 .sys-badges 裡，滑鼠移到畫面上才浮現，
   平時不會出現在賽事畫面上。 */
.app-version { font-size: 1.5vh; color: #546e7a; font-variant-numeric: tabular-nums; }

.conn { font-size: 1.8vh; color: #78909c; }
.conn.offline { color: #ef5350; animation: pulse 1.2s ease-in-out infinite; }
.conn.online { color: #4caf50; }

.message {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11, 15, 20, .92);
    font-size: 4.5vh;
    color: #ef9a9a;
    text-align: center;
    padding: 0 8vw;
    z-index: 7;
}

.table-picker {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4vh;
    padding: 6vh 7vw;
    background: rgba(11, 15, 20, .97);
    z-index: 9;
}

.table-picker-title { font-size: 5vh; font-weight: 800; color: #e8eef5; }
.table-picker-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(20vw, 1fr));
    gap: 2.4vh 2vw;
    width: min(86vw, 150vh);
}
.table-picker-option {
    min-height: 14vh;
    border: .35vh solid #455a64;
    border-radius: 1.6vh;
    padding: 2vh 2vw;
    background: #17232d;
    color: #f5f7fa;
    font: inherit;
    text-align: left;
}
.table-picker-option-name { display: block; font-size: 4vh; font-weight: 800; }
.table-picker-option-state { display: block; margin-top: 1vh; font-size: 2.2vh; color: #90a4b8; }
.table-picker-option.selected { border-color: #26a69a; }
.table-picker-option:focus-visible {
    border-color: #ffd54f;
    outline: .5vh solid rgba(255, 213, 79, .35);
    outline-offset: .4vh;
    background: #243746;
}
.table-picker-hint { font-size: 2.5vh; color: #90a4b8; }

.pairing {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3vh;
    background: rgba(11, 15, 20, .96);
    text-align: center;
    padding: 0 6vw;
    z-index: 8;
}

.pairing-title { font-size: 5vh; font-weight: 700; color: #e8eef5; }
.pairing-hint { font-size: 3vh; color: #90a4b8; }
/* 掃碼與手打並排。QR 是主要路徑，6 碼是掃不到時的備援，所以兩邊都要看得見 */
.pairing-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6vw;
    flex-wrap: wrap;
}

.pairing-qr-box, .pairing-code-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5vh;
}

/* 白底是刻意的：深色背景上的 QR 有些手機相機讀不到，留白邊也是掃描率的一部分 */
.pairing-qr {
    background: #fff;
    padding: 1.5vh;
    border-radius: 1vh;
    line-height: 0;
}

.pairing-qr svg {
    display: block;
    width: 30vh;
    height: 30vh;
}

.pairing-method-label { font-size: 2.2vh; color: #90a4b8; }

.pairing-code {
    font-size: 13vh;
    font-weight: 800;
    letter-spacing: 1.2vh;
    color: #7ee0c0;
    font-variant-numeric: tabular-nums;
}
.pairing-status { font-size: 3vh; color: #cfd8e3; animation: pulse 2s ease-in-out infinite; }
.hidden { display: none; }

@media (max-width: 900px) {
    .table-picker-grid { grid-template-columns: repeat(2, minmax(30vw, 1fr)); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}