/* ==================== 签到抽奖 ====================
   顶栏 logo 入口（未抽完时指向 /checkin）+ /checkin 转轮页。
   颜色只取站点已有变量，金色为本功能局部变量。
   ================================================= */

:root {
  --ck-gold: #f2b632;
  --ck-gold-dim: rgba(242, 182, 50, .34);
}

/* ---------- 顶栏 logo 入口 ---------- */
.logo-word {
  position: relative;
  display: inline-flex;
  padding-right: 6px;
}

.logo-lc {
  display: inline-block;
  font-style: normal;
  font-family: var(--pixel-font);
}

/* 未抽完：A -> 2 -> W 依次点亮并一直闪；抽满后 logo-checkin 类被摘掉，动画随之停 */
.navbar-logo.logo-checkin .logo-lc {
  animation: ckLogoPop 1.5s ease-out infinite;
}
.navbar-logo.logo-checkin .logo-lc:nth-child(2) { animation-delay: .12s; }
.navbar-logo.logo-checkin .logo-lc:nth-child(3) { animation-delay: .24s; }

.navbar-logo.logo-checkin .logo-word {
  animation: ckLogoRest 4.5s ease-out forwards;
}

@keyframes ckLogoPop {
  0%   { color: inherit; transform: translateY(0); }
  18%  { color: var(--ck-gold); transform: translateY(-3px); }
  36%  { color: inherit; transform: translateY(0); }
  100% { color: inherit; transform: translateY(0); }
}

@keyframes ckLogoRest {
  0%, 66%  { text-shadow: none; }
  72%,100% { text-shadow: 0 0 6px var(--ck-gold-dim), 0 0 1px var(--ck-gold); }
}

/* ---------- /checkin 页 ---------- */
.ck-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 12px 48px;
  font-family: var(--body-font);
}

.ck-title {
  font-family: var(--pixel-font);
  font-size: 18px;
  margin: 0 0 6px;
}

.ck-sub {
  font-size: 12px;
  color: var(--gray);
  margin: 0 0 16px;
  line-height: 1.7;
}

/* ---------- 标签栏：抽奖 / 商店 ----------
   ∫余额、今日剩余、累计签到常驻在标签之上，切标签不打断读盘。 */
.ck-tabs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.ck-tab {
  flex: 1;
  padding: 10px 8px;
  font-family: var(--pixel-font);
  font-size: 13px;
  color: var(--gray);
  background: var(--bg);
  border: var(--border);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
  cursor: pointer;
}
.ck-tab.is-on {
  color: var(--white);
  background: var(--black);
  border-color: var(--ck-gold);
}
.ck-tab:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .25); }

.ck-pane { display: none; }
.ck-pane.is-on { display: block; }

.ck-meta {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}

.ck-cell {
  flex: 1;
  background: var(--bg);
  border: var(--border);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .25);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.ck-cell-k { font-size: 10px; color: var(--gray); }
.ck-cell-v { font-family: var(--pixel-font); font-size: 16px; }

/* 两行网格：第一行标签、第二行转轮。中线用 align-self:center 落在转轮行上，
   不再依赖 padding/label 高度去凑偏移，任何字体回退下都对得准。 */
.ck-machine {
  position: relative;
  background: var(--bg);
  border: var(--border);
  box-shadow: 6px 6px 0 rgba(0, 0, 0, .3);
  padding: 14px 10px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.08fr) auto minmax(0, 1.22fr);
  grid-template-rows: auto 168px;      /* 168 = 3 格 * 56px，与 JS 里的 CELL 对齐 */
  column-gap: 8px;
  row-gap: 6px;
  align-items: start;
}
.ck-gc1 { grid-column: 1; } .ck-gc2 { grid-column: 2; }
.ck-gc3 { grid-column: 3; } .ck-gc4 { grid-column: 4; } .ck-gc5 { grid-column: 5; }
.ck-gr1 { grid-row: 1; }    .ck-gr2 { grid-row: 2; }

.ck-reel-label {
  font-size: 10px;
  color: var(--gray);
  text-align: center;
}

.ck-reel {
  position: relative;
  width: 100%;
  min-width: 0;                        /* 关键：允许收缩，配合 nowrap 才不会裁字 */
  height: 168px;
  overflow: hidden;
  background: var(--white);
  border: var(--border);
  /* 遮罩只压最外两格的边缘；原来 26%/74% 会把上下两格压到几乎看不见，
     于是三格窗口看着像两格，中线也显得落在两行之间 */
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}

.ck-strip { will-change: transform; }

.ck-cell-face {
  height: 56px;
  line-height: 56px;
  text-align: center;
  font-family: var(--pixel-font);
  font-size: 20px;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
}

.ck-times {
  font-family: var(--pixel-font);
  font-size: 20px;
  color: var(--gray);
  align-self: center;                  /* 网格第二行居中，不再用 padding 凑 */
  height: 168px;
  line-height: 168px;
}

/* 绝对定位的 top:50% 是相对整台机器（含标签行与上下 padding），会偏离转轮中线约 9px。
   改成真正的网格项：落在第二行、跨所有列、align-self:center —— 精确压在中间那格上，
   不需要任何魔法数值，字体怎么回退都不会错位。 */
.ck-payline {
  grid-row: 2;
  grid-column: 1 / -1;
  align-self: center;
  justify-self: stretch;
  height: 0;
  border-top: 1px dashed var(--ck-gold);
  opacity: .55;
  pointer-events: none;
  z-index: 2;
}

.ck-result {
  margin: 14px 0 0;
  text-align: center;
  font-family: var(--pixel-font);
  font-size: 15px;
  line-height: 1.6;
}

