/* ===== Design Tokens ===== */
:root {
  --dz-bg: #070c12;
  --dz-bg2: #0a1018;
  --dz-card: rgba(255,255,255,0.03);
  --dz-border: rgba(255,255,255,0.06);
  --dz-border-bright: rgba(214,168,79,0.2);
  --dz-gold: #d6a84f;
  --dz-gold-dim: #a08a4a;
  --dz-gold-bright: #d6a84f;
  --dz-gold-deep: #a08a4a;
  --dz-text: #ffffff;
  --dz-text-dim: #999;
  --dz-radius: 10px;
  --dz-green: #4ade80;
  --dz-amber: #f59e0b;
  --dz-red: #ef4444;
}

/* ===== Reset ===== */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  color:var(--dz-text);
  -webkit-font-smoothing:antialiased;
  /* 移动端高度适配：100vh 在手机浏览器会把地址栏算进去导致底部留白/溢出，
     依次 fallback 到 svh（收起地址栏的最短高度）/ dvh（动态跟随地址栏） */
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  background:
    radial-gradient(ellipse 50% 35% at 50% -5%, rgba(255, 220, 130, 0.50) 0%, rgba(214, 168, 79, 0.30) 25%, transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 50%, rgba(0, 0, 0, 0.50) 100%),
    linear-gradient(180deg, #050810 0%, #02040a 100%);
  overflow-x:hidden;
}
/* 仅大屏保留 fixed 聚光效果；移动端 background-attachment:fixed 有渲染 bug
   （iOS/Android 真机背景错位、断层、留白），去掉后背景按内容自然铺满 */
@media (min-width: 721px) {
  body{
    background-attachment:fixed;
  }
}
a{color:inherit;text-decoration:none;}

/* ===== App shell ===== */
.app-shell{
  position:relative;
  z-index:2;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
}

/* ===== 顶部导航条（详情页） ===== */
.topbar{
  position:sticky;
  top:0;
  z-index:50;
  display:flex;
  align-items:center;
  height:56px;
  padding:0 16px;
  background:rgba(7,12,18,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  border-bottom:1px solid var(--dz-border);
  padding-top:env(safe-area-inset-top, 0px);
  height:calc(56px + env(safe-area-inset-top, 0px));
}
.back-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  background:transparent;
  border:none;
  color:var(--dz-gold);
  cursor:pointer;
  border-radius:50%;
  transition:background 0.2s;
}
.back-btn:hover,.back-btn:active{ background:rgba(214,168,79,0.1); }
.topbar-title{
  flex:1;
  font-size:16px;
  font-weight:600;
  color:var(--dz-text);
  margin-left:8px;
  letter-spacing:1px;
}
.status-pill{
  font-size:12px;
  font-weight:700;
  padding:4px 12px;
  border-radius:999px;
  margin-right:8px;
}
.fullscreen-btn{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(214,168,79,0.06);
  border:1px solid rgba(214,168,79,0.18);
  border-radius:8px;
  color:var(--dz-gold-dim);
  cursor:pointer;
  transition:background 0.15s, border-color 0.15s, color 0.15s;
  margin-left:auto;
  -webkit-tap-highlight-color:transparent;
}
.fullscreen-btn:hover,.fullscreen-btn:active{
  background:rgba(214,168,79,0.14);
  border-color:rgba(214,168,79,0.35);
  color:var(--dz-gold);
}
.topbar{gap:8px; padding:0 12px;}
.topbar > .topbar-title{flex:0 1 auto;}
.status-pill.active{
  background:rgba(74,222,128,0.12);
  color:var(--dz-green);
  border:1px solid rgba(74,222,128,0.25);
}
.status-pill.paused{
  background:rgba(245,158,11,0.12);
  color:var(--dz-amber);
  border:1px solid rgba(245,158,11,0.25);
}
.status-pill.pending{
  background:rgba(214,168,79,0.10);
  color:var(--dz-gold-dim);
  border:1px solid rgba(214,168,79,0.20);
}

/* ===== 列表页 ===== */
.list-page{
  padding:24px 16px;
  padding-top:16px;
  padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px));
  flex:1;
}
.list-header{
  text-align:center;
  margin-bottom:24px;
}
.list-title{
  font-size:22px;
  font-weight:700;
  color:var(--dz-gold);
  letter-spacing:2px;
  margin-bottom:6px;
}
.list-sub{
  font-size:12px;
  color:var(--dz-text-dim);
}
.list-empty{
  text-align:center;
  padding:60px 20px;
  color:var(--dz-text-dim);
  font-size:14px;
}
.list-section{
  margin-bottom:24px;
}
.list-section-title{
  font-size:12px;
  font-weight:600;
  color:var(--dz-text-dim);
  letter-spacing:1.5px;
  margin-bottom:10px;
  padding-left:4px;
  display:flex;
  align-items:center;
  gap:8px;
}
.list-section-title::before{
  content:'';
  width:3px;
  height:12px;
  background:var(--dz-gold);
  border-radius:2px;
}
.list-section.active .list-section-title::before{ background:var(--dz-green); }
.list-section.paused .list-section-title::before{ background:var(--dz-amber); }

