/* 数感小挑战 · 小游戏共用样式
   视觉与「数感小挑战」首页保持一致：紫渐变 hero + 白色圆角卡 + 大按钮。
   数字牌用拉密同款四色，和站内其它游戏统一。 */

/* ---------- 凑二十：一红一黄的大色位（唯一色源，别再往别处写死） ----------
   同一个算式里重复出现的加数（7 和 4 这种「两个数分别凑」）靠这两个色区分。
   黄色必须够「黄」：原先用 #a16207（深琥珀）在提示小字号里跟深红分不开，
   实测线上看还是红的 ⇒ 改成暗金黄 #8a5a00 配浅黄底衬，红黄一眼能分清。
   .pc.t0/.t1（牌）和 gamekit.css 的 .nk.nk0/.nk1（提示文字）都取这里的值。 */
:root {
  --tint-red: #c81e42;
  --tint-red-bg: #ffe4e9;
  --tint-yellow: #8a5a00;
  --tint-yellow-bg: #ffe9a0;
  --tint-yellow-line: #eab308;
  /* 十宫格里「已经放进去的块」也分这两个色：第一格红、第二格黄。
     比文字色亮一档 —— 块面要够显眼，「新补进去的」（--tint-added）仍是绿，不动。 */
  --tint-red-fill: #cf4b3e;
  --tint-yellow-fill: #eab308;
  --tint-yellow-fill-line: #c98a04;
  --tint-added: #16a34a;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif;
  background: linear-gradient(160deg, #f3e8ff 0%, #e0e7ff 55%, #e8f4fd 100%);
  color: #2c3e50; min-height: 100vh; user-select: none;
  background-attachment: fixed;
}
a { text-decoration: none; color: inherit; }
.wrap { max-width: 960px; margin: 0 auto; padding: 18px 16px 44px; }

/* ---------- 顶栏 ---------- */
.topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.home-link {
  display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px;
  background: #fff; color: #5b21b6; border-radius: 999px; padding: 8px 15px;
  box-shadow: 0 6px 16px rgba(91,33,182,.18); white-space: nowrap;
}
.home-link:active { transform: scale(.97); }

.hero {
  background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 55%, #4f46e5 100%);
  color: #fff; border-radius: 24px; padding: 20px 22px; text-align: center;
  box-shadow: 0 14px 34px rgba(91,33,182,.26);
}
.hero h1 { margin: 0 0 6px; font-size: 26px; letter-spacing: -.3px; }
.hero p { margin: 0 auto; max-width: 560px; font-size: 14px; line-height: 1.65; opacity: .95; }
.hero .emoji { font-size: 32px; display: block; margin-bottom: 4px; }

/* ---------- 计分行 ---------- */
.hud { display: flex; gap: 9px; align-items: center; justify-content: center;
  flex-wrap: wrap; margin: 14px 0 12px; }
.hud .pill {
  background: #fff; border-radius: 999px; padding: 9px 16px; font-size: 14px; font-weight: 800;
  color: #6d28d9; box-shadow: 0 6px 16px rgba(20,60,120,.10); white-space: nowrap;
}
.hud .pill b { color: #4c1d95; font-size: 16px; }
.hud .pill.streak { color: #b45309; }
.hud .pill.warn { color: #dc2626; }

/* 倒计时条 */
.tbar { height: 10px; background: #e9e5f7; border-radius: 999px; overflow: hidden; margin: 0 0 14px; }
.tbar > i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg,#a78bfa,#7c3aed);
  transition: width .25s linear; }
.tbar.low > i { background: linear-gradient(90deg,#fb923c,#dc2626); }

/* ---------- 牌桌 ---------- */
.board {
  background: #fff; border-radius: 24px; padding: 22px 18px 20px;
  box-shadow: 0 14px 34px rgba(20,60,120,.13); text-align: center;
}
.ask { font-size: 19px; font-weight: 900; color: #4c1d95; line-height: 1.5; }
.ask small { display: block; font-size: 13px; font-weight: 600; color: #7c6f9e; margin-top: 5px; }

.hand { display: flex; gap: 12px; justify-content: center; align-items: flex-end;
  flex-wrap: wrap; margin: 18px 0 8px; min-height: 108px; }
.grp { display: flex; gap: 7px; align-items: center; }
.vs { font-size: 20px; font-weight: 900; color: #a78bfa; padding: 0 2px; }
.tag { font-size: 12px; color: #7c6f9e; font-weight: 700; margin-top: 6px; }

/* 数字牌（拉密同款四色） */
.pc {
  width: 74px; height: 104px; border-radius: 14px; background: #fff;
  border: 3px solid #c7c3dd; display: flex; align-items: center; justify-content: center;
  font-size: 36px; font-weight: 900; color: #475569; position: relative;
  box-shadow: 0 6px 14px rgba(20,60,120,.13); transition: transform .16s, box-shadow .16s;
}
.pc.c0 { background: #fde8ec; border-color: #e11d48; color: #be123c; }   /* 红 */
.pc.c1 { background: #e7efff; border-color: #2563eb; color: #1d4ed8; }   /* 蓝 */
.pc.c2 { background: #fff0e3; border-color: #ea580c; color: #c2410c; }   /* 橙 */
.pc.c3 { background: #eef0f3; border-color: #334155; color: #1e293b; }   /* 黑 */
/* 凑二十：两个加数交替红 / 黄（8 和 8 一眼看出是「两个 8 分别凑」），
   盖掉上面按数值取的花色 —— 花色是按数字定的，两个 8 必然同色，看不出是两个 */
.pc.t0 { background: var(--tint-red-bg); border-color: var(--tint-red); color: var(--tint-red); }
.pc.t1 { background: var(--tint-yellow-bg); border-color: var(--tint-yellow-line); color: var(--tint-yellow); }
.pc.sm { width: 54px; height: 76px; border-radius: 11px; font-size: 26px; border-width: 2.5px; }
.pc.big { width: 92px; height: 130px; font-size: 46px; }
.pc.pick { cursor: pointer; }
.pc.pick:hover { transform: translateY(-6px); box-shadow: 0 14px 26px rgba(20,60,120,.22); }
.pc.sel { transform: translateY(-10px); box-shadow: 0 16px 30px rgba(124,58,237,.34);
  outline: 3px solid #7c3aed; outline-offset: 1px; }
.pc.ok { animation: pop .45s ease-out; }
.pc.bad { animation: shake .34s; }
.pc.dim { opacity: .34; }
.pc.slot { border-style: dashed; background: #f8f7ff; color: #c4b5fd; }
@keyframes pop { 0%{transform:none} 45%{transform:translateY(-14px) scale(1.1)} 100%{transform:none} }
@keyframes shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

/* 已排好的队列 */
.queue { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; margin-top: 6px; }

/* ---------- 大按钮 ---------- */
.opts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }
.opt {
  border: 0; background: #7c3aed; color: #fff; font-family: inherit; font-weight: 900;
  font-size: 20px; min-width: 76px; padding: 16px 22px; border-radius: 18px; cursor: pointer;
  box-shadow: 0 8px 20px rgba(124,58,237,.30); transition: transform .14s;
}
.opt:active { transform: scale(.96); }
.opt.ghost { background: #fff; color: #6d28d9; box-shadow: 0 6px 16px rgba(20,60,120,.12);
  border: 2px solid #ddd6fe; }
.opt.sym { font-size: 26px; min-width: 84px; }
.opt.right { background: #16a34a; box-shadow: 0 8px 20px rgba(22,163,74,.3); }
.opt.wrong { background: #dc2626; box-shadow: 0 8px 20px rgba(220,38,38,.3); animation: shake .3s; }
.opt:disabled { cursor: default; opacity: .55; }

.fb { margin-top: 16px; font-size: 16px; font-weight: 800; min-height: 24px; line-height: 1.55; }
.fb.ok { color: #16a34a; }
.fb.no { color: #dc2626; }

.row { display: flex; gap: 12px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.btn { border: 0; background: linear-gradient(135deg,#a78bfa,#7c3aed); color: #fff;
  font-family: inherit; font-weight: 900; font-size: 16px; padding: 14px 30px; border-radius: 999px;
  cursor: pointer; box-shadow: 0 10px 24px rgba(124,58,237,.30); }
.btn.ghost { background: #fff; color: #6d28d9; box-shadow: 0 6px 16px rgba(20,60,120,.12); }

.hint { text-align: center; font-size: 12.5px; color: #8b7fb0; line-height: 1.7; margin-top: 16px; }

@media (max-width: 560px) {
  .wrap { padding: 14px 12px 36px; }
  .hero { padding: 16px 16px; border-radius: 20px; }
  .hero h1 { font-size: 22px; }
  .board { padding: 16px 13px; border-radius: 20px; }
  .pc { width: 60px; height: 86px; font-size: 30px; border-radius: 12px; }
  .pc.big { width: 76px; height: 108px; font-size: 38px; }
  .pc.sm { width: 46px; height: 66px; font-size: 22px; }
  .opt { font-size: 18px; padding: 14px 16px; min-width: 64px; }
  .ask { font-size: 17px; }
  .hand { gap: 8px; }
}