/* 奶娃工厂 · 样式（本地字体栈，无外链依赖） */
:root{
  --cream:#FFF6EA;
  --cream2:#FFE7D0;
  --card:#FFFFFF;
  --ink:#6B4B3A;
  --ink2:#A98A78;
  --gold:#FFC94D;
  --pink:#FF9EB5;
  --mint:#6FD3B8;
  --sky:#8AD4F0;
  --line:rgba(107,75,58,.10);
  --shadow:0 6px 20px rgba(160,110,80,.16);
  --radius:18px;
  color-scheme:light;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0}
body{
  font-family:system-ui,-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at 12% 8%, #FFF3DF 0 22%, transparent 22.5%),
    radial-gradient(circle at 88% 4%, #FFE6EE 0 18%, transparent 18.5%),
    radial-gradient(circle at 50% 100%, #FFF0DC 0 30%, transparent 30.5%),
    linear-gradient(160deg,var(--cream),var(--cream2));
  background-attachment:fixed;
  overflow:hidden;
  overscroll-behavior:none;
  touch-action:manipulation;
  user-select:none;-webkit-user-select:none;
}
#app{
  position:fixed;inset:0;display:flex;flex-direction:column;
  padding:calc(env(safe-area-inset-top) + 8px) 10px calc(env(safe-area-inset-bottom) + 8px);
  gap:8px;
}

/* ---------- 顶部信息条 ---------- */
.hud{display:flex;align-items:center;gap:8px;min-height:44px}
.logo{display:flex;align-items:center;gap:7px;font-weight:800;font-size:16px;letter-spacing:.5px}
.logo img{width:32px;height:32px;filter:drop-shadow(0 3px 6px rgba(190,130,100,.28))}
.hud-right{margin-left:auto;display:flex;align-items:center;gap:6px}
.pill{
  display:flex;align-items:center;gap:5px;background:var(--card);
  border-radius:999px;padding:6px 11px;box-shadow:var(--shadow);
  font-weight:800;font-size:14px;min-width:64px;justify-content:center;
  border:1px solid var(--line);
}
.pill i{font-style:normal;font-size:13px}
.pill b{font-variant-numeric:tabular-nums;color:#E0873F}
.icon{
  width:38px;height:38px;border:none;border-radius:13px;background:var(--card);
  box-shadow:var(--shadow);font-size:16px;line-height:1;cursor:pointer;
  border:1px solid var(--line);
}
.icon:active{transform:scale(.94)}

/* ---------- 车间 ---------- */
.stage{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.grid{
  --cols:5;--rows:6;
  width:100%;height:100%;
  display:grid;
  grid-template-columns:repeat(var(--cols),1fr);
  grid-template-rows:repeat(var(--rows),1fr);
  gap:6px;
  padding:8px;
  background:linear-gradient(180deg,#FFFDF9,#FFF3E4);
  border-radius:var(--radius);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.75),var(--shadow);
  border:1px solid var(--line);
}
.cell{
  position:relative;border-radius:13px;
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 0 0 1.5px rgba(200,160,130,.13);
  display:flex;align-items:center;justify-content:center;
  font-size:clamp(20px,6.4vw,32px);
  transition:background .15s,transform .12s,box-shadow .15s;
  overflow:hidden;
}
.cell.empty::after{
  content:"";width:26%;height:26%;border-radius:50%;
  background:rgba(200,160,130,.10);
}
.cell.has{background:linear-gradient(180deg,#FFFFFF,#FFF6EA);cursor:pointer}
.cell .glyph{
  position:relative;z-index:1;line-height:1;
  filter:drop-shadow(0 2px 3px rgba(150,100,70,.25));
  animation:pop .22s ease-out;
}
.cell .ring{
  position:absolute;inset:12%;border-radius:50%;
  background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.95),transparent 62%);
  opacity:.85;pointer-events:none;
}
.cell.sel{
  transform:translateY(-3px) scale(1.05);
  background:linear-gradient(180deg,#FFF9E4,#FFEFC7);
  box-shadow:0 0 0 3px var(--gold),0 8px 18px rgba(230,170,60,.35);
  z-index:3;
}
.cell.flash{animation:flash .34s ease-out}
.cell.deny{animation:shake .3s}
.cell.born .glyph{animation:born .32s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes born{0%{transform:scale(.2) rotate(-14deg)}70%{transform:scale(1.16)}100%{transform:scale(1)}}
@keyframes flash{0%{background:#FFF3B0;box-shadow:0 0 0 4px #FFD873}100%{background:linear-gradient(180deg,#FFFFFF,#FFF6EA);box-shadow:none}}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* ---------- 底部操作台 ---------- */
.dock{display:flex;flex-direction:column;gap:8px}
.big-btn{
  border:none;border-radius:16px;font-family:inherit;cursor:pointer;
  background:linear-gradient(180deg,#FFD873,#F5A93F);
  color:#fff;font-weight:900;letter-spacing:2px;
  box-shadow:0 6px 0 #DE8F2C,0 10px 20px rgba(222,143,44,.30);
  padding:10px;display:flex;align-items:center;justify-content:center;gap:9px;
  transition:transform .08s,box-shadow .08s;
}
.big-btn:active{transform:translateY(4px);box-shadow:0 2px 0 #DE8F2C,0 4px 10px rgba(222,143,44,.3)}
.big-btn:disabled{background:linear-gradient(180deg,#E8DED4,#D3C6BA);box-shadow:0 5px 0 #BCAFA3;color:#fff}
.produce{font-size:19px;min-height:54px}
.produce .b-emoji{font-size:22px}
.produce .b-text{font-size:19px}
.produce .b-sub{
  font-size:11px;font-weight:700;letter-spacing:0;
  background:rgba(255,255,255,.35);border-radius:999px;padding:3px 8px;
}

.sel-card{
  display:flex;align-items:center;gap:9px;
  background:var(--card);border-radius:15px;padding:8px 10px;
  box-shadow:var(--shadow);border:1px solid var(--line);min-height:56px;
}
.sel-thumb{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(180deg,#FFF8EC,#FFEEDA);
  display:flex;align-items:center;justify-content:center;font-size:22px;
  box-shadow:inset 0 0 0 1.5px rgba(200,160,130,.15);
}
.sel-info{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.sel-info b{font-size:14px}
.sel-info span{font-size:11px;color:var(--ink2)}
.mini{
  border:none;border-radius:11px;padding:9px 12px;font-family:inherit;
  font-weight:800;font-size:13px;cursor:pointer;color:#fff;
}
.mini:disabled{opacity:.42}
.mini.sell{background:linear-gradient(180deg,#7BD8BE,#43B394)}
.mini.trash{background:linear-gradient(180deg,#FFB0B0,#EE7C7C)}

.shop{
  display:grid;grid-template-columns:1fr 1fr;gap:7px;
}
.shop-btn{
  border:1px solid var(--line);background:var(--card);border-radius:14px;
  padding:8px 10px;text-align:left;font-family:inherit;cursor:pointer;
  box-shadow:var(--shadow);display:flex;flex-direction:column;gap:1px;
  min-height:50px;justify-content:center;
}
.shop-btn:active{transform:scale(.97)}
.shop-btn b{font-size:13.5px;color:var(--ink)}
.shop-btn em{font-style:normal;font-size:11px;font-weight:800;color:#E0873F}
.shop-btn.wide{grid-column:1 / -1;text-align:center;align-items:center}
.shop-btn.danger b{color:#E06A6A}
.shop-btn.danger em{color:#C08A8A}
.shop-btn.locked{opacity:.55}

/* ---------- 提示 ---------- */
.toast{
  position:absolute;left:50%;top:12px;transform:translate(-50%,-16px);
  background:rgba(107,75,58,.92);color:#fff;font-size:13px;font-weight:700;
  padding:8px 14px;border-radius:999px;opacity:0;pointer-events:none;
  transition:opacity .2s,transform .2s;white-space:nowrap;z-index:6;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 弹窗 ---------- */
.mask{
  position:fixed;inset:0;background:rgba(90,60,45,.42);backdrop-filter:blur(3px);
  display:none;align-items:center;justify-content:center;z-index:20;padding:20px;
}
.mask.show{display:flex}
.modal{
  width:100%;max-width:400px;max-height:78vh;overflow:auto;
  background:linear-gradient(180deg,#FFFDF9,#FFF4E6);
  border-radius:22px;padding:18px;box-shadow:0 18px 50px rgba(120,70,45,.35);
  border:1px solid rgba(255,255,255,.8);
}
.modal h2{margin:0 0 10px;font-size:18px;text-align:center}
.modal-body{font-size:13.5px;line-height:1.75;color:#7A5A48}
.modal-body ul{padding-left:18px;margin:6px 0}
.modal-body li{margin:3px 0}
.modal-body .k{color:#E0873F;font-weight:800}
.modal .big-btn{margin-top:14px;width:100%;letter-spacing:1px;font-size:15px}

#fx{position:fixed;inset:0;pointer-events:none;z-index:10}

/* 小屏收紧 */
@media (max-height:640px){
  .logo span{display:none}
  .produce{min-height:48px;padding:8px}
  .shop-btn{min-height:44px;padding:6px 9px}
  .grid{gap:5px}
}
@media (max-width:360px){
  .pill{min-width:56px;font-size:13px;padding:5px 9px}
  .icon{width:34px;height:34px}
}