/* ============================================================
   臻美珠宝服务 · LED 电子价目屏  【自适应版】
   所有 px 已转换为 vw 单位（基准 1080 设计稿），填满任意视口。
   ============================================================ */

/* ============================================================
   臻美珠宝服务 · LED 电子价目屏
   设计稿尺寸：1080 × 1920（精确 9:16），由 JS 等比缩放适配视口
   ============================================================ */

:root {
  /* 金色体系 */
  --gold-hi:   #fff4d2;
  --gold:      #e8c877;
  --gold-mid:  #c9a44e;
  --gold-dim:  #8a6a26;
  --gold-line: rgba(232, 200, 119, .26);
  --gold-text: rgba(232, 200, 119, .72);

  /* LED 红色体系 */
  --led-on:    #ff2f2f;
  --led-off:   rgba(255, 47, 47, .07);
  --led-glow:  rgba(255, 45, 45, .55);

  /* 面板 */
  --panel:     #08090b;

  --font-cn: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
             "Source Han Sans SC", "Noto Sans CJK SC", sans-serif;
}

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

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 28%, #262219 0%, #0e0d0b 52%, #050505 100%);
  font-family: var(--font-cn);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 视口与屏幕：占满视口，内部按 vw 自适应 ---------- */
.viewport {
  position: fixed;
  inset: 0;
}

.screen {
  position: absolute;
  inset: 0;                                    /* 填满整个视口，不再固定 9:16 */
  padding: 0.6481vw;
  border-radius: 2.7778vw;
  background: linear-gradient(150deg,
    #f7e6b4 0%, #c9a24e 16%, #7d5f1e 36%,
    #5c4415 50%, #a8823a 68%, #efdca6 86%, #8a6a26 100%);
  box-shadow:
    inset 0 0 0 0.0926vw rgba(0, 0, 0, .35),
    0 3.7037vw 12.037vw rgba(0, 0, 0, .85),
    0 0 20.3704vw rgba(232, 200, 119, .07);
}

/* ---------- 黑色磨砂面板 ---------- */
.panel {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 2.2222vw;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, #14161a 0%, var(--panel) 46%, #050506 100%);
  box-shadow:
    inset 0 0 0 0.0926vw rgba(232, 200, 119, .18),
    inset 0 0 12.963vw rgba(0, 0, 0, .95);
}

/* 磨砂颗粒 */
.panel__noise {
  position: absolute;
  inset: 0;
  opacity: .05;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>");
}

/* LED 点阵网格 */
.panel__grid {
  position: absolute;
  inset: 0;
  opacity: .055;
  pointer-events: none;
  z-index: 3;
  background-image:
    repeating-linear-gradient(0deg,  rgba(255,255,255,.9) 0 0.0926vw, transparent 0.0926vw 0.3704vw),
    repeating-linear-gradient(90deg, rgba(255,255,255,.9) 0 0.0926vw, transparent 0.0926vw 0.3704vw);
}

/* ---------- 内容布局 ---------- */
.panel__content {
  position: relative;
  z-index: 2;
  height: 100%;
  padding: 5.1852vw 5.9259vw 5.1852vw;
  display: flex;
  flex-direction: column;
}

/* ============================================================
   上半部分
   ============================================================ */
.upper {
  flex: 0 0 auto;
}

/* ---------- 品牌头：徽章 logo + 横排品牌名 ---------- */
.brand-bar {
  display: flex;
  align-items: center;
  gap: 3.3333vw;
  padding-top: 0.3704vw;
}

.brand__logo {
  width: 17.037vw;
  height: 17.037vw;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 1.2963vw rgba(232, 200, 119, .25));
}

/* 自定义 logo 图片（后端 store.logo 提供时显示，替换默认 SVG 徽章） */
.brand__logo-img {
  width: 17.037vw;
  height: 17.037vw;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: contain;
  background: rgba(232, 200, 119, .04);
  border: 0.1852vw solid rgba(232, 200, 119, .5);
  filter: drop-shadow(0 0 1.2963vw rgba(232, 200, 119, .25));
}

.brand__title {
  font-size: 7.4074vw;
  font-weight: 800;
  letter-spacing: 1.0185vw;
  text-indent: 1.0185vw;
  line-height: 1.1;
  background: linear-gradient(180deg,
    var(--gold-hi) 0%, var(--gold) 48%, var(--gold-mid) 78%, var(--gold-dim) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 1.6667vw rgba(232, 200, 119, .30));
}

