/* Layout pass, 6 Nov: the doorway is the stage, the words frame it. */
#app.wrap{display:flex;flex-direction:column;align-items:stretch}
#title{order:1;text-align:center;text-wrap:balance;margin:10px auto 0;max-width:15em;font-size:clamp(30px,8.4vw,44px);line-height:1.12}
#title::before{content:"";display:block;width:12px;height:18px;margin:0 auto 10px;
  background:radial-gradient(ellipse at 50% 70%,#fff6dc 0 28%,#f0c66a 45%,rgba(200,164,90,0) 72%);
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;filter:drop-shadow(0 0 8px rgba(240,198,106,.85));
  animation:lookFlick 1.6s ease-in-out infinite alternate}
#lead{order:2;text-align:center;text-wrap:balance;margin:10px auto 0;max-width:24em;color:#c8a45a;font-size:15px;letter-spacing:.02em}
#scene{order:3;margin:12px -16px 0;border:0!important;border-radius:0!important;background:transparent!important;
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to bottom,transparent 0,#000 7%,#000 88%,transparent 100%),linear-gradient(to right,transparent 0,#000 6%,#000 94%,transparent 100%);mask-composite:intersect}
#help{order:4;display:flex;justify-content:center;align-items:center;gap:0;margin:6px auto 0}
#help .link+.link::before{content:"\00b7";display:inline-block;margin:0 14px;color:#6a5228;text-decoration:none}
#hint{order:5;text-align:center;text-wrap:balance}
#status{order:6;text-align:center;margin:-56px auto 0;position:relative;z-index:2;font-size:15px;
  padding:6px 14px;background:rgba(8,6,4,.72);border-radius:999px;align-self:center}
#status:empty{display:none}
#greeting{order:7;position:relative;z-index:3}
.scene.found~#greeting{margin-top:14px}
#greeting .card{margin-left:auto;margin-right:auto;max-width:21em;transform:rotate(-1.2deg)}
#greeting .card h2{text-wrap:balance}
#greeting .row{justify-content:center}
#make{order:8}
#make-title{text-align:center}
.more{order:9}
@keyframes lookFlick{from{transform:scale(1) translateY(0);opacity:.85}to{transform:scale(1.08,1.14) translateY(-1px);opacity:1}}
@media (prefers-reduced-motion:reduce){#title::before{animation:none}}
@media (min-width:700px){#scene{margin-left:0;margin-right:0}}
#help[hidden],#hint[hidden],#greeting[hidden],#make[hidden]{display:none!important}
#lead .l2{display:block}