:root{
  --bg1:#FFF7EF;
  --bg2:#FDEBF3;
  --ink:#4A4453;
  --ink-soft:#8B8398;
  --line:#EFE6F0;
  --panel:#FFFFFF;
  --pink:#FF7A9C;
  --pink-deep:#F45B69;
  --shadow:0 10px 30px rgba(120,90,120,.12);
  --shadow-sm:0 4px 14px rgba(120,90,120,.10);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{height:100%;margin:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 100%);
  overscroll-behavior:none;
}

#app{
  position:relative;
  width:100%;
  height:100%;
  max-width:640px;
  margin:0 auto;
  overflow:hidden;
}

.screen{
  position:absolute;
  inset:0;
  display:none;
  flex-direction:column;
  padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
}
.screen.active{display:flex;}

/* ================= 首页 ================= */
.home-head{text-align:center;padding:18px 0 10px;}
.logo{display:flex;gap:6px;justify-content:center;margin-bottom:10px;}
.logo-dot{width:12px;height:12px;border-radius:6px;background:var(--c);box-shadow:0 3px 8px color-mix(in srgb,var(--c) 45%,transparent);}
.home-head h1{
  margin:0;
  font-size:30px;
  letter-spacing:2px;
  background:linear-gradient(100deg,#FF7A9C,#FFB25E);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.sub{margin:6px 0 0;color:var(--ink-soft);font-size:13px;letter-spacing:.5px;}

.mode-switch{display:flex;gap:8px;margin:12px 0 14px;}
.mode-btn{
  flex:1;
  border:1.5px solid var(--line);
  background:var(--panel);
  border-radius:16px;
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:.18s;
  font-family:inherit;color:inherit;
}
.mode-btn b{display:block;font-size:14px;}
.mode-btn i{display:block;font-style:normal;font-size:11px;color:var(--ink-soft);margin-top:3px;line-height:1.4;}
.mode-btn.active{border-color:var(--pink);background:linear-gradient(160deg,#FFF1F5,#FFFFFF);box-shadow:0 6px 18px rgba(255,122,156,.22);}

.levels{
  flex:1;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;
  padding:2px 2px 10px;
  -webkit-overflow-scrolling:touch;
}
.level-card{
  background:var(--panel);
  border-radius:18px;
  padding:10px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  border:1.5px solid transparent;
  transition:.16s;
  display:flex;flex-direction:column;gap:8px;
}
.level-card:active{transform:scale(.97);}
.level-card canvas{width:100%;height:auto;display:block;border-radius:12px;background:#F6F3F8;}
.level-card .lname{font-size:13px;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.level-card .lmeta{font-size:11px;color:var(--ink-soft);display:flex;justify-content:space-between;}
.level-card .lstar{color:#FFC53D;letter-spacing:1px;font-size:12px;}
.home-tip{text-align:center;color:var(--ink-soft);font-size:11.5px;margin:8px 0 0;}

/* ================= 游戏 HUD ================= */
#hud{
  display:flex;align-items:center;gap:10px;
  padding:6px 4px 10px;
}
.icon-btn{
  width:38px;height:38px;flex:0 0 38px;
  border-radius:12px;border:none;
  background:var(--panel);box-shadow:var(--shadow-sm);
  font-size:16px;cursor:pointer;color:var(--ink);
  font-family:inherit;
}
.icon-btn:active{transform:scale(.94);}
.hud-mid{flex:1;text-align:center;}
.hud-name{font-size:15px;font-weight:600;}
.hud-meta{font-size:12px;color:var(--ink-soft);margin-top:2px;font-variant-numeric:tabular-nums;}
.hud-meta .dot{opacity:.5;margin:0 4px;}
#hudTime.warn{color:var(--pink-deep);font-weight:700;}

#refStrip{
  position:relative;
  display:flex;align-items:center;gap:12px;
  height:clamp(72px,15vh,142px);
  background:var(--panel);
  border-radius:16px;
  padding:10px 14px 10px 10px;
  box-shadow:var(--shadow-sm);
  margin-bottom:10px;
  overflow:hidden;
  flex:0 0 auto;
}
#refCanvas{
  height:100%;width:auto;flex:0 0 auto;
  aspect-ratio:1/1;
  border-radius:14px;background:#F6F3F8;
  display:block;
}
.ref-info{flex:1;min-width:0;}
.ref-info b{display:block;font-size:14px;}
.ref-info span{display:block;font-size:11.5px;color:var(--ink-soft);margin-top:4px;line-height:1.5;}
#refMask{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:rgba(246,243,248,.86);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  transition:opacity .2s;
}
#refMask.hide{opacity:0;pointer-events:none;}
#btnPeek{
  border:none;border-radius:12px;
  padding:9px 16px;font-size:13px;font-weight:600;font-family:inherit;
  background:linear-gradient(100deg,#FFF3D6,#FFE7EF);
  color:#B4633A;border:1.5px dashed #FFC98A;cursor:pointer;
}
#btnPeek em{font-style:normal;font-size:10px;opacity:.7;background:#fff;border-radius:6px;padding:1px 5px;margin-left:4px;}
#btnPeek:disabled{opacity:.75;}

#boardWrap{
  position:relative;
  flex:1;
  min-height:0;
  display:flex;
}
#board{
  width:100%;height:100%;
  display:block;
  touch-action:none;
  cursor:pointer;
}

#comboPop{
  position:absolute;
  left:50%;top:52%;
  transform:translate(-50%,-50%) scale(.6);
  font-size:34px;font-weight:800;
  color:#FF2D63;
  text-shadow:
    -3px -3px 0 #fff, 3px -3px 0 #fff, -3px 3px 0 #fff, 3px 3px 0 #fff,
    -4px 0 0 #fff, 4px 0 0 #fff, 0 -4px 0 #fff, 0 4px 0 #fff,
    0 11px 22px rgba(244,91,105,.42);
  opacity:0;pointer-events:none;
  letter-spacing:1px;
}
#comboPop.show{animation:comboPop .72s cubic-bezier(.2,.9,.3,1.2);}
@keyframes comboPop{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-8deg);}
  25%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(3deg);}
  60%{opacity:1;transform:translate(-50%,-60%) scale(1) rotate(0);}
  100%{opacity:0;transform:translate(-50%,-90%) scale(.9);}
}