.list-card{
  display:block;
  padding:16px;
  background:var(--dz-card);
  border:1px solid var(--dz-border);
  border-radius:var(--dz-radius);
  margin-bottom:10px;
  transition:all 0.2s;
  cursor:pointer;
}
.list-card:hover,.list-card:active{
  border-color:var(--dz-border-bright);
  background:rgba(214,168,79,0.06);
  transform:translateY(-1px);
}
.list-card-row1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:8px;
}
.list-card-name{
  font-size:16px;
  font-weight:600;
  color:var(--dz-text);
}
.list-card-meta{
  font-size:11px;
  color:var(--dz-text-dim);
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.list-card-levels{
  font-size:11px;
  color:var(--dz-text-dim);
  margin-top:4px;
}
.list-card-prize{
  font-size:12px;
  color:var(--dz-gold-dim);
  margin-top:6px;
}
/* ===== 详情页布局 ===== */
#detailView{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:0;
}
#timerContent{
  display:flex;
  flex-direction:column;
  flex:1;
  justify-content:flex-start;
  min-height:0;
}
#timerContent .level-history{
  flex:1;
  min-height:0;
  align-content:start;
}



/* ===== 详情页（看板模式 UI） ===== */
.timer-page{
  display:flex;
  flex-direction:column;
  padding:24px;
  flex:1;
  overflow:hidden;  /* 自适应缩放后容器不出现滚动条 */
}
/* 详情视图：自适应缩放容器（fitContentView 用 transform scale 把内容缩进任意视口） */
#detailView{
  position:relative;
  transform-origin:top left;
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.tournament-header{
  text-align:center;
  margin-bottom:4px;
  position:relative;
}
.brand-frame{
  display:inline-flex;
  align-items:center;
  gap:clamp(8px, 1.4vw, 18px);
  padding:clamp(6px, 1vw, 12px) clamp(14px, 2.4vw, 28px);
  border:1px solid var(--dz-border);
  border-radius:var(--dz-radius);
  background:linear-gradient(180deg, rgba(214,168,79,0.06), rgba(214,168,79,0.02));
  position:relative;
}
.brand-frame::before, .brand-frame::after{
  content:'';
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:clamp(8px, 1vw, 14px);
  height:1px;
  background:linear-gradient(90deg, transparent, var(--dz-gold), transparent);
  opacity:0.5;
}
.brand-frame::before{ left:clamp(-20px, -1.5vw, -10px); }
.brand-frame::after{ right:clamp(-20px, -1.5vw, -10px); }
.brand-suit{
  font-size:clamp(22px, 3vw, 34px);
  font-weight:700;
  color:var(--dz-gold);
  text-shadow:0 0 12px rgba(214,168,79,0.25);
  line-height:1;
}
.brand-suit-left{ color:var(--dz-gold); }
.brand-suit-right{ color:var(--dz-red); }
.brand-main{
  display:flex;
  flex-direction:column;
  align-items:center;
  line-height:1.1;
}
.brand-name{
  font-size:clamp(18px, 2.6vw, 30px);
  font-weight:800;
  letter-spacing:clamp(2px, 0.5vw, 8px);
  color:var(--dz-gold);
  text-shadow:0 0 14px rgba(214,168,79,0.30);
}
.brand-sub{
  font-size:clamp(11px, 1.2vw, 14px);
  font-weight:600;
  letter-spacing:clamp(2px, 0.4vw, 6px);
  color:var(--dz-text);
  opacity:0.85;
  margin-top:2px;
}
.tournament-divider{
  width:clamp(60px, 12vw, 140px);
  height:1px;
  margin:clamp(8px, 1.2vw, 14px) auto clamp(6px, 1vw, 10px);
  background:linear-gradient(90deg, transparent, var(--dz-gold-dim), transparent);
  opacity:0.6;
}
.tournament-name{
  font-size:clamp(15px, 1.8vw, 22px);
  font-weight:700;
  letter-spacing:clamp(2px, 0.4vw, 6px);
  color:var(--dz-gold-dim);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.tournament-name::before,.tournament-name::after{
  content:'♣';
  color:var(--dz-gold-deep);
  font-size:clamp(11px, 1.1vw, 14px);
  -webkit-text-fill-color:var(--dz-gold-dim);
  opacity:0.7;
}
.tournament-sub{
  font-size:12px;
  color:var(--dz-text-dim);
}

.timer-main{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);
  gap:clamp(10px, 1.6vw, 20px);
  margin-bottom:clamp(14px, 2vw, 20px);
}
.timer-card{
  height:100%;
  background:var(--dz-card);
  border:1px solid var(--dz-border);
  border-radius:var(--dz-radius);
  padding:20px 16px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  position:relative;
  min-width:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.3);
  overflow:hidden;
}
.timer-card::before{
  content:'';
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:60%;height:1px;
  background:linear-gradient(90deg, transparent, var(--dz-gold-bright), transparent);
  opacity:0.6;
}
.prize-card{
  border-color:var(--dz-border-bright);
  background:rgba(214,168,79,0.06);
}
.card-label{
  font-size:11px;
  color:var(--dz-text-dim);
  letter-spacing:2px;
  margin-bottom:10px;
  font-weight:600;
}
.card-value{
  font-size:clamp(24px, 2.6vw, 34px);
  font-weight:800;
  color:var(--dz-gold);
  text-shadow:0 0 12px rgba(214,168,79,0.12);
  font-variant-numeric:tabular-nums;
  word-break:break-all;
  line-height:1.2;
}
.card-value-small{
  font-size:clamp(15px, 1.6vw, 20px);
  font-weight:700;
  color:var(--dz-text);
  font-variant-numeric:tabular-nums;
  line-height:1.5;
}
.card-value-small .gold{
  color:var(--dz-gold);
  font-weight:800;
}
.next-card{ color:var(--dz-text-dim); }
.next-card .card-value-small{ font-size:clamp(13px, 1.3vw, 16px); }
.next-card .gold{ font-size:clamp(16px, 1.8vw, 20px); }
.next-card.final-level{ text-align:center; padding:8px 4px; }
.next-card.final-level .final-icon{
  font-size:28px; color:var(--dz-gold);
  text-shadow:0 0 16px rgba(214,168,79,0.25);
  letter-spacing:6px; margin:6px 0 8px;
  line-height:1;
}
.next-card.final-level .final-tip{
  margin-top:10px; color:var(--dz-text-dim);
  font-size:11px; letter-spacing:2px;
}

