/* 《又空军，但我俩都笑了》—— 视觉：克制的电影感，UI 尽量退到画面后面 */

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

html,body{height:100%}

body{
  background:#04070a;
  display:grid;
  place-items:center;
  overflow:hidden;
  color:#ece9e2;
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Hiragino Sans GB","Source Han Sans SC",sans-serif;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}

#stage{
  position:relative;
  width:min(100vw,177.78vh);
  height:min(100vh,56.25vw);
  background:#080d12;
  overflow:hidden;
  container-type:size;
  box-shadow:0 30px 100px rgba(0,0,0,.92);
}

#scene{position:absolute;inset:0;width:100%;height:100%;display:block}

/* ---------- 顶部 HUD ---------- */
.hud{
  position:absolute;left:3.6%;top:4.4%;
  display:flex;align-items:baseline;gap:1.8cqw;
  opacity:0;transition:opacity 1s ease;pointer-events:none;z-index:6;
}
.hud.on{opacity:1}

.clock{display:flex;align-items:baseline;gap:.55cqw;font-variant-numeric:tabular-nums}
.clock span{
  font-size:max(13px,1.5cqw);font-weight:300;letter-spacing:.14em;color:#f3efe7;
  text-shadow:0 2px 14px rgba(0,0,0,.65);transition:color .6s;
}
.clock i{font-style:normal;font-size:max(8px,.65cqw);letter-spacing:.24em;opacity:.5}

.tacit{display:flex;align-items:center;gap:.5cqw;font-size:max(9px,.62cqw);letter-spacing:.18em;opacity:.55}
.tacit .track{width:6.4cqw;height:2px;background:rgba(255,255,255,.16);border-radius:2px;overflow:hidden}
.tacit .track b{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,#cbb894,#f0e0bd);
  transition:width .7s cubic-bezier(.4,0,.2,1);
}

/* ---------- 台词气泡 ---------- */
.bubble{
  position:absolute;max-width:min(320px,23cqw);
  padding:.62cqw 1cqw;border-radius:.45cqw;
  font-size:max(12px,.88cqw);line-height:1.62;letter-spacing:.04em;
  color:#f1ede4;
  background:rgba(9,13,17,.68);
  border:1px solid rgba(255,255,255,.09);
  -webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
  opacity:0;transform:translate(-50%,8px);
  transition:opacity .38s ease,transform .38s ease;
  pointer-events:none;z-index:7;
}
.bubble.on{opacity:1;transform:translate(-50%,0)}
.bubble em{font-style:normal;opacity:.55;font-size:max(10px,.78cqw);margin-right:.4cqw}
.bubble.a{left:38.7%;top:47%}
.bubble.b{left:60%;top:45.5%}

/* ---------- 字幕 ---------- */
.sub{
  position:absolute;left:0;right:0;bottom:8%;
  padding:0 9%;text-align:center;
  font-size:max(12px,.92cqw);line-height:1.8;letter-spacing:.2em;
  color:rgba(244,240,232,.92);
  text-shadow:0 1px 8px rgba(0,0,0,.9);
  opacity:0;transition:opacity .7s ease;pointer-events:none;z-index:7;
}
.sub.on{opacity:1}

/* ---------- 浮漂提示 ---------- */
.hint{
  position:absolute;left:50%;top:36%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:.55cqw;
  font-size:max(11px,.72cqw);letter-spacing:.34em;color:#ffe2b4;
  text-shadow:0 1px 8px rgba(0,0,0,.95),0 0 18px rgba(255,180,90,.35);
  opacity:0;transition:opacity .28s ease;pointer-events:none;z-index:7;
}
.hint.on{opacity:.92}
.hint em{
  width:.35cqw;height:.35cqw;border-radius:50%;background:#ffd8a3;
  animation:pulse 1.1s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.25)}}

/* ---------- 工作电话 ---------- */
.call{
  position:absolute;inset:0;z-index:20;
  display:grid;place-items:center;
  background:rgba(3,6,9,.5);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  opacity:1;transition:opacity .45s ease;
}
.call.hidden{opacity:0;pointer-events:none}

.call .card{
  width:min(600px,38cqw);padding:2.2cqw 2.4cqw;
  background:rgba(10,14,19,.9);
  border:1px solid rgba(255,255,255,.1);
  border-radius:.7cqw;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
  transform:translateY(0);animation:cardIn .45s cubic-bezier(.2,.8,.3,1);
}
@keyframes cardIn{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}

