/* ============================================================================
   疊圖卡 fc-card · 底圖 + 日期 + 號碼 + 中獎圈
   ----------------------------------------------------------------------------
   原則:底圖(背景圖)由 blade inline style 以「資料參數」帶入,CSS 不寫死任何
        圖片路徑(業主日後上傳只改資料值);本檔只負責版面 / 位置 / 尺寸。
   號碼/圓圈素材:assets/forecast/numbers/{風格}/(00–99.png + win-mark.png)
   ============================================================================ */

.fc-card{
  /* ── 顏色一律走 CSS 變數;這裡只是「預設值(fallback)」,真正的色由參數(引擎 inline)覆寫 ── */
  --fc-card-bg:#1a1206;                                   /* 卡片底(圖未載入時露出)*/
  --fc-date-color:#fff;                                   /* 純文字日期 / 月日分隔字 */
  --fc-date-cell-bg:linear-gradient(180deg,#fff,#f0e8d4); /* 盒裝日期格背景 */
  --fc-date-cell-color:#1a1006;                           /* 盒裝日期格文字 */
  --fc-num-outline:rgba(0,0,0,.85);                       /* 染色號碼的深色描邊 */

  position:relative;
  width:100%;
  aspect-ratio:5 / 4;            /* 今日方向用橫式 5:4;在 .thumb 內會被覆寫成填滿 */
  overflow:hidden;
  background:var(--fc-card-bg);
  font-family:"Noto Serif TC","Microsoft JhengHei",serif;
  isolation:isolate;
  user-select:none;
  font-size:clamp(12px, 4cqi, 34px);
  container-type:inline-size;    /* 讓 cqi = 卡片寬度的百分比,疊層隨卡片縮放 */
}
.fc-bg{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center;
  filter:brightness(.92);
}
.fc-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,0) 32%, rgba(0,0,0,0) 62%, rgba(0,0,0,.22));
}

/* 日期 — 預設右上;帶 x/y 參數時由 JS 改為自由定位 */
.fc-date{
  position:absolute; top:5%; right:5%; z-index:3;
  display:flex; align-items:center; gap:1cqi;
  font-weight:900; text-shadow:0 2px 6px rgba(0,0,0,.5);
}
/* 純文字日期(如 07月01日,可任意上色)*/
.fc-date--plain{
  color:var(--fc-date-color); letter-spacing:.5cqi; line-height:1;
  font-size:7cqi; white-space:nowrap;
}
.fc-date-cell{
  display:inline-grid; place-items:center;
  width:13cqi; height:13cqi;
  background:var(--fc-date-cell-bg); color:var(--fc-date-cell-color);
  border-radius:4px; font-size:8.5cqi; font-weight:900;
  box-shadow:0 2px 6px rgba(0,0,0,.4);
}
.fc-date-sep{ color:var(--fc-date-color); font-size:5.5cqi; font-weight:800; margin:0 .5cqi; }

/* 號碼(底部橫排)*/
.fc-numbers{ position:absolute; z-index:4; }
.fc-numbers.fc-layout-row{
  left:0; right:0; bottom:7%;
  display:flex; justify-content:center; align-items:center;
  gap:3cqi; padding:0 6%;
}
.fc-num{
  position:relative; display:inline-block;
  width:20cqi; aspect-ratio:1 / 1;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.55));
}
.fc-num .fc-num-img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; pointer-events:none;
}
/* mask 染色模式:PNG 當形狀、背景色填滿(精確顏色,扁平)*/
.fc-num .fc-num-mask{
  position:absolute; inset:0; width:100%; height:100%;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
  /* background-color 由 JS inline 帶入 */
  /* 深色描邊光暈:染色後仍丟失原白描邊,補一圈讓深底圖也看得清(描邊色走變數)*/
  filter:drop-shadow(0 0 .9cqi var(--fc-num-outline)) drop-shadow(0 .2cqi .5cqi rgba(0,0,0,.45));
}
.fc-numbers.fc-layout-row[data-count="4"] .fc-num{ width:17cqi; }
.fc-numbers.fc-layout-row[data-count="5"] .fc-num{ width:14cqi; }

/* 中獎圈(phase=after 對中時疊上,放大蓋住號碼)*/
.fc-num.is-win .fc-win-mark{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; pointer-events:none; z-index:2;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.45));
  transform:scale(1.2) rotate(-3deg); transform-origin:center center;
}

/* 號碼/圓圈一律透明背景(覆蓋 today-square-item img 的米色底)*/
.fc-num-img, .fc-win-mark{ background:transparent !important; object-fit:contain; }

/* 開獎狀態標籤(放卡片 body / 內文)— 三態,視覺權重分明:中獎跳出、未中/未開獎安靜 */
/* 日期 + 狀態標籤同一行(日期左、標籤右),不獨佔一排 */
.dir-meta{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 6px; }
.dir-meta .issue{ margin:0; font-size:15px; font-weight:700; }   /* 日期放大,與狀態標籤平衡 */

.dir-status{
  display:inline-flex; align-items:center; gap:6px;
  margin:0; padding:5px 13px;
  border:1px solid transparent; border-radius:999px;
  font-size:13.5px; font-weight:700; line-height:1.3; letter-spacing:.3px; white-space:nowrap;
}
.dir-status::before{                                   /* 狀態圓點 */
  content:""; flex:none; width:8px; height:8px; border-radius:50%;
  background:currentColor;
}
.dir-status.is-before{ background:#fdf3d9; color:#a8822a; border-color:#efdfa8; }   /* 未開獎:琥珀金(待開)*/
.dir-status.is-after { background:#ededed; color:#7c7c7c; border-color:#dcdcdc; }   /* 已開獎・未中:純灰 */
.dir-status.is-after.is-hit{                                                        /* 已開獎・中:紅+金點 */
  background:linear-gradient(180deg,#d9342b,#b81e16); color:#fff; border-color:#9d160f;
  box-shadow:0 2px 7px rgba(180,30,20,.32);
}
.dir-status.is-after.is-hit::before{ background:#ffd95e; }   /* 中獎:金色圓點 */

/* 放進列表卡 .thumb 時:取消固定比例、填滿 thumb(由 thumb 決定 5:4)*/
.list-card .thumb .fc-card{ height:100%; aspect-ratio:auto; border-radius:0; }

/* 首頁今日方向方格:疊圖填滿格子(格子比例由 today-square-item 決定)*/
.today-square-stack .today-square-item{ display:block; }
.today-square-stack .today-square-item .fc-card{ height:100%; aspect-ratio:auto; }

/* 無權限:底圖模糊 + 略放大避免邊緣露白(號碼/日期根本不渲染)*/
.fc-card.is-locked .fc-bg{ filter:blur(7px) brightness(.8); transform:scale(1.08); }