:root{
  --brand-yellow: #f8e828;         /* 从你LOGO取样的黄 */
  --text: #222;
  --sub: #666;
  --bg: #fafafa;
  --card: #fff;
  --border: #eaeaea;
  --radius: 16px;
  --shadow: 0 6px 24px rgba(0,0,0,.06);
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  color:var(--text);
  background:var(--bg);
}

.page{
  min-height:100%;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:24px;
  padding: clamp(12px, 2.5vw, 28px);
}

/* 左侧品牌（在窄屏会自动换行到顶部） */
.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{
  width: clamp(36px, 6vw, 56px);
  height: clamp(36px, 6vw, 56px);
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  box-shadow: var(--shadow);
}
.brand-text{
  font-size: clamp(16px, 2.4vw, 22px);
  font-weight: 600;
  letter-spacing: .06em;
}

/* 中间舞台 */
.stage{
  display:grid;
  place-items:center;
}
.grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 2vw, 14px);
  width: min(560px, 92vw);
  background: var(--card);
  padding: clamp(16px, 3vw, 28px);
  border-radius: var(--radius);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
}
.cell{
  aspect-ratio: 1/1;               /* 正方形格子，移动端自适应 */
  display:grid;
  place-items:center;
  font-size: clamp(28px, 8vw, 48px);
  font-weight: 700;
  border:1px solid var(--border);
  border-radius: 12px;
  background:#fff;
  user-select:none;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s;
}
.cell.revealed{
  transform: scale(1.03);
  box-shadow: 0 8px 18px rgba(0,0,0,.08);
}
.cell .char{
  opacity:0;
  transform: translateY(8px);
  animation: show .38s forwards cubic-bezier(.2,.8,.2,1);
}
.cell .char.yellow{
  color: var(--brand-yellow);
  text-shadow: 0 1px 0 rgba(0,0,0,.04);
}
@keyframes show{
  to{ opacity:1; transform: translateY(0); }
}

.hint{
  margin: 14px 0 0;
  color: var(--sub);
  font-size: clamp(12px, 2.2vw, 14px);
  text-align:center;
}

.foot{
  text-align:center;
  color:var(--sub);
}
.foot a{ color:#1677ff; text-decoration:none; }
.foot a:hover{ text-decoration:underline; }

/* 深色模式轻适配 */
@media (prefers-color-scheme: dark) {
  :root{ --bg:#0f1115; --card:#141820; --text:#eaeef6; --sub:#a1a8b3; --border:#202636; }
  .logo{ background:#0b0d11; }
}