/* 包子 —— 豆沙馅，白白胖胖，光溜溜一个褶儿也没有 */

:root{
  --bg-0:#0E0A07;
  --bg-1:#1C1310;
  --bg-2:#2B1D13;
  --ink:#F3E9D8;
  --ink-dim:#B7A48B;
  --ink-faint:#A08D76;
  --rule:rgba(243,233,216,.13);
  --seal:#B23A2C;
  --warm:#E8AC63;

  --sans:-apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB',
         'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC',
         'WenQuanYi Micro Hei', sans-serif;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ background:var(--bg-0); }

body{
  min-height:100dvh;
  background:
    radial-gradient(78% 62% at 58% 34%, #33220F 0%, rgba(51,34,15,0) 62%),
    radial-gradient(120% 100% at 50% 110%, #241811 0%, rgba(36,24,17,0) 70%),
    var(--bg-1);
  color:var(--ink);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* 灶间的一点光晕，落在桌面上 */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(40% 34% at 50% 30%, rgba(255,196,110,.13), rgba(255,196,110,0) 70%);
}

.page{
  position:relative; z-index:1;
  min-height:100dvh;
  display:grid;
  grid-template-rows:auto 1fr auto;
  gap:clamp(8px,2vh,22px);
  padding:clamp(18px,3.4vw,40px);
}

/* ---------------- 招牌 ---------------- */

.sign{
  display:flex; align-items:center; gap:14px;
  animation:signIn .9s cubic-bezier(.22,.8,.3,1) both;
}
.sign__name{
  font-size:clamp(30px,8.4vw,40px);
  font-weight:500;
  letter-spacing:.16em;
  line-height:1;
  color:#FBF3E4;
  text-shadow:0 0 34px rgba(255,190,110,.28);
}
.sign__kind{
  font-size:12px; letter-spacing:.3em; color:var(--ink-dim);
  padding-left:14px; border-left:1px solid var(--rule);
  line-height:1;
}
.sign__seal{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:4px;
  background:var(--seal); color:#FFF3E6;
  font-size:15px; letter-spacing:0; line-height:1;
  box-shadow:0 4px 14px rgba(178,58,44,.34);
}

/* ---------------- 场面 ---------------- */

.scene{
  position:relative;
  min-height:0;
}
.scene svg{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  min-height:280px;
}

/* ---------------- 底栏 ---------------- */

.bar{
  display:flex; flex-wrap:wrap; align-items:baseline;
  gap:10px 22px;
  padding-top:clamp(10px,1.8vh,18px);
  border-top:1px solid var(--rule);
  animation:barIn 1s .5s cubic-bezier(.22,.8,.3,1) both;
}
.bar__note{
  flex:1 1 200px;
  font-size:13px; letter-spacing:.06em; color:var(--ink-dim);
}

.noscript{
  position:fixed; inset:auto 0 0 0; padding:14px 20px;
  background:#2B1D13; color:var(--ink-dim); font-size:13px; text-align:center;
}

/* ---------------- 蒸汽 ---------------- */
.steam{ opacity:1; filter:blur(18px); pointer-events:none; animation:steamIn .9s ease both; }
@keyframes steamIn{ from{ opacity:0; } to{ opacity:1; } }
.wisp{
  fill:none; stroke:url(#steamGrad); stroke-linecap:round;
  transform-box:fill-box; transform-origin:50% 100%;
  animation:wisp var(--d,6s) linear var(--delay,0s) infinite;
  will-change:transform,opacity;
}
@keyframes wisp{
  0%  { transform:translateY(16px) scaleX(.64); opacity:0; }
  16% { opacity:var(--o,.5); }
  55% { opacity:calc(var(--o,.5) * .74); }
  100%{ transform:translateY(-104px) scaleX(1.3); opacity:0; }
}

/* ---------------- 宽屏：招牌立到左边 ---------------- */

@media (min-width:920px){
  .page{
    grid-template-columns:minmax(92px,150px) minmax(0,1fr);
    grid-template-rows:1fr auto;
    gap:0 clamp(16px,3vw,48px);
  }
  .sign{
    grid-column:1; grid-row:1 / 3;
    flex-direction:column; align-items:flex-start; gap:20px;
    align-self:start;
    padding-top:clamp(4px,4vh,44px);
  }
  .sign__name{
    writing-mode:vertical-rl;
    font-size:clamp(40px,4.6vw,58px);
    letter-spacing:.2em;
  }
  .sign__kind{
    writing-mode:vertical-rl;
    padding:14px 0 0 0;
    border-left:0; border-top:1px solid var(--rule);
    font-size:12.5px;
  }
  .scene{ grid-column:2; grid-row:1; }
  .bar{ grid-column:2; grid-row:2; }
}

/* ---------------- 窄屏 ---------------- */

@media (max-width:560px){
  .page{
    grid-template-rows:auto auto auto;
    align-content:center;
    gap:clamp(16px,4.4vh,40px);
  }
  .scene{ aspect-ratio:720 / 640; }
  .bar{ gap:10px 14px; }
  .bar__note{ flex:1 1 100%; }
  .sign__seal{ width:24px; height:24px; font-size:13px; }
}

@keyframes signIn{ from{ opacity:0; transform:translateY(-12px); } to{ opacity:1; transform:none; } }
@keyframes barIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .steam{ animation:none; opacity:.34; }
  .wisp{ animation:none; }
}