/* 统一的比赛展示微调：不改变各实验核心布局，只增强一致性与移动端可读性 */
:root{
  --lab-bg:#0f1923;
  --lab-surface:#162231;
  --lab-card:#1a2a3a;
  --lab-line:#2a3a4a;
  --lab-text:#e0e0e0;
  --lab-muted:#8899aa;
  --lab-accent:#0D9488;
  --lab-good:#27ae60;
  --lab-warn:#f39c12;
  --lab-danger:#e74c3c;
  --lab-panel-width:clamp(440px,25vw,560px);
  --lab-panel-padding:clamp(18px,1.35vw,26px);
  --lab-card-padding:clamp(14px,1vw,18px);
}

.header a{
  color:var(--lab-accent);
  text-decoration:none;
  font-weight:700;
  padding:8px 12px;
  border:1px solid rgba(13,148,136,.35);
  border-radius:999px;
  background:rgba(13,148,136,.08);
}
.header a:hover{background:rgba(13,148,136,.16);color:#fff}

.card{
  box-shadow:0 8px 24px rgba(0,0,0,.16);
}
.card h3{
  letter-spacing:.02em;
}
.info{
  color:#c7d1dc;
  line-height:1.75;
}
.btn,.scene-btn,.k-btn,.dbtn,.toggle-btn{
  touch-action:manipulation;
}
.btn:hover:not(:disabled),.scene-btn:hover,.k-btn:hover,.dbtn:hover,.toggle-btn:hover{
  transform:translateY(-1px);
}
input,select,button{
  font-family:'Microsoft YaHei',sans-serif;
}

@media(min-width:1121px){
  .main{
    display:flex;
    align-items:stretch;
  }
  .main>.chart-area,
  .main>.viz-area,
  .main>.cam-area{
    flex:1 1 auto!important;
    min-width:0;
    max-width:none;
    box-sizing:border-box;
  }
  .main>.panel{
    flex:0 0 var(--lab-panel-width)!important;
    width:var(--lab-panel-width)!important;
    min-width:var(--lab-panel-width)!important;
    max-width:var(--lab-panel-width)!important;
    box-sizing:border-box;
    padding:var(--lab-panel-padding)!important;
    gap:14px!important;
    font-size:15px;
    line-height:1.72;
  }
  .main>.panel .card{
    padding:var(--lab-card-padding)!important;
    border-radius:12px;
  }
  .main>.panel .card h3{
    font-size:16px!important;
    line-height:1.45;
    margin-bottom:10px;
  }
  .main>.panel .info,
  .main>.panel p,
  .main>.panel .stat,
  .main>.panel .stat-row,
  .main>.panel .info-row,
  .main>.panel .sel-row,
  .main>.panel .result-box .sub,
  .main>.panel .slider-group label,
  .main>.panel .param-row>div{
    font-size:15px;
    line-height:1.7;
  }
  .main>.panel .btn,
  .main>.panel .file-upload,
  .main>.panel .scene-btn,
  .main>.panel .k-btn,
  .main>.panel .dbtn,
  .main>.panel .toggle-btn{
    font-size:15px!important;
    min-height:38px;
    padding:10px 14px!important;
  }
  .main>.panel .btn-go,
  .main>.panel .btn-accent,
  .main>.panel .btn-reveal{
    font-size:16px!important;
    min-height:42px;
  }
  .main>.panel [style*="font-size:10px"],
  .main>.panel [style*="font-size:11px"],
  .main>.panel [style*="font-size:12px"]{
    font-size:13px!important;
    line-height:1.65!important;
  }
  .main>.panel .neighbor-item,
  .main>.panel .sort-item{
    font-size:14px!important;
    padding:8px 10px;
  }
  .main>.panel .neighbor-item .coords{
    font-size:12px!important;
  }
  .main>.panel .neighbor-item .dist,
  .main>.panel .legend,
  .main>.panel .vote-result .detail,
  .main>.panel .api-status{
    font-size:13px!important;
  }
  .main>.panel input,
  .main>.panel select{
    font-size:15px!important;
  }
  .main>.viz-area .board{
    grid-template-columns:repeat(3,clamp(120px,8.5vw,160px))!important;
    grid-template-rows:repeat(3,clamp(120px,8.5vw,160px))!important;
  }
  .main>.viz-area .cell{
    width:clamp(120px,8.5vw,160px)!important;
    height:clamp(120px,8.5vw,160px)!important;
    font-size:clamp(52px,3.8vw,70px)!important;
  }
  .main>.viz-area .status{
    font-size:clamp(19px,1.2vw,24px);
  }
}

@media(max-width:1120px){
  body{height:auto;min-height:100vh;overflow:auto}
  .header{position:sticky;top:0;z-index:50}
  .main{height:auto;min-height:calc(100vh - 72px);overflow:visible;flex-direction:column}
  .viz-area,.cam-area,.chart-area{min-height:56vh;padding:16px}
  .panel{width:auto!important;max-width:none!important;min-width:0!important;border-left:none!important;border-top:1px solid var(--lab-line)}
  .chart-box,.chart-wrapper,.tree-diagram,.chart-main{min-height:52vh}
  .chart-box>div,.chart-wrapper>div,.chart-main>div,.tree-diagram>div{min-height:52vh}
}

@media(max-width:900px){
  .board{grid-template-columns:repeat(3,28vw)!important;grid-template-rows:repeat(3,28vw)!important}
  .cell{width:28vw!important;height:28vw!important;font-size:13vw!important}
}