/* 中栏倒计时 */
.countdown-card{ padding:20px 16px 16px; }
.blind-level{
  font-size:13px;
  color:var(--dz-text-dim);
  margin-bottom:8px;
  letter-spacing:1px;
}
.blind-level span{
  color:var(--dz-gold);
  font-weight:800;
  font-size:18px;
  margin-left:4px;
}
.countdown-wrap{
  position:relative;
  width:clamp(180px, 21vw, 260px);
  height:clamp(180px, 21vw, 260px);
  aspect-ratio:1;
  margin:0 auto clamp(12px, 1.6vw, 18px);
}
.countdown-ring{
  width:100%;
  height:100%;
  transform:rotate(-90deg);
}
.countdown-ring-bg{
  fill:none;
  stroke:rgba(255,255,255,0.06);
  stroke-width:8;
}
.countdown-ring-progress{
  fill:none;
  stroke:var(--dz-gold);
  stroke-width:8;
  stroke-linecap:round;
  transition:stroke-dashoffset 1s linear, stroke 0.3s;
}
.countdown-ring-progress.warning{ stroke:var(--dz-amber); }
.countdown-ring-progress.danger{ stroke:var(--dz-red); }
.countdown-time{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%, -50%);
  font-size:clamp(24px, 4vw, 48px);
  font-weight:800;
  color:var(--dz-gold);
  font-variant-numeric:tabular-nums;
  letter-spacing:1px;
  text-shadow:0 0 18px rgba(214,168,79,0.20);
  transition:color 0.3s;
}
.countdown-time.warning{ color:var(--dz-amber); }
.countdown-time.danger{ color:var(--dz-red); }
.countdown-time.idle{ color:var(--dz-text-dim); }

.current-blind{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 1.2vw, 14px);
  font-variant-numeric:tabular-nums;
}
.blind-item{ display:flex; flex-direction:column; align-items:center; min-width:48px; }
.blind-label{ font-size:10px; color:var(--dz-text-dim); letter-spacing:1px; margin-bottom:2px; }
.blind-num{ font-size:clamp(16px, 1.6vw, 20px); font-weight:700; color:var(--dz-text); }
.blind-num.ante{ color:var(--dz-gold-dim); }
.blind-divider{ font-size:16px; color:var(--dz-text-dim); padding-top:clamp(10px, 1.4vw, 16px); }

/* PENDING 占位 */
.pending-banner{
  text-align:center;
  padding:32px 16px;
  background:rgba(214,168,79,0.06);
  border:1px solid var(--dz-border-bright);
  border-radius:var(--dz-radius);
  margin-bottom:16px;
}
.pending-banner-icon{ font-size:36px; margin-bottom:12px; opacity:0.7; }
.pending-banner-title{ font-size:16px; font-weight:700; color:var(--dz-gold); margin-bottom:6px; }
.pending-banner-text{ font-size:13px; color:var(--dz-text-dim); }

/* PAUSED 蒙层 */
.paused-overlay{
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:rgba(0,0,0,0.55);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  border-radius:var(--dz-radius);
  backdrop-filter:blur(2px);
  z-index:5;
}
.paused-overlay-text{
  font-size:18px;
  font-weight:700;
  color:var(--dz-amber);
  letter-spacing:2px;
  text-shadow:0 0 12px rgba(245,158,11,0.3);
}

/* 控制按钮 */
.controls{
  display:flex;
  gap:10px;
  margin-bottom:16px;
  flex-wrap:wrap;
  justify-content:center;
}
.ctrl-btn{
  padding:10px 18px;
  border-radius:var(--dz-radius);
  border:1px solid var(--dz-border);
  background:var(--dz-card);
  color:var(--dz-text);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s;
}
.ctrl-btn:hover,.ctrl-btn:active{ border-color:var(--dz-border-bright); }
.ctrl-btn:disabled,
.ctrl-btn:disabled:hover{
  opacity:0.35; cursor:not-allowed;
  border-color:var(--dz-border); color:var(--dz-text-dim);
  background:var(--dz-card);
}
.ctrl-btn.primary:disabled,
.ctrl-btn.primary:disabled:hover{
  color:var(--dz-gold-dim); background:rgba(214,168,79,0.04);
  border-color:rgba(214,168,79,0.10);
}
.ctrl-btn.primary{
  background:rgba(214,168,79,0.10);
  color:var(--dz-gold);
  border-color:rgba(214,168,79,0.30);
}
.ctrl-btn.danger{
  background:rgba(239,68,68,0.08);
  color:var(--dz-red);
  border-color:rgba(239,68,68,0.20);
}

