:root{
  --pink:#ff97c2;
  --peach:#ffd0a8;
  --mint:#c8f6e3;
  --cream:#fff8f6;
  --deep:#6a3b4a;
  --app-max-width:980px;
}

/* Reset & 基本布局 */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background-image: url('image/bg.png');
  background-size:cover;
  background-position:center;
  padding:20px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* 主容器 */
#app{

  max-width: var(--app-max-width);
  max-height: calc(100vh - 50px);
  margin: 0 auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,250,252,0.98));
  border-radius: 18px;
  padding: 18px;
  box-shadow: 0 18px 40px rgba(106,59,74,0.12);
  position: relative;
  overflow: hidden;
  display:flex;
  flex-direction:column;
}

/* header */
.header{
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:12px;
  flex:0 0 auto;
}
.logo{
  background:linear-gradient(135deg,var(--pink),var(--peach));
  padding:8px 12px;border-radius:12px;color:#fff;font-weight:700;font-size:18px;
  box-shadow:0 8px 26px rgba(255,150,190,0.12);
}
.subtitle{color:var(--deep);font-size:13px}
.title{font-size:22px;color:var(--deep);margin:8px 0 10px}

/* 主内容区（可滚动） */
main{
  flex:1 1 auto;
  overflow:auto;
  padding-right:8px;
  display:flex;
  flex-direction:column;
}

.section{display:none}
.section.active{display:block}

/* ========== 固定 3x3 网格 ========== */
.cards{
  width:100%;
  max-width: 860px;
  margin: 8px auto 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 固定三列 */
  grid-auto-rows: 1fr;
  gap: 18px;
  justify-items: stretch;
  align-items: stretch;
  padding: 8px;
  box-sizing: border-box;
}

/* 卡片：正方形 */
.card-btn{
  position:relative;
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  border:2px solid rgba(255,150,190,0.18);
  padding:0;
  background: linear-gradient(180deg,#fff,#fff8f2);
  aspect-ratio: 1 / 1;
  min-height: 120px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .14s ease, box-shadow .14s ease;
  box-shadow: 0 10px 24px rgba(106,59,74,0.06);
}
.card-btn:hover{ transform: translateY(-6px); }

/* 卡片内展示图片的容器（使用 background-image，而不是 img[src]） */
.card-image{
  width:100%;
  height:100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display:block;
}

/* 遮罩 */
.card-cover{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  background: linear-gradient(250deg, rgba(255,255,255,0.96), rgba(255,240,245,0.98));
  z-index:20;
  pointer-events:none;
  -webkit-backdrop-filter: blur(14px) saturate(0.75);
  backdrop-filter: blur(14px) saturate(0.75);
  box-shadow: inset 0 0 25px rgba(0,0,0,0.08);
  transition: background .18s ease, transform .18s ease;
}
.card-cover::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(255,255,255,0.48), rgba(255,240,245,0.56));
  pointer-events:none;
  z-index:1;
}
.card-cover .pos{ position:relative; z-index:2; font-weight:900; font-size:28px; color:var(--deep); }
.card-cover .hint{ position:relative; z-index:2; font-size:12px; color:#a06a80; margin-top:6px; }

.card-fallback{ display:none; }

/* 游戏区 */
.toolbar{
  display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex:0 0 auto;
}
#progress{
  background:rgba(255,255,255,0.75);padding:8px 12px;border-radius:999px;border:1px dashed rgba(106,59,74,0.06);font-weight:600;
}
.ghost{background:transparent;border:none;padding:8px 12px;border-radius:10px;cursor:pointer;}

/* 揭示区 */
#scratch-container{
  width:520px;
  height:520px;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  border:6px solid rgba(255,255,255,0.6);
  background:linear-gradient(180deg,#fffaf6,#fff4f8);
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
#reveal-image{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center;background-color:#fff9}
#scratch-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}

.footer{font-size:12px;color:#7a5b67;margin-top:12px;text-align:center;flex:0 0 auto}

/* 小屏优化 */
@media (max-width: 900px){
  .cards{ max-width: calc(100% - 40px); gap:14px; }
  #scratch-container{ height:460px; }
}
@media (max-width: 720px){
  body{ padding:12px; }
  #app{ padding:12px; }
  .cards{ gap:10px; max-width: calc(100% - 32px); }
  .card-cover .pos{ font-size:22px; }
  .card-btn{ min-height: 90px; }
  #scratch-container{ height:340px; }
}