/* VastraLens - the wait while a look is being made. See wait.js.
   #busy.gen is the generation wait; plain #busy (short waits) stays a spinner. */

#busy.gen{background:radial-gradient(ellipse at 50% 30%,#8a2333 0%,#6d1825 45%,#3e0b13 100%);
  color:#FAF6EF;justify-content:flex-start;padding:3vh 3vw 2vh;gap:2vh;overflow:hidden;}
#busy.gen .spin{display:none;}
#wLoom{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none;}
#busy.gen #wLoom{display:block;}
#busy > *:not(#wLoom){position:relative;}
#wBody,#wStages,#wThread{display:none;}

/* ---------- heading: the real stage ---------- */
#waitStage{text-align:center;}
#busy.gen #busyMsg{margin-top:0;font-family:Georgia,serif;font-weight:400;
  font-size:clamp(1.5rem,3.2vh,2.2rem);color:#FAF6EF;letter-spacing:.02em;}
#busy.gen #busySub{color:rgba(250,246,239,.72);font-size:.95rem;}
#busy.gen #wStages{display:flex;align-items:center;justify-content:center;gap:.6rem;
  margin-top:1.1rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(250,246,239,.5);}
#wStages span{display:flex;align-items:center;gap:.4rem;transition:color .4s;}
#wStages span::before{content:"";width:.55rem;height:.55rem;border-radius:50%;
  border:1.5px solid currentColor;transition:background .4s,box-shadow .4s;}
#wStages span.now{color:#E8C27A;}
#wStages span.now::before{background:#E8C27A;box-shadow:0 0 10px #E8C27A;}
#wStages span.done{color:rgba(232,194,122,.85);}
#wStages span.done::before{background:rgba(232,194,122,.85);}
#wStages i{width:2.2rem;height:1px;background:rgba(232,194,122,.35);}
#busy.gen #wThread{display:block;width:min(420px,70vw);height:2px;margin:.9rem auto 0;
  background:rgba(232,194,122,.18);border-radius:2px;overflow:visible;}
#wFill{display:block;height:100%;background:linear-gradient(90deg,#B88A3D,#FFE7B0);
  transform-origin:left;transform:scaleX(0);border-radius:2px;
  box-shadow:0 0 8px rgba(255,231,176,.8);}

/* ---------- body: her photo | the game | the shop ---------- */
#busy.gen #wBody{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;align-content:center;gap:3vw;width:100%;max-width:1500px;flex:1;min-height:0;}
.wSide{display:flex;justify-content:center;min-width:0;}
#busy.gen #waitCompare{display:none;gap:1rem;margin:0;}
#busy.gen #waitCompare.on{display:flex;}
#busy.gen .cmp{color:rgba(250,246,239,.75);font-size:.82rem;letter-spacing:.04em;text-align:center;}
#busy.gen .cmp img{height:min(34vh,22vw);max-width:13vw;object-fit:cover;border-radius:12px;
  background:#2a080d;border:1px solid rgba(232,194,122,.45);display:block;margin-bottom:.45rem;}
.cmpNow{position:relative;display:block;border-radius:12px;overflow:hidden;}
.cmpNow::after{content:"";position:absolute;left:0;right:0;height:35%;top:-35%;
  background:linear-gradient(180deg,transparent,rgba(255,231,176,.35),transparent);
  animation:wScan 2.6s ease-in-out infinite;}
@keyframes wScan{to{top:100%}}
#busy.gen #waitStrip{margin:0;width:100%;max-width:340px;text-align:center;}
#busy.gen #waitStrip img{max-height:34vh;border:1px solid rgba(232,194,122,.45);
  background:#2a080d;box-shadow:0 10px 30px rgba(0,0,0,.25);}
#busy.gen #waitCap{color:rgba(250,246,239,.75);}

/* ---------- the game ---------- */
/* Card width from the height left over: grid = 4 card widths tall + gaps. */
#game{--cw:max(44px,min(10.5vw,calc((68vh - 17rem) / 4)));display:flex;flex-direction:column;align-items:center;
  padding:1.2rem 1.4rem 1rem;border-radius:20px;background:rgba(30,5,10,.38);
  border:1px solid rgba(232,194,122,.35);box-shadow:0 20px 50px rgba(0,0,0,.25);}
#game h3{margin:0;font-family:Georgia,serif;font-weight:400;font-size:1.35rem;color:#E8C27A;
  letter-spacing:.02em;}
#game .gSub{margin:.25rem 0 .9rem;font-size:.85rem;color:rgba(250,246,239,.7);}
#mGrid{position:relative;display:grid;grid-template-columns:repeat(4,var(--cw));gap:.6rem;}
.mCard{width:var(--cw);aspect-ratio:3/4;padding:0;border:0;background:none;cursor:pointer;
  perspective:700px;min-height:44px;}
