/* style.css - 响应式与移动优化样式 */
:root{
  --bg:#fafafa;
  --card:#ffffff;
  --accent:#2b90ff;
  --text:#222;
  --muted:#666;
  --danger:#e25555;
  --radius:12px;
  --gap:12px;
  --max-width:980px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans CJK JP","Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN", "メイリオ", "Helvetica Neue", Arial;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding-bottom:30px;
  display:flex;
  flex-direction:column;
  align-items:center;
}



/* Topbar */
.topbar{
  width:100%;
  max-width:var(--max-width);
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  gap:10px;
}
.topbar h1{margin:0;font-size:1.2rem}
.status{display:flex;gap:8px;align-items:center}

.container{
  width:100%;
  max-width:var(--max-width);
  padding:12px;
}

/* Level panel: grid of level tiles */
.level-panel{
  display:grid;
  gap:10px;
  grid-template-columns: repeat(auto-fit,minmax(88px,1fr));
}
.level-tile{
  background:var(--card);
  border-radius:10px;
  padding:10px;
  text-align:center;
  box-shadow:0 1px 4px rgba(0,0,0,0.05);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  min-height:88px;
  cursor:pointer;
  user-select:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.level-tile:active{transform:translateY(2px)}
.level-tile.locked{opacity:.45;cursor:not-allowed}
.level-num{font-weight:600;font-size:1rem}
.level-date{font-size:.8rem;color:var(--muted);margin-top:6px}
.level-badge{margin-top:8px;padding:4px 8px;border-radius:999px;font-size:.75rem}

/* Game panel */
.game-panel{
  margin-top:16px;
  background:var(--card);
  border-radius:14px;
  padding:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.06);
}
.game-top{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:10px}
.puzzle-area{
  width:100%;
  aspect-ratio: 4 / 3; /* 常用画布比例；在移动端会缩放 */
  background:linear-gradient(180deg,#f6f8fb,#fff);
  border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
  position:relative;
}
.puzzle-area .hint{color:var(--muted);padding:12px;text-align:center}

/* Controls */
.game-controls{display:flex;gap:8px;justify-content:center;margin-top:10px}
.btn{
  padding:8px 12px;border-radius:10px;border:0;background:#eee;cursor:pointer;font-weight:600;
}
.btn.small{padding:6px 8px;font-size:.9rem;border-radius:8px}
.btn.primary{
  display: block;
  margin: 15px auto 0;
  background:var(--accent);
  color:white
}
.btn.danger{background:var(--danger);color:#fff}

/* Footer */
.footer{max-width:var(--max-width);padding:10px;text-align:center;color:var(--muted);font-size:.85rem}

/* Responsive tweaks */
@media (max-width:640px){
  .topbar{padding:10px}
  .level-panel{grid-template-columns: repeat(auto-fit,minmax(72px,1fr)); gap:8px}
  .level-tile{min-height:74px;padding:8px}
  .puzzle-area{aspect-ratio: 1 / 1} /* 手机上更适合正方形 */
}

/* small accessibility */
.level-tile:focus{outline:3px solid rgba(43,144,255,.14)}

/* 让拼图区域在小屏幕上自适应 */
#grid {
  max-width: 95vw;
  max-height: 70vh;
}
.tile {
  background-size: cover;
  border: 1px solid #ccc;
}
@media (max-width: 600px) {
  #menu button {
    font-size: 14px;
    padding: 6px 10px;
  }
  #successContent img {
    max-height: 200px;
    object-fit: cover;
  }
}