/* itc_clock 獨立大屏：以螢幕短邊（vmin）縮放字級，32 吋電視到 75 吋觸控屏都看得清楚 */
:root {
  --bg: #fff8fc;
  --bg2: #eef9ff;
  --card: #ffffff;
  --ink: #1b1b1f;
  --muted: #5d5d66;
  --line: rgba(0, 0, 0, .08);
  --soft: rgba(0, 0, 0, .04);
  --radius: 2.2vmin;
  --gap: 1.8vmin;
  --shadow: 0 1vmin 2.6vmin rgba(0, 0, 0, .07);
}
body.itc-dark {
  --bg: #0f1117;
  --bg2: #161a24;
  --card: #1b1f2a;
  --ink: #f2f3f7;
  --muted: #a7acbb;
  --line: rgba(255, 255, 255, .1);
  --soft: rgba(255, 255, 255, .05);
  --shadow: 0 1vmin 2.6vmin rgba(0, 0, 0, .4);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: "Noto Sans TC", "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
  color: var(--ink);
  background: radial-gradient(120vmax 80vmax at 15% 10%, var(--bg2), transparent 60%),
              radial-gradient(120vmax 80vmax at 85% 30%, var(--bg), transparent 60%), var(--bg);
  overflow: hidden;
  font-size: 2.2vmin;
}
.itc-screen {
  --accent: var(--itc-accent, #ff91ce);
  --accent2: var(--itc-accent2, #B4267A);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: 0 var(--gap) var(--gap);
}

/* 上方列 */
.d-top {
  display: flex; align-items: center; justify-content: space-between; gap: 2vmin;
  padding: 1.4vmin .4vmin; flex: 0 0 auto;
}
.brand { display: flex; align-items: center; gap: 1.2vmin; font-weight: 800; font-size: 2.6vmin; min-width: 0; }
.brand .dot {
  width: 1.8vmin; height: 1.8vmin; border-radius: 50%; background: var(--accent); flex: 0 0 auto;
  box-shadow: 0 0 0 .8vmin color-mix(in srgb, var(--accent) 25%, transparent);
}
.brand .room { color: var(--muted); font-weight: 700; }
.brand .room:not(:empty)::before { content: "｜"; }
.top-right { display: flex; align-items: center; gap: 1.4vmin; }
.offline { background: #fff3cd; color: #7a5b00; border-radius: 99px; padding: .6vmin 1.6vmin; font-weight: 700; font-size: 1.8vmin; }
.btn-fs {
  border: 0; border-radius: 99px; padding: 1vmin 2vmin; font: inherit; font-weight: 700; font-size: 1.8vmin;
  background: var(--accent); color: #fff; cursor: pointer; transition: opacity .3s;
}
body.itc-idle { cursor: none; }
body.itc-idle .btn-fs { opacity: 0; pointer-events: none; }

/* 主要格線 */
.d-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: var(--gap); }
.card {
  background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow);
  padding: 2vmin; position: relative; overflow: hidden; min-height: 0;
}
.card::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%);
}
.card > * { position: relative; }

.d-main { display: flex; flex-direction: column; gap: 1.6vmin; justify-content: space-between; }
.clock { text-align: center; }
.clock .time {
  font-size: 15vmin; font-weight: 900; line-height: 1; letter-spacing: .02em;
  font-variant-numeric: tabular-nums;
}
.clock .date { margin-top: .8vmin; font-size: 3vmin; color: var(--muted); font-weight: 700; }

.badges { display: flex; flex-wrap: wrap; gap: 1.2vmin; justify-content: center; }
.badge { border-radius: 99px; padding: 1vmin 2vmin; font-weight: 800; font-size: 2.6vmin; }
.badge.state { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--accent2); }
body.itc-dark .badge.state { color: color-mix(in srgb, var(--accent) 80%, white); }
.badge.sub { background: var(--soft); }

.cur-next { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6vmin; }
.box { background: color-mix(in srgb, var(--accent) 9%, transparent); border-radius: 1.8vmin; padding: 1.6vmin 2vmin; min-width: 0; }
.box h3 { margin: 0 0 .6vmin; font-size: 2.2vmin; color: var(--accent2); }
body.itc-dark .box h3 { color: color-mix(in srgb, var(--accent) 75%, white); }
.box .val { font-size: 4.4vmin; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.box .sub { margin-top: .6vmin; font-size: 2.1vmin; color: var(--muted); font-weight: 600; min-height: 1.2em; }
.box.countdown { background: var(--soft); }
.box.countdown .val { font-size: 5.4vmin; font-variant-numeric: tabular-nums; }
.progress { margin-top: 1.2vmin; height: 1.4vmin; border-radius: 99px; background: var(--line); overflow: hidden; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent2)); border-radius: 99px; transition: width 1s linear; }
.progress.is-hidden { visibility: hidden; }