/* ---------- 信息行：日期 / 星期时间 ---------- */
.info-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8519vw;
  margin-top: 4.8148vw;
}

.info-row--week { margin-top: 3.7037vw; }

.info-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5556vw;
}

.info-cell--num { padding: 0 0.1852vw; }

.cell__cn {
  font-size: 3.2407vw;
  font-weight: 600;
  letter-spacing: 0.4074vw;
  text-indent: 0.4074vw;
  color: var(--gold);
  text-shadow: 0 0 1.1111vw rgba(232, 200, 119, .28);
}

.cell__en {
  font-size: 1.8519vw;
  letter-spacing: 0.5185vw;
  text-indent: 0.5185vw;
  color: rgba(232, 200, 119, .55);
  text-shadow: 0 0 0.8333vw rgba(232, 200, 119, .16);
}

/* ---------- 标题（描边字） ---------- */
.headline {
  margin-top: 4.8148vw;
  text-align: center;
}

.headline__cn {
  font-size: 9.2593vw;
  font-weight: 800;
  letter-spacing: 1.2963vw;
  text-indent: 1.2963vw;
  line-height: 1.2;
  color: transparent;
  -webkit-text-stroke: 0.3241vw var(--gold);
  text-shadow:
    0 0 1.4815vw rgba(232, 200, 119, .35),
    0 0 3.3333vw rgba(232, 200, 119, .22);
}

.headline__en {
  margin-top: 1.2963vw;
  font-size: 3.1481vw;
  font-weight: 500;
  letter-spacing: 1.8519vw;
  text-indent: 1.8519vw;
  color: var(--gold-text);
  text-shadow: 0 0 1.2963vw rgba(232, 200, 119, .22);
}

/* ============================================================
   下半部分
   ============================================================ */

/* ---------- 价格表 ---------- */
.board {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;                       /* 允许被压缩，避免内容溢出后被裁切 */
  margin-top: 2.5926vw;
}

.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.6667vw;
  border-bottom: 0.0926vw solid var(--gold-line);
}

.board__th {
  font-size: 2.8704vw;
  letter-spacing: 0.3148vw;
  color: rgba(232, 200, 119, .52);
}

.board__th--price {
  display: inline-flex;
  align-items: center;
  gap: 1.6667vw;
  text-align: right;
}

/* 实时连接状态指示 */
.board__live {
  display: inline-flex;
  align-items: center;
  gap: 0.7407vw;
  font-size: 2.1296vw;
  font-weight: 600;
  letter-spacing: 0.1852vw;
  color: var(--led-on);
  text-shadow: 0 0 0.9259vw rgba(255, 45, 45, .35);
  white-space: nowrap;
}
.board__live-dot {
  width: 1.6667vw;
  height: 1.6667vw;
  border-radius: 50%;
  background: var(--led-on);
  box-shadow: 0 0 0.9259vw var(--led-glow), 0 0 1.6667vw rgba(255, 45, 45, .45);
  animation: livePulse 1.4s ease-in-out infinite;
}
.board__live.is-off {
  color: rgba(232, 200, 119, .55);
  text-shadow: none;
}
.board__live.is-off .board__live-dot {
  background: rgba(232, 200, 119, .55);
  box-shadow: none;
  animation: none;
}
@keyframes livePulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .4;  transform: scale(.82); }
}