.call .from{
  font-size:max(10px,.66cqw);letter-spacing:.32em;color:#ffd8a3;opacity:.9;
  padding-bottom:1.1cqw;margin-bottom:1.1cqw;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.call .say{font-size:max(12px,.85cqw);line-height:1.85;letter-spacing:.05em;color:#efeae0;margin-bottom:.65cqw}
.call .say.dim{opacity:.55}
.call .ask{font-size:max(11px,.8cqw);line-height:1.8;color:#c9c2b4;margin:1.1cqw 0 1.5cqw}

.call .choices{display:flex;gap:.7cqw;flex-wrap:wrap}
.call .choices button{
  flex:1;min-width:7cqw;
  padding:.72cqw .6cqw;border-radius:.35cqw;cursor:pointer;
  font-family:inherit;font-size:max(11px,.8cqw);letter-spacing:.08em;
  color:#ded8cb;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  transition:.22s;
}
.call .choices button:hover{background:rgba(235,222,193,.16);border-color:rgba(235,222,193,.6);color:#fff}

/* ---------- 黑屏层 ---------- */
.veil{
  position:absolute;inset:0;z-index:30;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:1.5cqw;padding:5% 8%;
  background:#03060a;
  opacity:1;transition:opacity 1.1s ease;
}
.veil.hidden{opacity:0;pointer-events:none}

.stamp{font-size:max(10px,.68cqw);letter-spacing:.42em;color:rgba(255,255,255,.42)}

/* 微信 */
.wx{display:flex;flex-direction:column;gap:.85cqw;width:min(420px,30cqw);margin:1.4cqw 0 .6cqw}
.wx .row{display:flex;align-items:flex-end;gap:.6cqw;animation:msgIn .5s cubic-bezier(.2,.8,.3,1) both}
.wx .row:nth-child(2){animation-delay:.45s}
.wx .row.me{justify-content:flex-end}
@keyframes msgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.wx .av{
  width:1.8cqw;height:1.8cqw;border-radius:.3cqw;flex:none;
  display:grid;place-items:center;
  font-size:max(10px,.7cqw);color:#9fb0a8;
  background:rgba(120,150,140,.16);
  border:1px solid rgba(255,255,255,.08);
}
.wx .bub{
  position:relative;
  padding:.7cqw .95cqw;border-radius:.4cqw;
  font-size:max(12px,.92cqw);line-height:1.55;letter-spacing:.04em;
  color:#e8e4da;
  background:rgba(38,46,52,.92);
  border:1px solid rgba(255,255,255,.07);
}
.wx .bub.mine{background:rgba(84,116,96,.9);color:#eef3ea}

.caption{
  font-size:max(11px,.78cqw);letter-spacing:.24em;color:rgba(255,255,255,.5);
  animation:fadeIn 1s ease .9s both;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.go{
  margin-top:1.4cqw;
  padding:.85cqw 2.8cqw;border-radius:999px;cursor:pointer;
  font-family:inherit;font-size:max(12px,.86cqw);font-weight:600;letter-spacing:.4em;
  color:#14140f;background:#e8d9b8;border:none;
  transition:.25s;
}
.go:hover{background:#f7ebd0;transform:translateY(-1px)}
.go:active{transform:translateY(0)}

.tiny{font-size:max(9px,.6cqw);letter-spacing:.22em;color:rgba(255,255,255,.26);margin-top:.6cqw}

/* 结束统计 */
.ending .stamp{margin-bottom:.4cqw}
.stats{
  display:grid;grid-template-columns:repeat(3,auto);gap:.7cqw 3.4cqw;
  margin:1.6cqw 0 2cqw;
  animation:fadeIn 1.2s ease .5s both;
}
.stats div{text-align:center}
.stats b{display:block;font-size:max(14px,1.5cqw);font-weight:300;letter-spacing:.04em;color:#efe6d2}
.stats span{display:block;font-size:max(9px,.6cqw);letter-spacing:.24em;color:rgba(255,255,255,.38);margin-top:.35cqw}

.closing{
  font-size:max(13px,1.02cqw);line-height:2.1;letter-spacing:.2em;
  color:rgba(240,234,222,.82);text-align:center;
  animation:fadeIn 1.6s ease 1.1s both;
}

.hidden{display:none}
.veil.hidden{display:flex}