/* ===== 大屏展示页样式 =====
   目标：1920×1080 / 3840×2160 全屏不溢出、不出现滚动条；教室后排 8-10 米可读。
   全部用 vw / clamp 自适应，禁止固定 px 布局。兼容 Chrome 80+（不使用 :has()、flex gap 等新特性）。 */

:root {
  /* 科目配色：改这里就能换颜色 */
  --c-yuwen:   #e8760f;  /* 语文 暖橙 */
  --c-shuxue:  #1769cf;  /* 数学 蓝 */
  --c-yingyu:  #1a9552;  /* 英语 绿 */
  --c-kexue:   #7b41c9;  /* 科学 紫 */
  --c-extra1:  #c9186b;  /* 备用 玫红 */
  --c-extra2:  #0f8f9e;  /* 备用 青 */
  --c-extra3:  #8a6a12;  /* 备用 土黄 */
  --c-extra4:  #4b5563;  /* 备用 灰蓝 */

  --bg:        #eef2f7;
  --card-bg:   #ffffff;
  --text:      #16202e;
  --text-soft: #7d8a9c;
  --notice-bg: #c1121f;  /* 订正通知 朱红 */

  --gap: 1.1vw;
  --radius: 1.2vw;
}

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

/* 下面几个块用了 display:flex，会盖掉 hidden 属性，这里强制补回来 */
[hidden] { display: none !important; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;                 /* 永不出现滚动条 */
  background: var(--bg);
  color: var(--text);
  font-family: "HarmonyOS Sans", "Microsoft YaHei", "PingFang SC", "Source Han Sans SC", sans-serif;
  /* 学生上台碰屏幕也弄不乱页面 */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.screen {
  display: grid;
  grid-template-rows: auto 1fr auto auto;  /* 顶栏 / 作业区 / 明天要带 / 通知条 */
  height: 100%;
  padding: 1.2vw 1.4vw;
}

/* ---------- 顶部日期栏 ---------- */
.topbar {
  display: flex;
  align-items: baseline;          /* 日期和时钟按文字基线对齐 */
  justify-content: space-between;
  padding-bottom: 0.5vw;
  border-bottom: 0.3vw solid #d7dfea;
}
.date-line { display: flex; align-items: baseline; }
.date-big {
  font-size: clamp(48px, 5vw, 110px);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.1;
}
.weekday {
  font-size: clamp(36px, 3.4vw, 76px);
  font-weight: 700;
  color: var(--c-shuxue);
  margin-left: 1.6vw;
}
.top-right { text-align: right; position: relative; }
.clock {
  font-size: clamp(46px, 4.6vw, 100px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.offline-dot {
  position: absolute;
  right: 0;
  top: 100%;
  font-size: clamp(12px, 0.85vw, 20px);
  color: #9aa6b5;
  margin-top: 0.2vw;
  white-space: nowrap;
  visibility: hidden;               /* 联网正常时不显示 */
}
.offline-dot::before {
  content: "●";
  margin-right: 0.3em;
}
.offline-dot.show { visibility: visible; }

/* ---------- 作业区 ---------- */
.homework-area {
  position: relative;
  min-height: 0;                    /* 关键：让网格能在 grid 里正确收缩 */
  padding: 0.6vw 0;
}
.cards {
  display: grid;
  grid-gap: var(--gap);
  gap: var(--gap);
  height: 100%;
  grid-auto-rows: 1fr;
}
.card {
  background: var(--card-bg);
  border-radius: var(--radius);
  border-top: 0.7vw solid var(--subject-color, #888);
  box-shadow: 0 0.25vw 0.9vw rgba(20, 35, 60, 0.09);
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
  overflow: hidden;
}
.card-head {
  color: #fff;
  background: var(--subject-color, #888);
  font-size: clamp(32px, 2.6vw, 56px);
  font-weight: 800;
  line-height: 1.2;
  padding: 0.2vw 1vw 0.35vw;
  letter-spacing: 0.05em;
}
.card-body {
  padding: 0.55vw 1.1vw 0.6vw;
  min-height: 0;
  overflow: hidden;
  /* 内容过多时由 JS 微调 --fit 缩放，保证不溢出 */
  font-size: calc(clamp(26px, 1.9vw, 42px) * var(--fit, 1));
}
.hw-item {
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
  font-weight: 600;
  margin-bottom: 0.3em;
}
/* 最后一条不留下边距，否则会被误判成“内容溢出”而把字缩小 */
.hw-item:last-child { margin-bottom: 0; }
.hw-no {
  flex: none;
  min-width: 1.5em;
  height: 1.5em;
  line-height: 1.5em;
  text-align: center;
  border-radius: 0.35em;
  background: var(--subject-tint, #eee);
  color: var(--subject-color, #444);
  font-weight: 800;
  margin-right: 0.5em;
  font-size: 0.86em;
  margin-top: 0.15em;
}
.hw-text { flex: 1 1 auto; word-break: break-word; }
.hw-more {
  color: #9aa6b5;
  font-weight: 700;
  font-size: 0.8em;
  line-height: 1.4;
  padding-top: 0.1em;
}
.hw-none {
  color: #a9b4c2;
  font-weight: 600;
  line-height: 1.5;
}

/* 全天没布置 */
.empty-all {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(44px, 4.4vw, 96px);
  font-weight: 800;
  color: #aab5c3;
  letter-spacing: 0.06em;
}

/* ---------- 明天要带 ---------- */
.bring-bar {
  display: flex;
  align-items: center;
  background: #fff6e2;
  border: 0.25vw solid #f2d59a;
  border-radius: var(--radius);
  padding: 0.45vw 1.2vw;
  margin-top: 0.3vw;
  overflow: hidden;
}
.bring-title {
  flex: none;
  font-size: clamp(28px, 2.2vw, 48px);
  font-weight: 800;
  color: #a9660a;
  margin-right: 1.4vw;
  white-space: nowrap;
}
.bring-icon { margin-right: 0.3em; }
.bring-list {
  flex: 1 1 auto;
  font-size: clamp(26px, 2vw, 44px);
  font-weight: 700;
  line-height: 1.4;
  overflow: hidden;
}
.bring-item { display: inline-block; margin-right: 1.6vw; white-space: nowrap; }
.bring-item::before { content: "・"; color: #d9a441; }

/* ---------- 订正通知条（最醒目） ---------- */
.notice-bar {
  display: flex;
  flex-direction: column;
  background: var(--notice-bg);
  color: #fff;
  border-radius: var(--radius);
  /* 右边留出 16vw 给悬浮的回执按钮，避免压住进度数字 */
  padding: 0.55vw 16vw 0.55vw 1.4vw;
  margin-top: 0.5vw;
  min-height: 0;
  overflow: hidden;
  box-shadow: 0 0.3vw 1.2vw rgba(150, 10, 25, 0.35);
}
.notice-row {
  display: flex;
  align-items: center;
  width: 100%;
}
.notice-row + .notice-row {
  margin-top: 0.5vh;
  padding-top: 0.5vh;
  border-top: 0.12vw solid rgba(255, 255, 255, 0.25);
}
.notice-icon {
  flex: none;
  font-size: clamp(34px, 3vw, 66px);
  margin-right: 1.2vw;
  animation: bell 1.6s ease-in-out infinite;
}
@keyframes bell {
  0%, 60%, 100% { transform: rotate(0deg); }
  70% { transform: rotate(14deg); }
  80% { transform: rotate(-12deg); }
  90% { transform: rotate(8deg); }
}
.notice-body {
  flex: 1 1 auto;
  min-width: 0;
}
.notice-text {
  font-size: clamp(36px, 3vw, 68px);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.02em;
  opacity: 1;
  transition: opacity 0.5s ease;     /* 多条通知淡入淡出切换 */
  overflow: hidden;
}
.notice-text.fading { opacity: 0; }

/* 句子里可以点的学生姓名：学生直接点自己的名字，原地划掉 */
.name-inline {
  display: inline;
  padding: 0 0.12em;
  margin: 0 0.02em;
  border: none;
  border-bottom: 0.07em dashed rgba(255, 255, 255, 0.75);
  background: rgba(255, 255, 255, 0.16);
  border-radius: 0.18em;
  color: #fff;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  cursor: pointer;
}
.name-inline.asking {
  background: #fff;
  color: var(--notice-bg);
  border-bottom-color: transparent;
}
/* 已订正：原地变灰划掉 */
.name-inline.finished {
  background: transparent;
  border-bottom-color: transparent;
  color: rgba(255, 255, 255, 0.42);
  text-decoration: line-through;
  text-decoration-thickness: 0.09em;
}

/* 老师手改过文案、句子里找不到名字时，退回这排小标签 */
.notice-names {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0.5vh;
}
.name-chip {
  display: inline-block;
  margin: 0.35vh 0.6vw 0 0;
  padding: 0.15vh 0.85vw;
  border-radius: 999px;
  border: 0.16vw solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-family: inherit;
  font-size: clamp(18px, 1.35vw, 30px);
  font-weight: 800;
  line-height: 1.5;
  cursor: pointer;
}
.name-chip:active { transform: scale(0.96); }
/* 已订正：变灰 + 划掉 */
.name-chip.finished {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.42);
  text-decoration: line-through;
  text-decoration-thickness: 0.12em;
}
.name-chip.asking {
  background: #fff;
  color: var(--notice-bg);
  border-color: #fff;
}
.notice-progress {
  flex: none;
  margin-left: 0.8vw;
  font-size: clamp(18px, 1.25vw, 28px);
  font-weight: 800;
  color: rgba(255, 255, 255, 0.8);
  align-self: center;
  white-space: nowrap;
}
/* 有人点了名字、正在等第二下确认时，这里临时变成提示 */
.notice-progress.asking-hint {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.2em 0.7em;
}

/* 同时有多条通知时，正文小一号，把高度还给作业区 */
.notice-bar.multi .notice-text { font-size: clamp(28px, 2.2vw, 48px); }
.notice-bar.multi .notice-icon { font-size: clamp(26px, 2.2vw, 48px); }

/* 单条过长时横向跑马灯 */
.notice-text.marquee { white-space: nowrap; }
.notice-text.marquee > span {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 16s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* 多条时右侧的小圆点指示 */
.notice-dots { align-self: flex-end; margin-top: 0.4vh; font-size: clamp(14px, 1vw, 22px); letter-spacing: 0.25em; }
.notice-dots i { font-style: normal; opacity: 0.4; }
.notice-dots i.on { opacity: 1; }

/* 新通知出现时闪烁 3 次（不发出任何声音） */
.notice-bar.flash { animation: flash 0.55s ease-in-out 3; }
@keyframes flash {
  0%, 100% { background: var(--notice-bg); }
  50%      { background: #ff5a5f; }
}

/* 屏幕很矮时（例如 4:3 一体机）收紧一点间距 */
@media (max-aspect-ratio: 4/3) {
  :root { --gap: 1.6vh; }
  .notice-bar { padding: 1vh 16vw 1vh 1.4vw; }
}

/* ---------- 课代表回执按钮（大屏上唯一能点的东西） ---------- */
/* 课代表回执：右下角悬浮的胶囊按钮。
   不占版面；一体机挂得高、学生个子矮，所以固定在屏幕最底下。 */
.ack-btn, .ack-done {
  position: fixed;
  right: 2vw;
  bottom: 4.5vh;        /* 抬离屏幕最底边，别贴着边框 */
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  height: 7.6vh;
  min-height: 62px;
  padding: 0 2vw;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  white-space: nowrap;
  box-shadow: 0 0.35vw 1.2vw rgba(20, 35, 60, 0.2);
}
.ack-btn {
  border: 0.2vw solid #ccd6e2;
  background: #fff;
  color: #46536a;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease;
}
.ack-btn:active { transform: scale(0.96); background: #eef3f9; }
.ack-icon {
  font-size: clamp(22px, 1.75vw, 36px);
  line-height: 1;
  margin-right: 0.5em;
}
.ack-label { font-size: clamp(17px, 1.3vw, 28px); line-height: 1; }

/* 正在问"确定吗" */
.ack-btn.asking {
  background: #1769cf;
  border-color: #1769cf;
  color: #fff;
  animation: none;
}

/* 还没布置作业时，这个按钮变成醒目的"提醒老师" */
.ack-btn.urgent {
  color: #fff;
  background: #e8760f;
  border-color: #e8760f;
  animation: ackPulse 2.4s ease-in-out infinite;
}
@media (max-width: 900px) {
  .ack-btn, .ack-done { padding: 0 4vw; }
}
@keyframes ackPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 118, 15, 0.45); }
  50%      { box-shadow: 0 0 0 0.9vw rgba(232, 118, 15, 0); }
}

.ack-done {
  border: 0.2vw solid #1a9552;
  background: #1a9552;
  color: #fff;
}

/* ---------- 给右下角悬浮按钮让位，保证不压住任何字 ----------
   底部长什么样由 JS 打在 <body> 上的类决定：
   has-notice  底部是通知条（它自己右边已经留了位）
   has-bring   底部是"明天要带"
   cards-only  底部就是作业卡片本身（比如科学那一格） */
.has-bring .bring-bar { padding-right: 16vw; }

/* 最后一格（通常是科学，也就是按钮所在的那一格）底部留出按钮的高度。
   万一这一科作业多到放不下，卡片会自动缩字号或显示"…还有 N 条"，仍然不会被遮住。 */
.cards-only .card:last-child .card-body,
.has-bring .card:last-child .card-body {
  padding-bottom: var(--corner-reserve, 21vh);
}

/* ---------- 抄作业倒计时 ----------
   一条横贯顶部的长进度条，小乌龟沿着它一路走到终点旗。
   计时期间右上角的时钟让位给"还剩多久"。
   想换动物就改 index.html 里 .walker 那个表情。 */
.timer-bar {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  min-width: 0;
  margin-left: 2.5vw;
  align-self: center;
}
.track {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  height: 5.2vh;
  min-height: 40px;
  border-radius: 999px;
  background: #dbe3ee;
  box-shadow: inset 0 0.2vh 0.5vh rgba(20, 35, 60, 0.08);
}
.track-fill {
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--timer-color, #1a9552);
  transition: width 0.95s linear, background 0.6s ease;
}
/* 小人：站在进度的最前沿，一路朝右跑 */
.walker {
  position: absolute;
  top: 50%;
  left: 0;
  width: clamp(46px, 4.6vw, 92px);
  height: clamp(46px, 4.6vw, 92px);
  margin-top: calc(clamp(46px, 4.6vw, 92px) / -2);
  margin-left: calc(clamp(46px, 4.6vw, 92px) / -2);
  transition: left 0.95s linear;
  pointer-events: none;
  /* 做成一枚白色圆牌：不管跑在已走过的深色段还是没走的浅色段，都看得清 */
  background: #fff;
  border: 0.35vh solid var(--timer-color, #1a9552);
  border-radius: 50%;
  box-shadow: 0 0.3vh 0.9vh rgba(20, 35, 60, 0.22);
  box-sizing: border-box;
}
/* 用缩放留白，不要用百分比 padding——
   百分比是按外层轨道的宽度算的，会把圆牌撑爆、把小人挤没 */
.runner { width: 100%; height: 100%; overflow: visible; transform: scale(0.8); }
.r-head { fill: #ffc48a; stroke: var(--timer-color, #1a9552); stroke-width: 3; }
.r-body, .r-arm-b, .r-arm-f, .r-leg-b, .r-leg-f {
  fill: none;
  stroke: var(--timer-color, #1a9552);
  stroke-width: 6;
  stroke-linecap: round;
}
.r-arm-b, .r-leg-b { opacity: 0.55; }      /* 远侧的手脚淡一点，有前后层次 */

/* 跑起来：身体上下颠，前后腿交替摆 */
.walker.moving { animation: runBob 0.62s ease-in-out infinite; }
@keyframes runBob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9%); }
}
.walker.moving .r-leg-f { animation: legF 0.62s ease-in-out infinite; }
.walker.moving .r-leg-b { animation: legB 0.62s ease-in-out infinite; }
.walker.moving .r-arm-f { animation: legB 0.62s ease-in-out infinite; }
.walker.moving .r-arm-b { animation: legF 0.62s ease-in-out infinite; }
@keyframes legF {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-34deg); }
}
@keyframes legB {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(30deg); }
}
.r-leg-f, .r-leg-b { transform-origin: 21.5px 31px; } /* 以胯为轴 */
.r-arm-f, .r-arm-b { transform-origin: 23.5px 25px; } /* 以肩为轴 */
.goal {
  position: absolute;
  right: -0.95em;
  top: 50%;
  transform: translateY(-50%);
  font-size: clamp(26px, 2.4vw, 50px);
  line-height: 1;
}
.timer-remain {
  /* 固定宽度：不管显示 4:32 还是 12:05 还是"时间到"，
     轨道长度都不会跟着变（之前会一跳一跳的） */
  flex: none;
  width: 3.6em;
  margin-left: 2.2vw;
  text-align: right;
  font-size: clamp(34px, 3.4vw, 72px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  color: var(--timer-color, #1a9552);
  white-space: nowrap;
}

/* 最后一分钟：整条轻轻跳一下，不吵 */
.timer-bar.hurry .track { animation: timerPulse 1.6s ease-in-out infinite; }
@keyframes timerPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.02); }
}

/* 时间到：停在屏幕上，点一下才关掉 */
.timer-bar.done { cursor: pointer; }
.timer-bar.done .timer-remain { font-size: clamp(20px, 1.85vw, 38px); }

/* ---------- 右下角按钮组 ---------- */
.corner-cluster {
  position: fixed;
  right: 2vw;
  bottom: 4.5vh;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.corner-cluster .ack-btn,
.corner-cluster .ack-done {
  position: static;
  right: auto;
  bottom: auto;
  margin-top: 1vh;
}
.timer-btn { background: #fff; }
.timer-btn .ack-icon { color: #1769cf; }