/* ===========================================================
   新用户第一次怎么玩（类名以 ob- 开头）
   首页欢迎卡、欢迎热身的三道题（数苹果、比多少、2 + 3）、4 秒没动手的小手、热身完成页、期末大闯关的提醒卡。
   题要大、要清楚：触控目标 ≥ 56px；手机 375px 不横向滚动；动画都尊重“减少动态效果”。
   =========================================================== */

/* ---------- 首页欢迎卡 ---------- */
.ob-card{
  position:relative;z-index:1;width:min(1160px,100%);margin:0 auto 20px;padding:20px 24px;
  display:flex;align-items:center;gap:18px;
  border:2px solid #BFE6D8;border-radius:28px;color:#24463B;
  background:linear-gradient(126deg,#F0FBF6 0%,#E4F6EE 55%,#FFF7E2 100%);
  box-shadow:0 18px 40px rgba(60,150,120,.16),inset 0 1px 0 rgba(255,255,255,.85);
}
.ob-card-pal{flex:none;width:96px;height:96px;display:grid;place-items:center;font-size:64px}
.ob-card-pal svg{width:100%;height:100%}
.ob-card-body{flex:1;min-width:0}
.ob-card h2{margin:0 0 6px;font-size:clamp(21px,2.4vw,28px);line-height:1.3}
.ob-card p{margin:0 0 12px;font-size:16px;color:#4C6F63}
.ob-card-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px}
.ob-card .ob-go{min-height:60px}
.ob-later{
  min-height:44px;padding:0 10px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:#6D8A80;text-decoration:underline;text-underline-offset:3px;
}
.ob-card button:focus:not(:focus-visible),.ob-gate button:focus:not(:focus-visible),.ob-done button:focus:not(:focus-visible){outline:none}
.ob-card button:focus-visible,.ob-gate button:focus-visible,.ob-done button:focus-visible{outline:3px solid #3B7BE0;outline-offset:3px}
@media (max-width:560px){
  .ob-card{flex-direction:column;align-items:flex-start;padding:18px 16px;gap:8px}
  .ob-card-pal{width:76px;height:76px;font-size:50px}
  .ob-card .ob-go{width:100%}
}

/* ---------- 三道题 ---------- */
.ob-apples{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:8px 0}
.ob-apple{
  position:relative;width:76px;height:76px;padding:0;border:3px solid #FFD9C9;border-radius:50%;
  background:#fff;cursor:pointer;display:grid;place-items:center;font-size:44px;line-height:1;
  transition:transform .12s,border-color .12s,background .12s;
}
.ob-apple:active{transform:scale(.94)}
.ob-apple.on{border-color:var(--mint);background:#E9FAF5;cursor:default}
.ob-num{
  position:absolute;right:-6px;top:-6px;min-width:30px;height:30px;padding:0 6px;border-radius:15px;
  display:none;place-items:center;font-size:18px;font-weight:900;color:#fff;background:var(--mint-d);
}
.ob-apple.on .ob-num{display:grid}
.ob-pair{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:14px;padding:6px 0}
.ob-side{
  flex:1 1 140px;max-width:240px;min-height:112px;padding:10px;border:3px solid #FFE0A8;border-radius:22px;background:#FFFBF0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
}
.ob-side b{font-size:17px;color:#8A6214}
.ob-items{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.ob-items i{font-style:normal;font-size:34px;line-height:1.1}
.ob-add{align-items:center}
.ob-add .ob-side{flex:0 1 150px;min-height:96px}
.ob-plus{font-size:38px;font-weight:900;color:var(--accent-d)}
/* 欢迎热身里的选项更大 */
.choices.ob-choices{grid-template-columns:repeat(auto-fit,minmax(110px,1fr));max-width:480px}
.choices.ob-choices .choice{min-height:72px;font-size:30px}

/* ---------- 4 秒没动手：小手 ---------- */
.ob-hint{position:relative}
.ob-hint.ob-pulse{animation:ob-pulse 1.1s ease-in-out infinite}
.ob-hint.ob-still{box-shadow:0 0 0 4px #FFC93C}
.ob-hand{
  position:absolute;right:-4px;bottom:-30px;z-index:3;font-size:38px;line-height:1;pointer-events:none;
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.2));animation:ob-nod 1s ease-in-out infinite;
}
.ob-hand.ob-still{animation:none}
.keypad.ob-hint .ob-hand{right:50%;bottom:6px}
@keyframes ob-pulse{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(255,201,60,.7)}50%{transform:scale(1.07);box-shadow:0 0 0 10px rgba(255,201,60,0)}}
@keyframes ob-nod{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){
  .ob-hint.ob-pulse,.ob-hand,.ob-apple{animation:none;transition:none}
}

/* ---------- 热身完成页 ---------- */
.ob-done{text-align:center}
.ob-done-stars{font-size:54px;letter-spacing:6px;line-height:1.2;margin-bottom:4px}
.ob-done h2{margin:0 0 6px}
.ob-done-lead{margin:0 0 14px;font-size:18px;color:var(--ink2)}
.ob-what{max-width:520px;margin:0 auto 18px;padding:14px 16px;border:2px solid #FFE0A8;border-radius:20px;background:#FFFBF0;text-align:left}
.ob-what b{font-size:18px}
.ob-what p{margin:8px 0 0;font-size:16px;line-height:1.7}
.ob-what .ob-what-ok{font-weight:800;color:#22854F}
.ob-done .racts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}

/* ---------- 期末大闯关的提醒卡 ---------- */
.ob-gate{text-align:center}
.ob-gate-text{max-width:480px;margin:0 auto 18px;font-size:19px;line-height:1.7}
.ob-gate .in-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}