/* ================= 底部 ================= */
#bottomBar{padding:10px 4px 2px;display:flex;flex-direction:column;gap:9px;}
#palette{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;min-height:34px;}
.swatch{
  display:flex;align-items:center;gap:6px;
  background:var(--panel);border-radius:12px;
  padding:5px 9px 5px 6px;
  box-shadow:var(--shadow-sm);
  border:1.5px solid transparent;
  font-size:12px;cursor:pointer;
  font-variant-numeric:tabular-nums;
  transition:.14s;
}
.swatch .dot-c{width:15px;height:15px;border-radius:50%;box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),inset 0 0 0 2px rgba(255,255,255,.55);}
.swatch .cnt{color:var(--ink-soft);}
.swatch.done{opacity:.42;}
.swatch.sel{border-color:var(--pink);box-shadow:0 6px 16px rgba(255,122,156,.28);transform:translateY(-1px);}

.bar-row{display:flex;align-items:center;gap:10px;}
#progressBar{
  flex:1;height:9px;border-radius:6px;background:#F0E9F2;overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(120,90,120,.10);
}
#progressFill{
  display:block;height:100%;width:0%;
  border-radius:6px;
  background:linear-gradient(90deg,#FFB25E,#FF7A9C);
  transition:width .18s ease-out;
}
.chip-btn{
  border:none;border-radius:11px;padding:7px 12px;
  background:#F3EDF5;color:var(--ink-soft);
  font-size:12px;font-family:inherit;cursor:pointer;
}
.chip-btn.active{background:var(--pink);color:#fff;box-shadow:0 5px 14px rgba(255,122,156,.32);}

/* ================= 结算 ================= */
#result{align-items:center;justify-content:center;overflow-y:auto;}
.card{
  width:100%;max-width:380px;
  background:var(--panel);
  border-radius:24px;
  padding:18px 18px 14px;
  box-shadow:var(--shadow);
  text-align:center;
  animation:cardIn .34s cubic-bezier(.2,.9,.3,1.15);
}
@keyframes cardIn{from{opacity:0;transform:translateY(18px) scale(.96);}to{opacity:1;transform:none;}}
.stars{font-size:26px;color:#FFC53D;letter-spacing:6px;text-shadow:0 3px 10px rgba(255,197,61,.45);}
.stars .off{color:#E7E1EA;}
#resTitle{margin:6px 0 12px;font-size:20px;}
#cardCanvas{width:100%;max-width:252px;height:auto;border-radius:16px;box-shadow:var(--shadow-sm);}
.stats{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:6px;margin:12px 0 14px;
}
.stat{background:#FAF7FB;border-radius:12px;padding:8px 4px;}
.stat b{display:block;font-size:15px;font-variant-numeric:tabular-nums;}
.stat span{font-size:10.5px;color:var(--ink-soft);}
.actions{display:flex;flex-direction:column;gap:8px;}
.btn{
  border:none;border-radius:14px;padding:12px;
  font-size:14px;font-family:inherit;font-weight:600;
  background:#F3EDF5;color:var(--ink);cursor:pointer;
  transition:.15s;
}
.btn:active{transform:scale(.98);}
.btn.primary{background:linear-gradient(100deg,#FFB25E,#FF7A9C);color:#fff;box-shadow:0 8px 20px rgba(255,122,156,.32);}
.btn.ghost{background:#fff;border:1.5px solid var(--line);font-weight:500;font-size:13px;color:var(--ink-soft);}
.btn.ad{
  background:linear-gradient(100deg,#FFF3D6,#FFE7EF);
  color:#B4633A;font-weight:600;position:relative;
  border:1.5px dashed #FFC98A;
}
.btn.ad em{font-style:normal;font-size:10px;opacity:.7;background:#fff;border-radius:6px;padding:1px 5px;margin-left:4px;}
.fineprint{font-size:10.5px;color:#B9B1C2;line-height:1.5;margin:12px 0 2px;}

/* ================= toast ================= */
.toast{
  position:absolute;left:50%;bottom:22%;
  transform:translate(-50%,10px);
  background:rgba(74,68,83,.92);color:#fff;
  padding:9px 16px;border-radius:12px;font-size:12.5px;
  opacity:0;pointer-events:none;transition:.22s;white-space:nowrap;z-index:50;
}
.toast.show{opacity:1;transform:translate(-50%,0);}