.ck-result-num { font-size: 26px; color: var(--blue); }
.ck-result-unit { margin-left: 3px; }
.ck-result.is-jackpot .ck-result-num { color: var(--ck-gold); text-shadow: 0 0 10px var(--ck-gold-dim); }
.ck-result.is-jackpot .ck-result-eq { color: var(--ck-gold); }

/* 系数太小时三轴相乘会落到 0，明说是概率结果而不是出错 */
.ck-result.is-zero .ck-result-num { color: var(--gray); }
.ck-result.is-zero::after {
  content: "系数太小，本局 0 ∫";
  display: block;
  font-size: 10px;
  color: var(--gray);
  margin-top: 4px;
}

@keyframes ckShake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-3px, 2px); }
  40% { transform: translate(3px, -2px); }
  60% { transform: translate(-2px, -2px); }
  80% { transform: translate(2px, 2px); }
}
.ck-shake { animation: ckShake .6s ease-in-out; }

.ck-draw {
  display: block;
  width: 100%;
  margin: 18px 0 12px;
  padding: 14px;
  font-family: var(--pixel-font);
  font-size: 15px;
  background: var(--black);
  color: var(--white);
  border: var(--border);
  box-shadow: 4px 4px 0 rgba(0, 0, 0, .3);
  cursor: pointer;
}
.ck-draw:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 2px 2px 0 rgba(0, 0, 0, .3); }
.ck-draw:disabled { opacity: .45; cursor: default; }

.ck-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; }

.ck-slot {
  flex: 1;
  border: var(--border);
  padding: 8px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  opacity: .5;
}
.ck-slot.is-now { opacity: 1; border-color: var(--ck-gold); }
.ck-slot.is-done { opacity: 1; background: var(--bg); }
.ck-slot-val { font-family: var(--pixel-font); font-size: 12px; white-space: nowrap; }
.ck-slot-name { white-space: nowrap; }

.ck-note { font-size: 11px; color: var(--gray); margin: 12px 0 0; line-height: 1.7; }

.ck-history { margin-top: 26px; }
.ck-h3 { font-family: var(--pixel-font); font-size: 13px; margin: 0 0 8px; }

.ck-hlist { list-style: none; margin: 0; padding: 0; }

.ck-hitem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  font-size: 11px;
}
.ck-hdate { color: var(--gray); flex: 1; }
.ck-hcalc { font-family: var(--pixel-font); }
.ck-hgain { font-family: var(--pixel-font); color: var(--success); min-width: 48px; text-align: right; }
.ck-hempty { font-size: 11px; color: var(--gray); padding: 8px 6px; list-style: none; }

/* ---------- ∫总榜 / 全员战报 ---------- */
.ck-board { margin-top: 26px; }

.ck-rank, .ck-feed { list-style: none; margin: 0; padding: 0; }

.ck-rankitem, .ck-feeditem {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 6px;
  border-bottom: 1px solid rgba(0, 0, 0, .12);
  font-size: 12px;
}

.ck-rankitem.is-me, .ck-feeditem.is-me { background: var(--bg); }

.ck-rankno { font-family: var(--pixel-font); font-size: 11px; color: var(--gray); min-width: 22px; }
.ck-rankname { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-rankpts { font-family: var(--pixel-font); font-size: 13px; color: var(--blue); }

.ck-feeditem { gap: 8px; font-size: 11px; }
.ck-feedtime { color: var(--gray); font-size: 10px; min-width: 74px; }
.ck-feedname { max-width: 92px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-feeditem.is-me .ck-feedname { color: var(--blue); font-weight: 700; }
.ck-feedcalc { font-family: var(--pixel-font); font-size: 10px; flex: 1; }
.ck-feedgain { font-family: var(--pixel-font); font-size: 12px; color: var(--success); min-width: 46px; text-align: right; }

@media (max-width: 480px) {
  /* 转轮宽度交给网格列比例（minmax(0,1fr) 等）自适应，不再写死 62/76px——
     像素字体回退成系统等宽后比预期宽，写死必然裁字 */
  .ck-cell-face { font-size: 18px; }
  .ck-machine { column-gap: 5px; padding: 12px 8px; }
  .ck-times { font-size: 15px; }
  .ck-reel-label { font-size: 9px; }
}

/* 减少动效：不闪、不抖、不转，直接出结果 */
@media (prefers-reduced-motion: reduce) {
  .navbar-logo.logo-checkin .logo-lc,
  .navbar-logo.logo-checkin .logo-word,
  .ck-shake { animation: none !important; }
  .navbar-logo.logo-checkin .logo-word { text-shadow: 0 0 6px var(--ck-gold-dim); }
  .ck-strip { transition: none !important; }
}

/* ---------- ∫ 兑换商店 ---------- */
.ck-store-list { display: flex; flex-direction: column; gap: 10px; }
.ck-storeitem {
  display: grid; grid-template-columns: 84px 1fr auto; gap: 10px; align-items: center;
  background: var(--bg); border: var(--border); box-shadow: 4px 4px 0 rgba(0,0,0,.25);
  padding: 8px;
}
.ck-storethumb { width: 84px; height: 52px; overflow: hidden; border: var(--border); background: var(--light-gray); }
.ck-storethumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ck-storename { font-family: var(--pixel-font); font-size: 12px; margin-bottom: 4px; }
.ck-storeprice { font-size: 11px; color: var(--gray); }
.ck-storebtn {
  font-family: var(--pixel-font); font-size: 11px; cursor: pointer;
  padding: 8px 12px; background: var(--blue); color: var(--white);
  border: var(--border); box-shadow: 3px 3px 0 var(--black);
}
.ck-storebtn:hover { filter: brightness(1.08); }
.ck-storebtn:disabled { cursor: default; background: var(--light-gray); color: var(--gray); box-shadow: none; }
.ck-storebtn.is-owned { background: var(--success); color: var(--white); }