* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #0c0a09; color: #faf9f6;
}

.screen {
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 2vh 4vw;
  overflow: hidden;
}

.top {
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 2px solid #44403c; padding-bottom: 1.6vh; flex-shrink: 0;
}
.t-name { font-size: 4vh; font-weight: 800; color: #fbbf24; letter-spacing: 2px; }
.t-table { font-size: 2.6vh; color: #a8a29e; margin-top: 0.4vh; }
.t-status { font-size: 2.4vh; font-weight: 700; color: #faf9f6; background: #292524; padding: 0.6vh 1.6vw; border-radius: 12px; }

.stats {
  display: flex; gap: 2vw; justify-content: center; flex-shrink: 0;
  padding: 1.4vh 0; border-bottom: 1px solid #292524;
}
.stat-item { font-size: 2.4vh; color: #a8a29e; }
.stat-item b { color: #faf9f6; font-size: 3vh; margin-left: 0.5vw; }

.main {
  flex: 1; min-height: 0;
  display: flex; align-items: center; justify-content: center; gap: 8vw;
  padding: 1.5vh 0;
}
.level-box, .timer-box { text-align: center; }
.box-label { font-size: 2.2vh; color: #a8a29e; margin-bottom: 0.8vh; letter-spacing: 2px; }
.level-no { font-size: 10vh; font-weight: 900; color: #faf9f6; line-height: 1.1; }
.blinds { font-size: 6vh; font-weight: 800; color: #fbbf24; margin-top: 1.2vh; }
.next { font-size: 2.4vh; color: #78716c; margin-top: 1vh; }
.timer { font-size: 15vh; font-weight: 900; color: #fbbf24; line-height: 1.1; font-variant-numeric: tabular-nums; }

.fs-btn {
  position: fixed; right: 2vw; bottom: 2vh; z-index: 99;
  padding: 1vh 1.6vw; font-size: 2.2vh; color: #78716c;
  background: rgba(41,37,36,.7); border: 1px solid #44403c; border-radius: 10px;
  cursor: pointer; transition: all .15s;
}
.fs-btn:hover { color: #fbbf24; border-color: #fbbf24; }