/* 盲注级别表 */
.level-history{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(min(100%, 140px), 1fr));
  gap:clamp(6px, 0.8vw, 10px);
  padding:12px;
  background:rgba(0,0,0,0.20);
  border-radius:var(--dz-radius);
  border:1px solid var(--dz-border);
}
.level-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:6px 10px;
  border-radius:6px;
  font-size:11px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.04);
  min-width:0;
  gap:8px;
}
.level-row.current{
  background:rgba(214,168,79,0.15);
  border-color:rgba(214,168,79,0.40);
}
.level-row.done{ opacity:0.5; }
.level-idx{
  color:var(--dz-gold);
  font-weight:700;
  font-size:12px;
  flex:0 0 auto;
}
.level-detail{
  color:var(--dz-text-dim);
  font-variant-numeric:tabular-nums;
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  text-align:center;
  line-height:1.35;
}
.level-time{
  color:var(--dz-text-dim);
  font-size:10px;
  flex:0 0 auto;
}

/* ===== Empty state ===== */
.empty-state{
  text-align:center;
  padding:80px 20px;
  color:var(--dz-text-dim);
}
.empty-text{
  font-size:16px;
  line-height:1.6;
}

/* 空状态 & 未开始占位：撑满剩余高度，内容垂直居中（看板式排版，2026-08-25） */
#emptyState, #pendingState{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:0;
}

/* ===== 筹码面板（2026-08-25：替代盲注级别表） ===== */
.chips-panel{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:flex-start;
  gap:clamp(10px, 1.6vw, 20px) clamp(14px, 2.4vw, 28px);
  padding:clamp(10px, 1.2vw, 16px);
  margin-top:clamp(8px, 1.2vh, 14px);
  background:rgba(0,0,0,0.20);
  border:1px solid var(--dz-border);
  border-radius:var(--dz-radius);
}
.chip-item{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  min-width:64px;
}
.chip-coin{
  width:clamp(34px, 4vw, 48px);
  height:clamp(34px, 4vw, 48px);
  border-radius:50%;
  border:3px solid rgba(255,255,255,0.20);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,0.25), 0 2px 8px rgba(0,0,0,0.35);
  position:relative;
}
.chip-coin::before{
  content:'';
  position:absolute;
  inset:22%;
  border-radius:50%;
  border:2px dashed rgba(255,255,255,0.35);
}
.chip-value{
  font-size:clamp(14px, 1.6vw, 18px);
  font-weight:800;
  color:var(--dz-gold);
  font-variant-numeric:tabular-nums;
}
.chip-label{
  font-size:10px;
  color:var(--dz-text-dim);
  letter-spacing:1px;
}

/* 全屏筹码放大：去半透明底框，与看板风格统一 */
.is-fullscreen .chips-panel{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  gap:clamp(10px, 1.6vw, 22px) clamp(18px, 2.6vw, 34px);
  padding:clamp(6px, 1vh, 10px) clamp(10px, 1.4vw, 18px);
}
.is-fullscreen .chip-coin{
  width:clamp(40px, 5.4vh, 64px);
  height:clamp(40px, 5.4vh, 64px);
  border-width:4px;
}
.is-fullscreen .chip-value{ font-size:clamp(18px, 3.4vh, 34px); }
.is-fullscreen .chip-label{ font-size:clamp(11px, 1.8vh, 16px); }

/* ===== 响应式 ===== */
@media (max-width: 720px) {
  .timer-main{ grid-template-columns:1fr; }
  .countdown-wrap{ width:clamp(170px, 54vw, 220px); height:clamp(170px, 54vw, 220px); }
  .countdown-time{ font-size:clamp(24px, 7vw, 40px); letter-spacing:0; }
  .level-history{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 112px), 1fr)); }
  .timer-page{ padding:16px; }
}

