.late-card-page { --late:#6d59c5; --late2:#4b67c7; --late-soft:#f2effc; }
.picnic-page { --late:#4f9560; --late2:#e5a73e; --late-soft:#eef8ee; }
.cat-page { --late:#8a659f; --late2:#d58a52; --late-soft:#f7eff8; }
.care-page { --late:#d16e7d; --late2:#74a7a0; --late-soft:#fff0f3; }
.birthday-page { --late:#b65db5; --late2:#f0a13d; --late-soft:#fbf0fc; }
.mystery-page { --late:#69518d; --late2:#b88a3f; --late-soft:#f3eff8; }
.weekend-page { --late:#397fb1; --late2:#55a86f; --late-soft:#edf7fb; }
.late-card-page .eyebrow { color:var(--late)!important; }
.late-card-page .hero h1 em { color:var(--late); }
.late-card-page .mission { background:linear-gradient(90deg,var(--late-soft),#fffaf0 58%,#f4f6ff); }
.late-card-page .mission-icon { border-color:color-mix(in srgb,var(--late) 25%,white); }
.late-card-page .mission > div > span,
.late-card-page .mission-goals b { color:var(--late); }
.late-card-page .mission-goals span { border-color:color-mix(in srgb,var(--late) 20%,#e8dfcf); }
.late-scene-card { background:linear-gradient(145deg,var(--late-soft),#f5f6fa); }
.late-card-page .scene {
  background:
    radial-gradient(circle at 20% 12%,rgba(255,255,255,.7),transparent 25%),
    linear-gradient(color-mix(in srgb,var(--late) 20%,#dceafa) 0 64%,color-mix(in srgb,var(--late2) 30%,#d1b18d) 64%);
}
.late-card-page .scene:after {
  content:""; position:absolute; left:0; right:0; top:61%; height:14px;
  background:#f7f2e7; border-top:4px solid rgba(83,89,98,.18);
}
.late-card-page .scene-window {
  left:5%; top:8%; width:25%; height:35%; display:grid; place-items:center;
  border-width:6px; background:linear-gradient(#9cd3ef 65%,#9fd18e 65%);
}
.late-card-page .scene-window span { position:static; font-size:42px; }
.late-banner {
  position:absolute; left:35%; top:7%; z-index:3; padding:8px 14px;
  border:5px solid white; border-radius:12px; background:var(--late);
  color:white; box-shadow:0 7px 14px rgba(45,48,78,.17); transform:rotate(-1deg);
}
.late-banner strong { display:block; font-size:13px; letter-spacing:.08em; }
.late-banner small { display:block; margin-top:2px; color:rgba(255,255,255,.75); font-size:7px; }
.late-board {
  position:absolute; right:4%; top:7%; z-index:3; width:27%; min-height:31%;
  padding:10px; border:5px solid #e0c28c; border-radius:7px; background:#fff9df;
  box-shadow:0 7px 14px rgba(65,54,42,.16); text-align:center;
}
.late-board strong { display:block; color:var(--late); font-size:10px; letter-spacing:.08em; }
.late-board span { display:block; margin-top:8px; font-size:28px; letter-spacing:3px; }
.late-props {
  position:absolute; left:4%; bottom:8%; z-index:3; display:flex; align-items:center;
  justify-content:space-around; width:27%; height:18%; border:6px solid #a97951;
  border-radius:8px; background:#d99f6d; box-shadow:0 24px 0 -11px #845d43;
}
.late-props span { font-size:31px; filter:drop-shadow(0 4px 2px rgba(0,0,0,.12)); }
.late-kit {
  position:absolute; left:32%; bottom:4%; z-index:5; width:41%; height:36%;
  padding:27px 10px 10px; border:6px solid color-mix(in srgb,var(--late) 75%,#333);
  border-radius:19px; background:linear-gradient(145deg,var(--late),var(--late2));
  box-shadow:0 13px 22px rgba(45,48,78,.24);
}
.late-kit > strong {
  position:absolute; left:50%; top:8px; transform:translateX(-50%);
  color:white; font-size:7px; letter-spacing:.12em; white-space:nowrap;
}
.late-card-page .table {
  inset:27px 9px 9px; width:auto; height:auto; display:grid; grid-template-columns:repeat(4,1fr);
  align-content:center; gap:3px; border:0; border-radius:11px; background:rgba(255,255,255,.91);
  box-shadow:inset 0 0 0 3px rgba(50,50,90,.14);
}
.late-card-page .table span { position:static; display:grid; place-items:center; font-size:21px; }
.late-card-page .busra { right:1%; left:auto; bottom:3%; z-index:4; }
.late-card-page .busra span { font-size:96px; }
.late-card-page .busra small { background:var(--late); }
.late-legend { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; margin:9px 7px 0; }
.late-legend span {
  padding:7px 5px; border:1px solid color-mix(in srgb,var(--late) 22%,#dfe5ef);
  border-radius:9px; background:white; color:#66758b; font-size:10px; font-weight:800; text-align:center;
}
@media(max-width:560px){
  .late-card-page .hero h1{font-size:36px}
  .late-banner{left:33%;padding:6px 8px}.late-banner strong{font-size:10px}
  .late-board{width:28%;padding:6px}.late-board span{font-size:21px}
  .late-props{width:27%;border-width:4px}.late-props span{font-size:23px}
  .late-kit{left:30%;width:43%;height:37%;border-width:4px}
  .late-card-page .table span{font-size:17px}
  .late-card-page .busra{right:-3%}.late-card-page .busra span{font-size:74px}
  .late-legend{grid-template-columns:repeat(2,1fr)}
}