.mCard:focus-visible{outline:2px solid #FFE7B0;outline-offset:3px;border-radius:10px;}
.mIn{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.3,.7,.3,1);}
.mCard.up .mIn{transform:rotateY(180deg);}
.mBack,.mFace{position:absolute;inset:0;border-radius:10px;overflow:hidden;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;}
.mBack{display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 40%,#7A1F2B,#4a0f17);
  border:1px solid rgba(232,194,122,.55);box-shadow:inset 0 0 0 4px #4a0f17,inset 0 0 0 5px rgba(232,194,122,.35);}
.mBack svg{width:48%;height:auto;}
.mCard:active .mBack{filter:brightness(1.15);}
.mFace{transform:rotateY(180deg);border:1px solid rgba(232,194,122,.6);}
.mFace svg{width:100%;height:100%;display:block;}
.mCard.got .mFace{box-shadow:0 0 0 2px #E8C27A,0 0 18px rgba(255,231,176,.7);}
.mCard.got .mIn{animation:wGot .5s ease-out;}
@keyframes wGot{50%{transform:rotateY(180deg) scale(1.08)}}
.gFoot{display:flex;justify-content:space-between;align-items:center;width:100%;
  margin-top:.8rem;font-size:.8rem;color:rgba(250,246,239,.6);gap:1rem;}
#mStatus{margin-top:.75rem;min-height:1.3rem;font-size:.95rem;color:rgba(250,246,239,.85);text-align:center;}
#mStatus.good{color:#FFE7B0;}
#mAgain{margin-top:.6rem;background:#B88A3D;color:#3a0c14;font-weight:700;
  box-shadow:0 3px 0 0 #8a6529;}
#mAgain[hidden]{display:none;}
.mPetal{position:absolute;top:-10px;width:10px;height:14px;pointer-events:none;
  background:#E8C27A;border-radius:0 100% 0 100%;opacity:0;
  animation:wPetal 1.9s ease-in forwards;}
@keyframes wPetal{0%{opacity:1;transform:translate(0,0) rotate(0)}
  100%{opacity:0;transform:translate(var(--dx),110%) rotate(var(--rot))}}
.mPetal:nth-child(3n){background:#FF8FA3;} .mPetal:nth-child(4n){background:#FFF4DC;}

/* ---------- the question and the note ---------- */
#waitAsk{margin-top:1.4rem;text-align:center;display:none;}
#askQ{font-size:1.05rem;color:var(--ink);margin-bottom:.7rem;}
#waitAsk .btn{padding:.6rem 1.1rem;font-size:.92rem;}
#busy.gen #waitAsk{margin:0;}
#busy.gen #askQ{color:#FAF6EF;font-size:.98rem;margin-bottom:.5rem;}
#busy.gen #waitAsk .btn.ghost{background:transparent;color:#FAF6EF;border:1.5px solid rgba(232,194,122,.7);
  box-shadow:none;min-height:44px;}
#waitNote{margin-top:1.4rem;max-width:min(520px,80vw);text-align:center;font-size:.86rem;
  color:var(--gold);font-style:italic;line-height:1.5;min-height:2.4rem;}
#busy.gen #waitNote{margin:0;color:#E8C27A;min-height:0;}

/* ---------- old pieces kept for the plain wait ---------- */
#waitStrip{margin-top:1.6rem;width:min(520px,80vw);text-align:center;}
#waitStrip img{width:100%;max-height:38vh;object-fit:contain;border-radius:14px;
  box-shadow:0 6px 22px rgba(122,31,43,.14);opacity:0;transition:opacity .7s;background:#fff;}
#waitStrip img.show{opacity:1;}
#waitCap{margin-top:.5rem;font-size:.9rem;color:var(--grey);min-height:1.2rem;}
#waitCompare{display:none;gap:1.2rem;margin-top:1.2rem;justify-content:center;}
#waitCompare.on{display:flex;}
.cmp{text-align:center;font-size:.82rem;color:var(--grey);}
.cmp img{height:30vh;max-width:26vw;object-fit:contain;border-radius:12px;background:#fff;
  box-shadow:0 4px 16px rgba(122,31,43,.12);display:block;margin-bottom:.35rem;}

/* A touch monitor stood on its side: game in the middle, photos in a row above. */
@media (orientation: portrait){
  #game{--cw:max(44px,min(19vw,calc((52vh - 17rem) / 4)));}
  #busy.gen #wBody{grid-template-columns:1fr 1fr;grid-template-rows:auto auto;gap:2vh 3vw;}
  #busy.gen #wBody #game{grid-column:1 / -1;grid-row:2;justify-self:center;}
  #busy.gen .cmp img{height:16vh;max-width:22vw;}
  #busy.gen #waitStrip img{max-height:16vh;}
}

@media (prefers-reduced-motion: reduce){
  .mIn{transition:none;} .mCard.got .mIn{animation:none;}
  .cmpNow::after{animation:none;display:none;}
}