/* 上課前提醒：倒數區變色閃爍 */
.itc-warn .box.countdown { background: color-mix(in srgb, #ff6b35 20%, transparent); animation: itcPulse 1.2s ease-in-out infinite; }
.itc-warn .box.countdown h3, .itc-warn .box.countdown .val { color: #d9480f; }
@keyframes itcPulse { 50% { box-shadow: 0 0 0 .8vmin rgba(255, 107, 53, .25); } }

/* 公告 */
.d-side { display: flex; flex-direction: column; }
.d-side h2 { margin: 0 0 1.4vmin; font-size: 2.8vmin; }
.notice { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--soft); border-radius: 1.8vmin; padding: 2vmin; overflow: hidden; }
.notice .title { font-size: 3.4vmin; font-weight: 900; margin-bottom: 1.2vmin; color: var(--accent2); }
body.itc-dark .notice .title { color: color-mix(in srgb, var(--accent) 80%, white); }
.notice .content { font-size: 2.8vmin; line-height: 1.6; font-weight: 600; overflow: hidden; }
.notice .content img { max-width: 100%; height: auto; border-radius: 1vmin; }
.notice .content p { margin: 0 0 .8em; }
.itc-fade { animation: itcFade .6s ease; }
@keyframes itcFade { from { opacity: 0; transform: translateY(1vmin); } to { opacity: 1; transform: none; } }
.dots { display: flex; justify-content: center; gap: .8vmin; padding-top: 1.2vmin; }
.dots span { width: 1vmin; height: 1vmin; border-radius: 50%; background: var(--line); }
.dots span.on { background: var(--accent); }

/* 今日時間軸 */
.d-timeline { display: flex; gap: 1vmin; overflow-x: auto; padding: 1.4vmin; scrollbar-width: none; }
.d-timeline::-webkit-scrollbar { display: none; }
.itc-tl-item {
  flex: 1 0 11vmin; border-radius: 1.4vmin; padding: 1vmin 1.2vmin; background: var(--soft);
  border: .3vmin solid transparent; text-align: center; transition: all .4s;
}
.itc-tl-item .tl-name { font-weight: 800; font-size: 2vmin; }
.itc-tl-item .tl-time { font-size: 1.6vmin; color: var(--muted); font-variant-numeric: tabular-nums; }
.itc-tl-item .tl-class { font-size: 2.2vmin; font-weight: 900; min-height: 1.3em; }
.itc-tl-item.type-lunch, .itc-tl-item.type-other { flex-basis: 9vmin; }
.itc-tl-item:not(.has-class) .tl-class { color: var(--muted); font-weight: 600; font-size: 1.8vmin; }
.itc-tl-item.is-done { opacity: .4; }
.itc-tl-item.is-next { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.itc-tl-item.is-current { background: var(--accent); color: #fff; opacity: 1; transform: translateY(-.3vmin); }
.itc-tl-item.is-current .tl-time, .itc-tl-item.is-current .tl-class { color: #fff; }
.itc-tl-empty { color: var(--muted); font-weight: 700; padding: .6vmin 1vmin; }

/* ---------- 版面：橫向（16:9 電視、投影） ---------- */
.layout-landscape .d-grid { grid-template-columns: 1.85fr 1fr; grid-template-rows: 1fr auto; }
.layout-landscape .d-main { grid-column: 1; grid-row: 1; }
.layout-landscape .d-side { grid-column: 2; grid-row: 1; }
.layout-landscape .d-timeline { grid-column: 1 / -1; grid-row: 2; }

/* ---------- 版面：直向（直立式廣告機、平板直放） ---------- */
.layout-portrait { font-size: 2vmin; }
.layout-portrait .d-grid { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; }
.layout-portrait .clock .time { font-size: 19vmin; }
.layout-portrait .box .val { font-size: 5vmin; }
.layout-portrait .d-timeline { order: 2; flex-wrap: wrap; overflow: visible; }
.layout-portrait .d-timeline .itc-tl-item { flex: 1 0 18%; }
.layout-portrait .d-main { order: 1; }
.layout-portrait .d-side { order: 3; }
.layout-portrait .notice .content { font-size: 3.2vmin; }

/* ---------- 版面：精簡（小螢幕、手機） ---------- */
.layout-compact { overflow: auto; }
.layout-compact .itc-screen { height: auto; min-height: 100vh; }
.layout-compact .d-grid { grid-template-columns: 1fr; }
.layout-compact .d-main { justify-content: flex-start; }
.layout-compact .notice { min-height: 30vh; }
.layout-compact .clock .time { font-size: 16vw; }
.layout-compact .clock .date { font-size: 4vw; }
.layout-compact .badge { font-size: 3.6vw; }
.layout-compact .cur-next { grid-template-columns: 1fr; }
.layout-compact .box h3 { font-size: 3.4vw; }
.layout-compact .box .val { font-size: 5.6vw; }
.layout-compact .box .sub { font-size: 3.4vw; }
.layout-compact .box.countdown .val { font-size: 7vw; }
.layout-compact .brand { font-size: 4vw; }
.layout-compact .btn-fs { display: none; }
.layout-compact .d-side h2 { font-size: 4.2vw; }
.layout-compact .notice .title { font-size: 4.6vw; }
.layout-compact .notice .content { font-size: 4vw; }
.layout-compact .d-timeline { display: none; }
.layout-compact .card, .layout-compact .box { border-radius: 14px; }

/* 沒有 color-mix 的舊瀏覽器（例如舊款電視盒）退回固定色 */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  .badge.state, .box { background: rgba(255, 145, 206, .15); }
  .card::before { background: linear-gradient(100deg, rgba(255, 145, 206, .14), transparent 55%); }
  .brand .dot { box-shadow: 0 0 0 .8vmin rgba(255, 145, 206, .25); }
  .itc-tl-item.is-next { border-color: rgba(255, 145, 206, .7); }
  .itc-warn .box.countdown { background: rgba(255, 107, 53, .2); }
}