/* 第 1 集 · 点认卡（recog 引擎样式；共享部分见 common.css）
   noScenes 主题：规范网格等大卡片，点一下蹦跳跑走 */
html,body{height:100%}
body{overflow-x:hidden}

.wrap{
  position:relative;z-index:1;width:100%;max-width:1100px;margin:0 auto;
  height:100%;display:flex;flex-direction:column;
  padding:calc(var(--sg-header-h,58px) + 14px) 24px 18px;
}
h1{font-size:clamp(1.7rem,4vw,2.3rem)}
.sub{margin:4px 0 4px}

#grid{position:relative;flex:1;min-height:260px;--cw:170px;--ch:150px}

.card{
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
  position:absolute;left:0;top:0;
  width:var(--cw);height:var(--ch);
  transform:translate(-50%,-50%);
  border:none;cursor:pointer;
  background:var(--card-bg,#fff);
  border-radius:var(--card-radius);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  box-shadow:0 4px 14px rgba(90,70,30,.10);
  transition:transform .15s ease,box-shadow .15s ease;
}
.card:hover{transform:translate(-50%,-54%);box-shadow:0 10px 22px rgba(90,70,30,.16)}
.card:active{transform:translate(-50%,-50%) scale(.94)}
.card:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.card .pic{font-size:calc(var(--cw)*.38);line-height:1.15;font-family:'Segoe UI Emoji','Apple Color Emoji',sans-serif}
.card .word{font-size:max(14px,calc(var(--cw)*.105));font-weight:800;letter-spacing:.02em;white-space:nowrap}
.card .zh{font-size:max(11px,calc(var(--cw)*.062));color:var(--ink-soft)}

/* 新一批错峰 pop-in（animationDelay 期间用 backwards 保持不可见） */
.card.pop{animation:cardIn .45s cubic-bezier(.34,1.56,.64,1) backwards}
@keyframes cardIn{
  0%{transform:translate(-50%,-50%) scale(.2);opacity:0}
  70%{transform:translate(-50%,-50%) scale(1.12);opacity:1}
  100%{transform:translate(-50%,-50%) scale(1)}
}
/* 跑走中：跟手帧驱动，禁掉过渡与指针 */
.card.run{transition:none;z-index:6;pointer-events:none}

@media (max-width:760px){
  .wrap{padding-bottom:90px}
}