/* ============================================================
   语料广场 · 党建数据大屏（对标大屏版式）
   ============================================================ */

:root {
  --gold:        #d9a441;
  --gold-soft:   #e8c268;
  --gold-light:  #f6dd9e;
  --gold-pale:   #fdf0c8;
  --panel-red:   linear-gradient(135deg, #e04636 0%, #c52a22 46%, #a81c17 100%);
  --panel-red-2: linear-gradient(135deg, #cf352b 0%, #b3211b 46%, #96170f 100%);
  --text:        #f4e7d2;
  --text-dim:    rgba(244, 231, 210, .6);
}

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

@font-face {
  font-family: "FZBiaoSong";
  src: url("fonts/FZBiaoSong.woff") format("woff"),
       url("fonts/FZBiaoSong.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

.screen-body {
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background-color: #1d0507;
  background-image: url("/img/bj.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
  position: relative;
  overflow-x: hidden;
}

a { text-decoration: none; color: inherit; }
.gold-text {
  background: linear-gradient(180deg, #fff6d8 0%, #f6dd9e 45%, #d9a441 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* ===== 顶部标题栏（红绸饰带） ===== */
.screen-header {
  position: relative;
  z-index: 5;
  padding: 14px 26px 0;
}
/* 顶部通栏长条（位于标题牌下层） */
.header-topbar {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(180deg, rgba(255, 160, 120, .55), rgba(190, 30, 24, .85) 55%, rgba(110, 12, 12, .7));
  border-top: 1px solid rgba(246, 221, 158, .55);
  border-bottom: 1px solid rgba(246, 221, 158, .35);
  box-shadow: 0 2px 14px rgba(200, 40, 26, .45);
  pointer-events: none;
}
.header-ribbon {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 88px;
}

.clock {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--gold-light);
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(246, 210, 130, .35);
}
.clock-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--red-bright, #d33);
  box-shadow: 0 0 10px #e23b35;
  animation: blink 1.4s infinite;
}
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* 中央盾牌标题牌 */
.ribbon-title {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88px;
  padding: 14px 130px 0;
  --tray-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-20 -20 1040 190' preserveAspectRatio='none'%3E%3Cpath d='M-10 -12 C30 6 44 26 40 46 C38 57 49 63 59 57 L76 148 L924 148 L941 57 C951 63 962 57 960 46 C956 26 970 6 1010 -12 C700 50 300 50 -10 -12 Z' fill='%23000'/%3E%3C/svg%3E");
  -webkit-mask: var(--tray-mask) center/100% 100% no-repeat;
  background: linear-gradient(180deg, #ffe9b0 0%, #d9a441 45%, #a9712a 100%);
  filter: drop-shadow(0 4px 14px rgba(150, 40, 20, .55));
}
.ribbon-title::after {
  content: "";
  position: absolute;
  inset: 2px 2px 0;
  -webkit-mask: var(--tray-mask) center/100% 100% no-repeat;
  background:
    radial-gradient(130% 150% at 50% -22%, rgba(255, 130, 90, .6), transparent 60%),
    linear-gradient(180deg, #d8352b 0%, #b01f18 55%, #84110e 100%);
}
.ribbon-title .title-text {
  position: relative;
  z-index: 2;
  white-space: nowrap;
  font-size: clamp(20px, 1.85vw, 30px);
  font-weight: 700;
  font-family: "FZBiaoSong", "Microsoft YaHei", serif;
  letter-spacing: 5px;
  background: linear-gradient(180deg, #fff8de 0%, #f6dd9e 52%, #e3b254 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 6px rgba(90, 12, 8, .7));
}

.header-sub {
  display: flex;
  align-items: center;
  padding: 2px 34px 0;
}
/* ===== 中部数据带 ===== */
.screen-main {
  position: relative;
  z-index: 2;
  max-width: 1760px;
  margin: 0 auto;
  padding: 0 40px;
  min-height: max(434px, calc(100vh - 428px));
  display: grid;
  grid-template-columns: minmax(400px, 1fr) 400px minmax(400px, 1fr);
  gap: 16px;
  align-items: center;
}
.stat-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-self: stretch;
  justify-content: center;
}

/* 亮红面板公共质感 */
.stat-big, .stat-small {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 160% at 50% -20%, rgba(255, 130, 95, .55), transparent 58%),
    radial-gradient(rgba(255, 222, 165, .13) 1px, transparent 1.5px),
    var(--panel-red);
  background-size: auto, 9px 9px, auto;
  transition: filter .2s;
}
.stat-big:hover, .stat-small:hover { filter: drop-shadow(0 0 22px rgba(255, 90, 60, .5)); }

/* 大面板（飞翼：外侧外凸弧，内侧与圆盘同心相切） */
.stat-big {
  height: 150px;
  flex-shrink: 0;
  background: transparent;
  overflow: hidden;
}
.big-left { width: 480px; align-self: flex-end; padding-right: 56px; -webkit-mask-image: radial-gradient(circle at 288px 50%, #000 300px, transparent 300px); }
.big-right { width: 480px; align-self: flex-start; padding-left: 56px; -webkit-mask-image: radial-gradient(circle at calc(100% - 288px) 50%, #000 300px, transparent 300px); }
/* 飞翼金色描边层 */
.big-left::before, .big-right::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 236, 180, .95), rgba(217, 164, 65, .55) 50%, rgba(255, 222, 150, .9));
  pointer-events: none;
}
/* 飞翼红色面层（内缩 1px 露出金边） */
.big-left::after, .big-right::after {
  content: "";
  position: absolute;
  inset: 1px;
  background:
    linear-gradient(105deg, transparent 30%, rgba(255, 232, 190, .16) 47%, transparent 62%),
    radial-gradient(120% 160% at 50% -20%, rgba(255, 130, 95, .55), transparent 58%),
    radial-gradient(rgba(255, 222, 165, .13) 1px, transparent 1.5px),
    var(--panel-red);
  background-size: auto, auto, 9px 9px, auto;
  pointer-events: none;
}
.big-left::before, .big-left::after {
  -webkit-mask-image:
    linear-gradient(#000, #000),
    radial-gradient(circle at calc(100% + 200px) 50%, transparent 0 216px, #000 216px);
  -webkit-mask-composite: source-in;
}
.big-right::before, .big-right::after {
  -webkit-mask-image:
    linear-gradient(#000, #000),
    radial-gradient(circle at -200px 50%, transparent 0 216px, #000 216px);
  -webkit-mask-composite: source-in;
}

.wing-title {
  position: relative;
  z-index: 2;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 4px;
  text-indent: 4px;
  margin-bottom: 14px;
  color: #ffe9bd;
  text-shadow: 0 2px 4px rgba(80, 6, 4, .6);
  white-space: nowrap;
}
.wing-links {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 14px;
}
.wing-links a {
  padding: 7px 24px;
  border: 1px solid rgba(246, 210, 130, .75);
  border-radius: 2px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 3px;
  text-indent: 3px;
  color: #f6d282;
  white-space: nowrap;
  background: linear-gradient(180deg, rgba(130, 20, 14, .3), rgba(80, 8, 8, .4));
  transition: background .2s, color .2s, border-color .2s;
}
.wing-links a:hover {
  background: linear-gradient(180deg, #f6d282, #d9a441);
  border-color: #ffe9bd;
  color: #7a1210;
}

.big-num {
  position: relative;
  z-index: 2;
  font-size: 58px;
  font-weight: 800;
  line-height: 1.05;
  font-family: "DIN Alternate", "Arial", sans-serif;
  filter: drop-shadow(0 2px 2px rgba(90, 8, 5, .6));
}
.big-label {
  position: relative;
  z-index: 2;
  margin-top: 6px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: 8px;
  text-indent: 8px;
  color: #ffe7b6;
  text-shadow: 0 1px 0 #8a1710, 0 2px 4px rgba(70, 5, 3, .7), 0 0 16px rgba(255, 210, 140, .45);
}

/* 小面板 */
.stat-small-row {
  flex: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  height: 124px;
}
.stat-small {
  background:
    radial-gradient(130% 150% at 50% -20%, rgba(255, 120, 90, .4), transparent 60%),
    radial-gradient(rgba(255, 222, 165, .1) 1px, transparent 1.5px),
    var(--panel-red-2);
  background-size: auto, 9px 9px, auto;
  box-shadow: inset 0 0 0 1px rgba(255, 216, 138, .55), inset 0 0 26px rgba(110, 10, 6, .4);
  overflow: hidden;
}
.stat-small::after {
  content: "";
  position: absolute;
  top: -40%;
  left: 15%;
  width: 70%;
  height: 180%;
  background: linear-gradient(105deg, transparent, rgba(255, 232, 190, .13), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.slant-l { clip-path: polygon(0 0, 100% 0, 100% 100%, 22px 100%); }
.slant-r { clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%); }
.small-num {
  font-size: 34px;
  font-weight: 800;
  font-family: "DIN Alternate", "Arial", sans-serif;
  line-height: 1.1;
  filter: drop-shadow(0 2px 2px rgba(90, 8, 5, .6));
}
.small-label {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #ffe7b6;
  text-shadow: 0 1px 0 #8a1710, 0 2px 4px rgba(70, 5, 3, .65);
}

/* 系统入口卡 */
.entry { gap: 9px; }
.entry-ico {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8a140f;
  background: linear-gradient(160deg, #fff6d8, #f0c96e 55%, #d9a441);
  box-shadow: 0 6px 16px rgba(50, 4, 2, .45), inset 0 1px 2px rgba(255, 255, 255, .8),
              0 0 16px rgba(255, 210, 130, .35);
  transition: transform .2s;
}
.entry-ico svg { width: 23px; height: 23px; }
.entry-name {
  position: relative;
  z-index: 2;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 3px;
  text-indent: 3px;
  color: #ffe7b6;
  text-shadow: 0 1px 0 #8a1710, 0 2px 4px rgba(70, 5, 3, .7), 0 0 14px rgba(255, 210, 140, .4);
}
/* 入口图标无悬停位移 */

/* ===== 中央圆盘 ===== */
.center-stage {
  position: relative;
  height: 432px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ring { position: absolute; border-radius: 50%; }

/* 最外圈放射刻度 */
.ring-ticks {
  width: 432px; height: 432px;
  background: repeating-conic-gradient(from 0deg,
      rgba(255, 90, 70, .4) 0deg .7deg,
      transparent .7deg 4.2deg);
  -webkit-mask: radial-gradient(circle, transparent 0 201px, #000 202px, #000 215px, transparent 216px);
  mask: radial-gradient(circle, transparent 0 201px, #000 202px, #000 215px, transparent 216px);
  animation: spin 80s linear infinite;
}
/* 红色弧段 */
.ring-arcs {
  width: 406px; height: 406px;
  background: conic-gradient(from 205deg,
      transparent 0 8deg, rgba(255, 86, 70, .92) 8deg 62deg,
      transparent 62deg 98deg, rgba(255, 86, 70, .55) 98deg 152deg,
      transparent 152deg 192deg, rgba(255, 86, 70, .75) 192deg 252deg,
      transparent 252deg 292deg, rgba(255, 86, 70, .5) 292deg 348deg,
      transparent 348deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 188px, #000 189px, #000 203px, transparent 204px);
  mask: radial-gradient(circle, transparent 0 188px, #000 189px, #000 203px, transparent 204px);
  filter: blur(.5px) drop-shadow(0 0 6px rgba(255, 80, 60, .55));
  animation: spin 26s linear infinite;
}
.ring-arcs2 {
  width: 374px; height: 374px;
  background: conic-gradient(from 30deg,
      transparent 0 20deg, rgba(210, 50, 45, .8) 20deg 95deg,
      transparent 95deg 140deg, rgba(210, 50, 45, .6) 140deg 200deg,
      transparent 200deg 240deg, rgba(210, 50, 45, .75) 240deg 320deg,
      transparent 320deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 174px, #000 175px, #000 184px, transparent 185px);
  mask: radial-gradient(circle, transparent 0 174px, #000 175px, #000 184px, transparent 185px);
  animation: spin-rev 38s linear infinite;
}
/* 金色圆点环 */
.ring-dots {
  width: 388px; height: 388px;
  background: repeating-conic-gradient(rgba(246, 210, 130, .85) 0 1.4deg, transparent 1.4deg 12deg);
  -webkit-mask: radial-gradient(circle, transparent 0 188px, #000 189px, #000 193px, transparent 194px);
  mask: radial-gradient(circle, transparent 0 188px, #000 189px, #000 193px, transparent 194px);
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes spin-rev { to { transform: rotate(-360deg); } }

/* 主圆盘 */
.logo-disc {
  position: relative;
  width: 320px; height: 320px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 34% 26%, rgba(255, 236, 185, .55), transparent 38%),
    radial-gradient(circle at 50% 50%, #d83a30 0%, #b5231c 48%, #7e1210 78%, #5c0a0c 100%);
  border: 2px solid rgba(253, 240, 200, .92);
  box-shadow:
    0 0 50px rgba(255, 90, 50, .5),
    0 0 110px rgba(255, 60, 40, .28),
    inset 0 0 46px rgba(255, 170, 90, .3),
    inset 0 3px 8px rgba(255, 240, 200, .55);
  transition: transform .25s;
}
.logo-disc::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 50%;
  border: 1px solid rgba(253, 240, 200, .4);
}
.logo-disc::after {
  content: "";
  position: absolute;
  inset: 22px;
  border-radius: 50%;
  background: radial-gradient(rgba(255, 226, 165, .12) 1px, transparent 1.5px);
  background-size: 10px 10px;
  opacity: .5;
}
.logo-disc:hover { filter: brightness(1.06); }
.disc-logo {
  position: relative;
  z-index: 2;
  width: 236px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 50%;
  filter: drop-shadow(0 8px 22px rgba(40, 0, 0, .5)) drop-shadow(0 0 26px rgba(255, 210, 130, .35));
}
/* ===== 共建高校 ===== */
.schools-section {
  position: relative;
  z-index: 2;
  max-width: 1760px;
  margin: 18px auto 0;
  padding: 0 40px 56px;
}
.schools-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
}
.schools-head h2 {
  font-size: 20px;
  letter-spacing: 8px;
  font-weight: 800;
  color: var(--gold-pale);
  text-shadow: 0 0 14px rgba(246, 210, 130, .4);
  padding: 9px 40px;
  border-radius: 10px;
  border: 1px solid rgba(243, 212, 136, .5);
  background: linear-gradient(135deg, rgba(125, 13, 18, .92) 0%, rgba(163, 21, 26, .82) 100%);
}
.head-line { width: clamp(60px, 12vw, 220px); height: 1px; background: linear-gradient(90deg, transparent, rgba(246, 221, 158, .65)); }
.head-line:last-child { background: linear-gradient(90deg, rgba(246, 221, 158, .65), transparent); }
.head-diamond {
  width: 8px; height: 8px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 10px rgba(246, 210, 130, .8);
}

.school-carousel {
  position: relative;
  max-width: 1492px;
  margin: 0 auto;
  padding: 4px 52px;
}
.school-viewport { overflow: hidden; }
.school-track {
  display: flex;
  gap: 14px;
  will-change: transform;
}
.school-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--gold-light);
  border: 1px solid rgba(240, 200, 110, .45);
  background: linear-gradient(160deg, rgba(150, 30, 24, .85), rgba(70, 8, 10, .85));
  box-shadow: 0 4px 14px rgba(20, 0, 0, .5), inset 0 1px 2px rgba(255, 235, 180, .25);
  transition: color .2s, border-color .2s, box-shadow .2s;
}
.school-arrow.left { left: 2px; }
.school-arrow.right { right: 2px; }
.school-arrow svg { width: 20px; height: 20px; }
.school-arrow:hover {
  color: var(--gold-pale);
  border-color: var(--gold-light);
  box-shadow: 0 4px 18px rgba(20, 0, 0, .55), 0 0 16px rgba(240, 190, 100, .35);
}

.school-card {
  position: relative;
  flex: 0 0 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 16px 14px 14px;
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(90, 14, 17, .4), rgba(32, 4, 7, .55));
  border: 1px solid rgba(240, 200, 110, .25);
  transition: border-color .2s, box-shadow .2s;
  overflow: hidden;
}
.school-card::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 235, 180, .08), transparent);
  transform: skewX(-18deg);
  transition: left .55s;
}
.school-card:hover {
  border-color: rgba(246, 221, 158, .75);
  box-shadow: 0 12px 30px rgba(8, 0, 1, .5), 0 0 22px rgba(240, 190, 100, .2);
}
.school-card:hover::after { left: 130%; }
.school-logo {
  width: 66px;
  height: 66px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 250, 240, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, .35);
}
.school-logo img { display: block; max-width: 86%; max-height: 86%; object-fit: contain; }
.school-logo.no-img img { display: none; }
.school-logo.no-img { background: rgba(240, 200, 110, .08); box-shadow: inset 0 0 0 1px rgba(240, 200, 110, .3); }
.school-char {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff6d8, #d9a441);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  padding: 0 6px;
}
.school-name {
  font-size: 15px;
  font-weight: 700;
  color: rgba(252, 239, 214, .92);
  letter-spacing: 1px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.school-contrib {
  font-size: 12px;
  letter-spacing: 1px;
  color: rgba(244, 231, 210, .58);
}
.school-contrib b {
  margin-left: 4px;
  font-size: 15px;
  font-weight: 800;
  font-family: "DIN Alternate", Arial, sans-serif;
}

/* ===== 响应式 ===== */
@media (max-width: 1400px) {
  .screen-main { grid-template-columns: 1fr; max-width: 720px; min-height: 0; row-gap: 26px; }
  .stat-col { align-self: auto; }
  .big-left, .big-right { align-self: center; }
  .center-stage { order: -1; height: 432px; transform: scale(.82); }
  .ribbon-title { -webkit-mask: none; padding: 10px 30px; height: auto; }
  .ribbon-title::after { -webkit-mask: none; }
  .school-card { flex-basis: 200px; }
}
@media (max-width: 640px) {
  .screen-header { padding: 10px 12px 0; }
  .ribbon-title { width: 100%; padding: 10px 20px; }
  .ribbon-title .title-text { font-size: 17px; letter-spacing: 1px; }
  .stat-big { height: 150px; }
  .big-num { font-size: 44px; }
  .big-label { font-size: 21px; letter-spacing: 5px; }
  .school-carousel { padding: 4px 40px; }
  .school-card { flex-basis: 150px; }
  .school-arrow { width: 32px; height: 32px; }
}