/* ==========================================================================
   覆盖层：弹窗、Toast 与月蚀闪光
   ========================================================================== */

.modal-layer{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px;
  opacity:0;pointer-events:none;transition:opacity .2s ease;
}
.modal-layer.is-open{opacity:1;pointer-events:auto}
.modal-backdrop{position:absolute;inset:0;background:rgba(1,6,8,.8);backdrop-filter:blur(9px)}
.modal{
  position:relative;width:min(430px,100%);padding:27px 28px 22px;border-radius:21px;
  border:1px solid rgba(203,225,207,.17);
  background:linear-gradient(160deg,#0f2628,#071719);
  box-shadow:0 40px 120px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.05);
  text-align:center;opacity:0;transform:translateY(14px) scale(.98);
  transition:transform .24s cubic-bezier(.16,1,.3,1),opacity .24s ease;
}
.modal-layer.is-open .modal{transform:none;opacity:1}
.modal-glyph{
  width:58px;height:58px;margin:0 auto 15px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:27px;color:var(--gold);border:1px solid rgba(230,201,146,.29);
  background:radial-gradient(circle at 35% 30%,rgba(230,201,146,.14),rgba(7,20,22,.4));
  box-shadow:0 0 28px rgba(230,201,146,.07);
}
.modal h3{font-family:var(--serif);font-size:25px;font-weight:500;letter-spacing:.08em;margin:0 0 9px;color:var(--ink)}
.modal p{font-size:13px;line-height:1.85;color:var(--muted);margin:0 auto;max-width:320px}
.modal-reward{
  margin-top:16px;padding:11px 14px;border:1px solid var(--line);border-radius:9px;
  background:rgba(255,255,255,.025);font-family:var(--serif);font-size:17px;
  color:var(--sage2);letter-spacing:.03em;
}
.modal-reward b{color:var(--gold);font-weight:500}
.modal-actions{display:flex;gap:8px;margin-top:20px}
.modal-actions button{
  flex:1;padding:10px 12px;border-radius:9px;border:1px solid var(--line);
  background:rgba(255,255,255,.02);color:var(--muted);font-size:13px;
  letter-spacing:.06em;cursor:pointer;transition:.18s ease;
}
.modal-actions button:hover{border-color:var(--line2);color:var(--ink)}
#modalConfirm{color:var(--sage2);border-color:rgba(184,220,196,.23);background:rgba(184,220,196,.09)}
#modalConfirm:hover{background:rgba(184,220,196,.15)}

/* ---------- Toast ---------- */
.toast-stack{
  position:fixed;right:24px;bottom:22px;z-index:150;display:flex;flex-direction:column;
  gap:7px;align-items:flex-end;pointer-events:none;max-width:calc(100vw - 32px);
}
.toast{
  pointer-events:auto;display:grid;grid-template-columns:20px minmax(0,1fr);gap:8px;align-items:center;
  width:min(320px,calc(100vw - 32px));padding:10px 13px;border:1px solid var(--line);
  border-left:2px solid var(--sage);border-radius:9px;background:rgba(9,25,27,.94);
  box-shadow:0 15px 40px rgba(0,0,0,.3);backdrop-filter:blur(12px);cursor:pointer;
  animation:toastIn .32s cubic-bezier(.16,1,.3,1);transition:opacity .24s ease,transform .24s ease;
}
.toast.gold{border-left-color:var(--gold)}
.toast.leaving{opacity:0;transform:translateX(12px)}
.t-glyph{color:var(--sage);font-family:var(--serif);font-size:18px;text-align:center}
.toast.gold .t-glyph{color:var(--gold)}
.t-title{display:block;font-size:12px;letter-spacing:.03em;color:var(--ink);line-height:1.4}
.t-sub{display:block;font-size:10.5px;color:var(--faint);margin-top:2px;line-height:1.4}

/* ---------- 月蚀 ---------- */
.eclipse{
  position:fixed;inset:0;z-index:120;pointer-events:none;opacity:0;
  background:radial-gradient(circle at 50% 45%,rgba(230,201,146,.38),rgba(3,8,10,.93) 56%,rgba(1,4,5,.98));
}
.eclipse.play{animation:eclipse .95s ease-out forwards}