@media (min-width: 721px) and (max-width: 1024px) {
  .timer-main{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    align-items:stretch;
  }
  .countdown-card{ grid-column:1 / -1; }
  .level-history{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
}

@media (min-width: 1025px) {
  .timer-main{ align-items:stretch; }
}

@media (min-width: 1600px) {
  .timer-page{ padding:28px 48px; }
  .level-history{ grid-template-columns:repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
}
html.fs-on, html.fs-on body{ width:100vw; height:100vh; height:100dvh; overflow:hidden; }
/* 伪全屏时 body 变滚动容器：内容超高（盲注表长）时内部滚动，
   避免 overflow:hidden 把底部内容永久裁掉 */
html.fs-on body{ position:fixed; inset:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* ===== 花色水印（仅全屏时显示） ===== */
.suit-watermark{
  position:fixed;
  font-family:'Apple Symbols','Segoe UI Symbol',serif;
  font-weight:700;
  line-height:1;
  color:var(--dz-gold-deep);
  pointer-events:none;
  user-select:none;
  z-index:0;
  opacity:0;
  transition:opacity 0.35s ease;
  text-shadow:0 0 40px rgba(214,168,79,0.45), 0 0 90px rgba(214,168,79,0.25);
}
.sw-tl{top:-60px; left:-50px; font-size:320px; transform:rotate(-15deg);}
.sw-tr{top:-40px; right:-60px; font-size:280px; transform:rotate(12deg); color:#c54a4a; -webkit-text-fill-color:#c54a4a;}
.sw-bl{bottom:-80px; left:-40px; font-size:240px; transform:rotate(-8deg); color:#3b6cb8; -webkit-text-fill-color:#3b6cb8;}
.sw-br{bottom:-70px; right:-50px; font-size:300px; transform:rotate(18deg);}
.is-fullscreen .suit-watermark{ opacity:0.30; }

/* ===== A+B 氛围动效（2026-08-25） ===== */
#fxCanvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
}
#bgBreath{
  position:fixed;
  top:0;left:0;right:0;
  height:72vh;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(ellipse 65% 45% at 50% -12%, rgba(255,220,130,0.30), transparent 62%);
  animation:bgBreath 6s ease-in-out infinite;
}
@keyframes bgBreath{
  0%,100%{ opacity:0.25; }
  50%{ opacity:0.95; }
}
/* 花色水印缓慢漂移（transform 动画，opacity 仍由类控制：平时 0.16 / 全屏 0.30） */
.suit-watermark{
  opacity:0.16;
  animation:wmFloat 12s ease-in-out infinite;
}
.is-fullscreen .suit-watermark{ opacity:0.30; }
.sw-tl{ --wm-rot:-15deg; animation-duration:14s; }
.sw-tr{ --wm-rot:12deg; animation-duration:11s; animation-delay:-4s; }
.sw-bl{ --wm-rot:-8deg; animation-duration:16s; animation-delay:-7s; }
.sw-br{ --wm-rot:18deg; animation-duration:13s; animation-delay:-2s; }
@keyframes wmFloat{
  0%,100%{ transform:translate(0,0) rotate(var(--wm-rot,0deg)); }
  50%{ transform:translate(22px,-30px) rotate(calc(var(--wm-rot,0deg) + 9deg)); }
}
/* 最后 30 秒：时间数字轻微呼吸（光晕已按领导要求移除） */
.countdown-wrap.urgent .countdown-time{
  animation:timePulse 1.1s ease-in-out infinite;
}
@keyframes timePulse{
  0%,100%{ transform:translate(-50%,-50%) scale(1); }
  50%{ transform:translate(-50%,-50%) scale(1.08); }
}
/* 秒数刷新：数字轻微上滑淡入 */
.countdown-time.tick{
  animation:timeTick 0.28s ease-out;
}
@keyframes timeTick{
  0%{ transform:translate(-50%,-50%) translateY(-6px); opacity:0.3; }
  100%{ transform:translate(-50%,-50%) translateY(0); opacity:1; }
}
/* 级别切换：卡片弹入 + 级别数字 pop */
.timer-main.level-pop{ animation:levelPop 0.45s ease-out; }
@keyframes levelPop{
  0%{ transform:scale(0.962); opacity:0.5; }
  100%{ transform:scale(1); opacity:1; }
}
.blind-level span.pop{
  animation:numPop 0.4s ease-out;
}
@keyframes numPop{
  0%{ transform:scale(1.7); color:#fff; }
  100%{ transform:scale(1); }
}
/* 级别切换金色粒子爆发 */
.fx-burst{ position:absolute; left:0; top:0; pointer-events:none; z-index:6; }
.fx-burst i{
  position:absolute;
  left:0; top:0;
  margin-left:-3px; margin-top:-3px;
  width:6px; height:6px;
  border-radius:50%;
  background:var(--dz-gold);
  box-shadow:0 0 8px rgba(214,168,79,0.85);
  animation:burstFly 0.7s ease-out forwards;
}
@keyframes burstFly{
  0%{ transform:translate(0,0) scale(1); opacity:1; }
  100%{ transform:translate(var(--bx),var(--by)) scale(0.15); opacity:0; }
}

/* ===== 全屏专属样式 ===== */
.is-fullscreen .topbar{ display:none !important; }
.is-fullscreen .timer-page{
  padding:clamp(8px, 1.6vh, 16px) clamp(14px, 2vw, 32px) clamp(10px, 1.5vh, 16px);
  height:100vh;
  height:100svh;
  height:100dvh;
  box-sizing:border-box;
  position:relative;
  z-index:1;
}
.is-fullscreen .tournament-header{ margin-bottom:0; }
.is-fullscreen .brand-frame{ padding:clamp(4px, 0.8vh, 8px) clamp(12px, 1.8vw, 20px); border-width:1px; }
.is-fullscreen .brand-name{ font-size:clamp(16px, 2.6vh, 26px); letter-spacing:clamp(2px, 0.4vw, 6px); }
.is-fullscreen .brand-sub{ font-size:clamp(9px, 1.3vh, 13px); }
.is-fullscreen .brand-suit{ font-size:clamp(16px, 2.8vh, 26px); }
.is-fullscreen #timerContent{ justify-content:center; }

.is-fullscreen .tournament-name{ font-size:clamp(20px, 3.4vh, 30px); letter-spacing:4px; }
.is-fullscreen .tournament-name::before,.is-fullscreen .tournament-name::after{ font-size:16px; }
.is-fullscreen .tournament-sub{ font-size:11px; }
.is-fullscreen .tournament-divider{ margin:clamp(2px, 0.4vh, 5px) auto; }
.is-fullscreen .timer-card{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
  overflow:visible;
}
.is-fullscreen .timer-card::before{ display:none; }
/* 全屏等待态：PENDING 状态框去背景/边框，与卡片风格统一 */
.is-fullscreen .pending-banner{
  background:transparent;
  border-color:transparent;
  box-shadow:none;
}
.is-fullscreen .pending-banner-icon{ font-size:clamp(28px, 4.6vh, 44px); }
.is-fullscreen .pending-banner-title{ font-size:clamp(18px, 3.2vh, 30px); }
.is-fullscreen .pending-banner-text{ font-size:clamp(12px, 1.8vh, 16px); }
.is-fullscreen .timer-page{ padding:clamp(14px, 2.4vh, 22px) clamp(18px, 2.6vw, 30px); }
.is-fullscreen .timer-main{ gap:clamp(8px, 1.2vw, 14px); margin-bottom:clamp(6px, 1vh, 10px); }
.is-fullscreen .timer-card{ padding:clamp(10px, 1.8vh, 16px) 14px; }
.is-fullscreen .countdown-wrap{ width:clamp(260px, 40vh, 460px); height:clamp(260px, 40vh, 460px); margin-bottom:clamp(6px, 1.2vh, 10px); }
.is-fullscreen .countdown-time{ font-size:clamp(56px, 10.5vh, 120px); }
.is-fullscreen .card-label{ font-size:clamp(13px, 2.2vh, 20px); margin-bottom:clamp(4px, 0.8vh, 8px); }
.is-fullscreen .card-value{ font-size:clamp(30px, 5vw, 64px); }
.is-fullscreen .card-value-small{ font-size:clamp(18px, 3vh, 30px); }
.is-fullscreen .next-card .card-value-small{ font-size:clamp(24px, 6.4vh, 64px); }
.is-fullscreen .next-card .gold{ font-size:clamp(28px, 6vh, 64px); }
.is-fullscreen .blind-level{ font-size:clamp(16px, 2.8vh, 26px); margin-bottom:clamp(4px, 0.8vh, 8px); }
.is-fullscreen .blind-level span{ font-size:clamp(26px, 4.6vh, 44px); }
.is-fullscreen .blind-item{ min-width:clamp(52px, 6vw, 72px); }
.is-fullscreen .blind-label{ font-size:clamp(13px, 2.2vh, 20px); margin-bottom:clamp(2px, 0.4vh, 4px); }
.is-fullscreen .blind-num{ font-size:clamp(30px, 6.4vh, 64px); }
.is-fullscreen .blind-divider{ font-size:clamp(22px, 3.8vh, 36px); padding-top:clamp(12px, 2.2vh, 20px); }
.is-fullscreen .level-history{ padding:clamp(8px, 1.2vh, 12px) clamp(10px, 1.2vw, 16px); grid-template-columns:repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.is-fullscreen .level-row{ padding:clamp(6px, 1.2vh, 10px) clamp(10px, 1.4vw, 16px); font-size:clamp(16px, 2.8vh, 26px); flex-direction:column; align-items:center; gap:clamp(2px, 0.4vh, 4px); font-weight:700; }
.is-fullscreen .level-idx{ font-size:clamp(16px, 2.8vh, 26px); }
.is-fullscreen .level-detail{ font-weight:700; color:var(--dz-text); }
.is-fullscreen .level-time{ font-size:clamp(13px, 2.2vh, 20px); font-weight:700; color:var(--dz-text); }
.is-fullscreen .final-icon{ font-size:clamp(22px, 3.6vh, 32px); }
.is-fullscreen .final-tip{ font-size:clamp(12px, 2vh, 18px); }
.is-fullscreen #timerContent .level-history{ flex:0 1 auto; }

@media (max-height: 820px) and (orientation: landscape) {
  .is-fullscreen .timer-page{
    padding:clamp(4px, 1vh, 10px) clamp(10px, 1.6vw, 20px) clamp(6px, 1vh, 10px);
  }
  .is-fullscreen .tournament-header{ margin-bottom:0; }
  .is-fullscreen .tournament-name{
    font-size:clamp(16px, 3.2vh, 24px);
    letter-spacing:clamp(2px, 0.4vw, 4px);
    margin-bottom:0;
  }
  .is-fullscreen .tournament-sub{ font-size:clamp(9px, 1.5vh, 12px); }
  .is-fullscreen .timer-main{
    grid-template-columns:minmax(0,1fr) minmax(0,1.5fr) minmax(0,1fr);
    gap:clamp(6px, 1vw, 10px);
    margin-bottom:clamp(4px, 1vh, 8px);
  }
  .is-fullscreen .countdown-card{ grid-column:auto; }
  .is-fullscreen .timer-card{ padding:clamp(6px, 1.4vh, 10px) clamp(8px, 1vw, 12px); }
  .is-fullscreen .countdown-card{ padding:clamp(6px, 1.4vh, 10px) clamp(8px, 1vw, 12px); }
  .is-fullscreen .countdown-wrap{
    width:clamp(180px, 30vh, 250px);
    height:clamp(180px, 30vh, 250px);
    margin-bottom:clamp(4px, 1vh, 8px);
  }
  .is-fullscreen .countdown-time{ font-size:clamp(34px, 7.6vh, 76px); }
  .is-fullscreen .card-label{ font-size:clamp(12px, 2.2vh, 18px); margin-bottom:clamp(2px, 0.5vh, 4px); }
  .is-fullscreen .card-value{ font-size:clamp(26px, 5vw, 48px); }
  .is-fullscreen .card-value-small{ font-size:clamp(16px, 3vh, 24px); }
  .is-fullscreen .next-card .card-value-small{ font-size:clamp(18px, 6.5vh, 58px); }
  .is-fullscreen .next-card .gold{ font-size:clamp(24px, 5.6vh, 50px); }
  .is-fullscreen .blind-level{ font-size:clamp(13px, 2.6vh, 21px); margin-bottom:clamp(2px, 0.5vh, 4px); }
  .is-fullscreen .blind-level span{ font-size:clamp(22px, 4.6vh, 42px); }
  .is-fullscreen .blind-item{ min-width:clamp(38px, 4.5vw, 52px); }
  .is-fullscreen .blind-label{ font-size:clamp(11px, 2.2vh, 18px); }
  .is-fullscreen .blind-num{ font-size:clamp(26px, 6.5vh, 58px); }
  .is-fullscreen .blind-divider{ font-size:clamp(18px, 3.6vh, 32px); padding-top:clamp(8px, 1.8vh, 14px); }
  .is-fullscreen .level-history{ padding:clamp(5px, 1vh, 8px) clamp(8px, 1vw, 12px); grid-template-columns:repeat(auto-fill, minmax(min(100%, 115px), 1fr)); }
  .is-fullscreen .level-row{ padding:clamp(4px, 0.9vh, 7px) clamp(8px, 1.2vw, 12px); font-size:clamp(14px, 3.2vh, 26px); flex-direction:column; align-items:center; gap:clamp(1px, 0.3vh, 3px); font-weight:700; }
  .is-fullscreen .level-idx{ font-size:clamp(14px, 3.2vh, 26px); }
  .is-fullscreen .level-detail{ font-weight:700; color:var(--dz-text); }
  .is-fullscreen .level-time{ font-size:clamp(11px, 2.6vh, 21px); font-weight:700; color:var(--dz-text); }
  .is-fullscreen .final-icon{ font-size:clamp(14px, 2.6vh, 22px); }
  .is-fullscreen .final-tip{ font-size:clamp(9px, 1.6vh, 13px); }
}

@media (max-width: 720px) and (orientation: portrait) {
  .is-fullscreen .timer-page{ padding:clamp(8px, 1.2vh, 12px) 12px clamp(6px, 1vh, 10px); }
  .is-fullscreen .tournament-header{ margin-bottom:clamp(1px, 0.4vh, 4px); }
  .is-fullscreen .tournament-name{ font-size:clamp(18px, 2.6vh, 22px); letter-spacing:2px; margin-bottom:0; }
  .is-fullscreen .tournament-sub{ font-size:clamp(9px, 1.2vh, 11px); }
  .is-fullscreen .tournament-divider{ margin:clamp(1px, 0.2vh, 2px) auto; }
  .is-fullscreen .brand-frame{ padding:clamp(2px, 0.6vh, 6px) clamp(10px, 1.6vw, 16px); }
  .is-fullscreen .brand-name{ font-size:clamp(14px, 2.2vh, 20px); letter-spacing:clamp(1px, 0.3vw, 3px); }
  .is-fullscreen .brand-sub{ font-size:clamp(8px, 1.1vh, 10px); }
  .is-fullscreen .brand-suit{ font-size:clamp(12px, 1.8vh, 18px); }
  .is-fullscreen .timer-main{ gap:6px; margin-bottom:clamp(3px, 0.7vh, 6px); }
  .is-fullscreen .timer-card{ padding:clamp(4px, 1vh, 8px) 10px; }
  .is-fullscreen .countdown-card{ padding:clamp(4px, 1vh, 8px) 10px; }
  .is-fullscreen .countdown-wrap{
    width:clamp(105px, 14vh, 170px);
    height:clamp(105px, 14vh, 170px);
    margin-bottom:clamp(3px, 0.6vh, 6px);
  }
  .is-fullscreen .countdown-time{ font-size:clamp(22px, 4.4vh, 48px); }
  .is-fullscreen .blind-level{ font-size:clamp(11px, 1.6vh, 14px); margin-bottom:clamp(1px, 0.3vh, 3px); }
  .is-fullscreen .blind-level span{ font-size:clamp(16px, 2.6vh, 24px); }
  .is-fullscreen .blind-num{ font-size:clamp(14px, 2.4vh, 20px); }
  .is-fullscreen .blind-divider{ font-size:clamp(12px, 1.8vh, 16px); padding-top:clamp(4px, 0.8vh, 8px); }
  .is-fullscreen .card-label{ font-size:clamp(9px, 1.2vh, 11px); margin-bottom:clamp(1px, 0.3vh, 3px); }
  .is-fullscreen .card-value{ font-size:clamp(14px, 2.4vh, 22px); }
  .is-fullscreen .next-card .card-value-small{ font-size:clamp(12px, 2vh, 17px); }
  .is-fullscreen .next-card .gold{ font-size:clamp(13px, 2.2vh, 19px); }
  .is-fullscreen .chips-panel{ gap:clamp(4px, 0.8vw, 8px) clamp(10px, 2.6vw, 16px); padding:clamp(4px, 0.8vh, 8px) 10px; margin-top:clamp(3px, 0.6vh, 6px); }
  .is-fullscreen .chip-item{ gap:clamp(1px, 0.3vh, 3px); min-width:44px; }
  .is-fullscreen .chip-coin{ width:clamp(20px, 3.6vh, 32px); height:clamp(20px, 3.6vh, 32px); border-width:2px; }
  .is-fullscreen .chip-value{ font-size:clamp(11px, 1.8vh, 15px); }
  .is-fullscreen .chip-label{ font-size:clamp(8px, 1.2vh, 11px); }
}
/* 断线重连提示条：SSE 断开时绝对定位在页面顶部居中显示 */
.reconnect-banner{
  position:absolute;
  top:12px; left:50%;
  transform:translateX(-50%);
  z-index:50;
  background:rgba(7,12,18,0.92);
  border:1px solid rgba(245,158,11,0.45);
  color:#f59e0b;
  font-size:13px;
  padding:6px 14px;
  border-radius:20px;
  display:none;
  white-space:nowrap;
  box-shadow:0 4px 18px rgba(0,0,0,0.5);
  pointer-events:none;
}
.reconnect-banner.visible{ display:block; }

/* ===== 操作员控制条（2026-08-25）===== */
.control-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  display:flex; align-items:center; gap:8px;
  padding:8px 12px calc(8px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg, rgba(5,9,14,0.97), rgba(5,9,14,0.88));
  border-top:1px solid rgba(214,168,79,0.35);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.control-bar .cb-hint{ font-size:12px; color:rgba(255,255,255,0.45); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.control-bar .cb-op{ font-size:12px; color:#d6a84f; white-space:nowrap; }
.control-bar .cb-spacer{ flex:1; }
.cb-btn{
  border:1px solid rgba(255,255,255,0.18);
  background:rgba(255,255,255,0.06);
  color:#e8e4da;
  font-size:14px; line-height:1;
  padding:10px 14px; border-radius:10px;
  white-space:nowrap; cursor:pointer;
  transition:transform .1s ease, background .15s ease;
  -webkit-tap-highlight-color:transparent;
}
.cb-btn:active{ transform:scale(0.94); }
.cb-btn.cb-gold{
  background:linear-gradient(180deg,#eec26a,#d6a84f 55%,#a97c2e);
  color:#1a1206; border-color:rgba(255,224,160,0.6);
  font-weight:700; box-shadow:0 2px 10px rgba(214,168,79,0.35);
}
.cb-btn.cb-primary{ border-color:rgba(255,255,255,0.38); background:rgba(255,255,255,0.14); }
.cb-btn.cb-danger{ border-color:rgba(248,113,113,0.5); color:#fca5a5; }
.cb-btn:disabled{ opacity:0.4; }
.is-fullscreen .control-bar{ display:none !important; }

/* 弹窗（登录 / 大屏） */
.modal-mask{
  position:fixed; inset:0; z-index:200;
  background:rgba(3,6,10,0.72); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
}
.modal{
  width:min(88vw, 360px);
  box-sizing:border-box;
  background:linear-gradient(180deg,#0d151d,#0a1118);
  border:1px solid rgba(214,168,79,0.4);
  border-radius:16px; padding:18px;
  box-shadow:0 12px 40px rgba(0,0,0,0.6);
}
.modal-title{ font-size:16px; font-weight:700; color:#f3ead6; text-align:center; }
.modal-sub{ font-size:12px; color:rgba(255,255,255,0.5); text-align:center; margin:8px 0 14px; line-height:1.5; }
.modal-input{
  width:100%; box-sizing:border-box;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.18);
  border-radius:10px; color:#f3ead6; font-size:14px;
  padding:10px 12px; margin-bottom:10px; outline:none;
}
.modal-input:focus{ border-color:rgba(214,168,79,0.7); }
.modal-err{ color:#f87171; font-size:12px; min-height:16px; margin-bottom:6px; text-align:center; }
.modal-btns{ display:flex; gap:8px; }
.modal-btns .cb-btn{ flex:1; }

/* ===== V33 休息级别：绿色主题 ===== */
.countdown-card.break-mode{
  border-color: rgba(46,204,113,0.55) !important;
  box-shadow: 0 0 70px rgba(46,204,113,0.16);
  background: linear-gradient(180deg, rgba(46,204,113,0.10), rgba(17,28,38,0.94));
}
.countdown-card.break-mode .blind-level{ color:#2ecc71; letter-spacing:2px; }
.countdown-card.break-mode .blind-values span,
.countdown-card.break-mode .countdown-time{ text-shadow:0 0 24px rgba(46,204,113,0.35); }
.countdown-card.break-mode .countdown-ring-progress{ stroke:#2ecc71 !important; }
.sound-btn-muted{ opacity:0.45; }

/* ===== V31 投屏面板（选设备一键投屏）===== */
.cast-list{ display:flex; flex-direction:column; gap:8px; max-height:46vh; overflow-y:auto; margin-bottom:10px; }
.cast-hint{ text-align:center; color:rgba(255,255,255,0.45); font-size:13px; padding:22px 0; line-height:1.7; }
.cast-hint span{ font-size:11px; color:rgba(255,255,255,0.3); }
.cast-item{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:10px; cursor:pointer;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); }
.cast-item:active{ border-color:rgba(214,168,79,0.6); background:rgba(214,168,79,0.08); }
.cast-item.offline{ opacity:0.45; cursor:default; }
.cast-dot{ width:8px; height:8px; border-radius:50%; background:var(--dz-green); box-shadow:0 0 8px rgba(74,222,128,0.7); flex:none; }
.cast-item.offline .cast-dot{ background:#666; box-shadow:none; }
.cast-info{ flex:1; min-width:0; }
.cast-name{ font-size:14px; color:#f3ead6; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cast-state{ font-size:11px; color:rgba(255,255,255,0.4); margin-top:2px; }
.cast-go{ font-size:12px; color:var(--dz-gold); border:1px solid rgba(214,168,79,0.5); border-radius:999px; padding:4px 12px; flex:none; }
.cast-item.offline .cast-go{ color:rgba(255,255,255,0.3); border-color:rgba(255,255,255,0.15); }
.cast-toast{ position:fixed; left:50%; top:76px; transform:translateX(-50%); z-index:300;
  background:rgba(13,21,29,0.95); border:1px solid rgba(214,168,79,0.55); color:#f3ead6;
  font-size:13px; padding:10px 18px; border-radius:999px; box-shadow:0 8px 30px rgba(0,0,0,0.55);
  animation:castToastIn .25s ease; }
@keyframes castToastIn{ from{ opacity:0; transform:translateX(-50%) translateY(-8px);} to{ opacity:1; transform:translateX(-50%) translateY(0);} }