.board__list {
  list-style: none;
  flex: 1;                             /* 占据剩余高度 */
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.board__item {
  flex: 1;                             /* 各品类均分可用高度，不依赖固定像素 */
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 8.5185vw;                    /* 兜底：至少要装下 8.5185vw 的数码管 */
  border-bottom: 0.0926vw solid var(--gold-line);
}

.board__name {
  font-size: 4.7222vw;
  font-weight: 600;
  letter-spacing: 0.4074vw;
  text-indent: 0.4074vw;
  color: var(--gold);
  text-shadow: 0 0 1.1111vw rgba(232, 200, 119, .26);
}

/* ---------- 底部备注 ---------- */
.note {
  margin-top: 2.5926vw;
  text-align: center;
}

.note__text {
  font-size: 2.7778vw;
  letter-spacing: 0.2778vw;
  color: rgba(232, 200, 119, .60);
  text-shadow: 0 0 0.9259vw rgba(232, 200, 119, .18);
}

/* ---------- 公告展示区 ----------
   水平跑马灯：单行横向流过，所有 active 公告排成一行（track width: max-content），
   由 @keyframes translateX(-50%) + JS 复制双份内容做首尾无缝循环。
   始终滚动（不依赖内容长度）：单条/多条都呈现横向跑马灯效果。 */
.announce {
  display: flex;                           /* 左：固定标签 + 右：滚动视口，横向排列 */
  align-items: center;
  flex: 0 0 auto;
  margin-top: 2.5926vw;
  height: 8.3333vw;                         /* 单行高度（≈1 行 3.3333vw + 上下 padding 1.6667vw×2） */
  overflow: hidden;
  padding: 1.6667vw 2.2222vw;
  border-radius: 1.6667vw;
  border: 0.0926vw solid var(--gold-line);
  background: linear-gradient(180deg, rgba(232, 200, 119, .06), rgba(232, 200, 119, .02));
}
.announce[hidden] { display: none; }

/* 固定标签：左侧不动，承载类型语义（公告=金 / 警告=橙 / 紧急=红），内容在其右侧横向滚动 */
.announce__label {
  flex: 0 0 auto;
  margin-right: 2.2222vw;
  padding: 0.3704vw 1.2963vw;
  border-radius: 0.9259vw;
  font-size: 2.5926vw;
  font-weight: 700;
  letter-spacing: 0.1852vw;
  color: #08090b;
  background: var(--gold);
  white-space: nowrap;
}

/* 滚动视口：占满剩余宽度并裁切溢出，内部 track 才是横向跑马灯 */
.announce__viewport {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.announce__track {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: max-content;                      /* 内容决定宽度，允许超出视口 */
  height: 100%;                            /* 撑满父级内容区，便于垂直居中 */
}

/* 水平跑马灯无缝滚动：keyframes 位移 -50%，配合 JS 在 track 内放两份相同内容，
   滚到一份宽度时恰好衔接第二份开头，视觉无缝循环。
   始终滚动（不依赖内容长度）：跑马灯效果，单条/多条都生效。 */
@keyframes announce-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.ann-item {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;                           /* 不被压缩，每条独立占位 */
  padding-right: 6.4815vw;                  /* 循环项之间的留白，避免首尾紧贴 */
  font-size: 3.3333vw;
  line-height: 1.3;
  white-space: nowrap;                      /* 跑马灯关键：禁止换行，让内容横向延展 */
}

.ann-text {
  color: var(--gold-text);
  white-space: nowrap;                       /* 与父级一致，禁止换行 */
}
.ann-sub {
  color: rgba(232, 200, 119, .55);
  font-size: 3.0556vw;
}

/* 类型强调色：固定标签换色（警告=橙 / 紧急=红白字）+ 紧急类型文字提红 */
.announce__label.ann-type-warning { background: #ffb454; }
.announce__label.ann-type-urgent  { background: var(--led-on); color: #fff; }
.ann-item.ann-type-urgent .ann-text { color: #ff7a7a; text-shadow: 0 0 0.9259vw var(--led-glow); }

/* ---------- 门店位置定位 ---------- */
.locator {
  flex: 0 0 auto;
  margin-top: 1.8519vw;
  display: flex;
  align-items: center;
  gap: 2.2222vw;
  padding: 1.6667vw 2.2222vw;
  border-radius: 1.6667vw;
  border: 0.0926vw solid var(--gold-line);
  background: linear-gradient(180deg, rgba(232, 200, 119, .06), rgba(232, 200, 119, .02));
}

.locator__pin {
  width: 7.4074vw;
  height: 7.4074vw;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 1.1111vw rgba(232, 200, 119, .30));
}

.locator__pin-shape {
  fill: none;
  stroke: var(--gold);
  stroke-width: 2;
  stroke-linejoin: round;
}

.locator__pin-dot {
  fill: var(--gold-hi);
}

.locator__info {
  display: flex;
  flex-direction: column;
  gap: 0.5556vw;
  min-width: 0;
  flex: 1;                      /* 占满定位卡剩余宽度，使 .locator__top 能把店名左、电话右分开 */
}

/* 店名 + 电话同行容器：店名靠左、电话靠右，二者拉开距离（gap 为最小间距） */
.locator__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2vw;
  min-width: 0;
}

.locator__name {
  font-size: 3.5185vw;
  font-weight: 700;
  letter-spacing: 0.2778vw;
  color: var(--gold);
  text-shadow: 0 0 1.1111vw rgba(232, 200, 119, .28);
}

.locator__addr {
  font-size: 2.4074vw;
  letter-spacing: 0.1852vw;
  color: var(--gold-text);
  text-shadow: 0 0 0.9259vw rgba(232, 200, 119, .16);
}

.locator__phone {
  display: flex;
  align-items: center;
  gap: 0.7407vw;
  margin-right: 2.7778vw;        /* 略微左收，电话不贴卡片右缘 */
  /* 空字符串时通过 [hidden] 属性整体隐藏，避免无电话时占用版面 */
}
.locator__phone[hidden] { display: none !important; }

.locator__phone-icon {
  width: 4vw;
  height: 4vw;
  flex: 0 0 auto;
  filter: drop-shadow(0 0 1.1111vw rgba(232, 200, 119, .28));
}

.locator__phone-shape {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.locator__phone-text {
  font-size: 3.5185vw;
  letter-spacing: 0.2778vw;
  color: var(--gold);
  text-shadow: 0 0 1.1111vw rgba(232, 200, 119, .28);
  white-space: nowrap;
}

/* ============================================================
   七段数码管（纯 CSS 几何 + 查表点亮，无外部字体依赖）
   ============================================================ */
.led {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5185vw;

  /* 数码管统一尺寸：全屏所有数字（日期/星期/时间/秒/价格）共用一套，
     避免多级大小混排造成视觉杂乱。日后再分级只需在对应语义类上覆盖这三个变量。 */
  --seg-w: 4.7222vw;
  --seg-h: 8.5185vw;
  --seg-t: 1.0185vw;
}

/* 语义类保留，当前不再制造尺寸差异（见上方统一变量） */
.led--price,
.led--md,
.led--lg,
.led--sec { /* 尺寸继承自 .led */ }

/* 秒块紧贴主时间，从属于时间字段而非独立字段 */
.info-cell--sec { margin-left: -1.1111vw; }

/* 内容为空的 LED 槽位整块隐藏（如关闭秒显示时） */
[hidden] { display: none !important; }

.digit {
  position: relative;
  width: var(--seg-w);
  height: var(--seg-h);
  flex: 0 0 auto;
}

.seg {
  position: absolute;
  background: var(--led-off);
  border-radius: 0.0926vw;
  transition: background .12s linear;
}

.seg.on {
  background: var(--led-on);
  box-shadow:
    0 0 0.5556vw var(--led-glow),
    0 0 1.4815vw rgba(255, 45, 45, .40);
}

/* 横向段 */
.seg.a, .seg.g, .seg.d {
  left: var(--seg-t);
  right: var(--seg-t);
  height: var(--seg-t);
}
.seg.a { top: 0; }
.seg.g { top: calc(50% - var(--seg-t) / 2); }
.seg.d { bottom: 0; }

/* 纵向段 */
.seg.f, .seg.b, .seg.e, .seg.c {
  width: var(--seg-t);
  height: calc(50% - var(--seg-t) * 1.5);
}
.seg.f { left: 0;   top: var(--seg-t); }
.seg.b { right: 0;  top: var(--seg-t); }
.seg.e { left: 0;   bottom: var(--seg-t); }
.seg.c { right: 0;  bottom: var(--seg-t); }

/* 分隔符：短横、冒号、小数点 */
.dash {
  width: calc(var(--seg-w) - var(--seg-t) * 2);
  height: var(--seg-t);
  border-radius: 0.0926vw;
  background: var(--led-on);
  box-shadow: 0 0 0.5556vw var(--led-glow), 0 0 1.4815vw rgba(255, 45, 45, .40);
  flex: 0 0 auto;
}

.colon {
  height: var(--seg-h);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(var(--seg-h) * 0.20);
  flex: 0 0 auto;
}

.colon i {
  width: var(--seg-t);
  height: var(--seg-t);
  border-radius: 50%;
  background: var(--led-on);
  box-shadow: 0 0 0.5556vw var(--led-glow), 0 0 1.4815vw rgba(255, 45, 45, .40);
}

.dot {
  align-self: flex-end;
  width: var(--seg-t);
  height: var(--seg-t);
  margin: 0 0.2778vw calc(var(--seg-h) * 0.06);
  border-radius: 50%;
  background: var(--led-on);
  box-shadow: 0 0 0.5556vw var(--led-glow), 0 0 1.4815vw rgba(255, 45, 45, .40);
  flex: 0 0 auto;
}