.mlmj{
  padding:42px 20px;
  border:1px solid #cfa85d;
  border-radius:22px;
  background:
    radial-gradient(circle at 14% 10%,rgba(218,179,86,.12),transparent 24%),
    radial-gradient(circle at 88% 88%,rgba(36,99,78,.07),transparent 27%),
    linear-gradient(180deg,#fffefb,#fbf4e8);
  color:#42392d;
  font-family:Georgia,"Times New Roman",serif;
  box-shadow:0 13px 36px rgba(63,46,17,.09);
}
.mlmj-intro{
  max-width:760px;
  margin:0 auto 24px;
  text-align:center;
}
.mlmj-intro h2{
  margin:0 0 10px;
  color:#175846;
  font-size:36px;
  font-weight:500;
}
.mlmj-intro p{
  margin:0;
  color:#746957;
  font-family:system-ui,-apple-system,sans-serif;
  font-size:16px;
  line-height:1.65;
}
.mlmj-scene{
  position:relative;
  max-width:1060px;
  height:470px;
  margin:0 auto;
  overflow:hidden;
  border:1px solid #cfa85d;
  border-radius:22px;
  background:
    radial-gradient(circle at 50% 46%,rgba(255,255,255,.99) 0%,rgba(255,250,240,.97) 55%,rgba(246,234,212,.96) 100%);
  box-shadow:
    inset 0 0 0 4px rgba(255,255,255,.48),
    inset 0 0 72px rgba(184,140,54,.09),
    0 14px 30px rgba(65,46,16,.08);
}
.mlmj-ornament{
  position:absolute;
  top:15px;
  left:50%;
  z-index:5;
  transform:translateX(-50%);
  color:#c69a43;
  font-size:17px;
  letter-spacing:9px;
}
.mlmj-fairy{
  position:absolute;
  left:50%;
  top:50%;
  width:390px;
  height:390px;
  transform:translate(-50%,-44%);
  z-index:1;
  pointer-events:none;
  background:url("magic/fee-doree.png") center/contain no-repeat;
  opacity:.30;
  filter:drop-shadow(0 5px 12px rgba(126,83,18,.12));
  animation:mlmjFairyPulse 5.5s ease-in-out infinite;
}
.mlmj-deck,
.mlmj-pile{
  position:absolute;
  width:112px;
  height:192px;
}
.mlmj-deck{
  left:50%;
  top:142px;
  z-index:3;
  transform:translateX(-50%);
}
.mlmj-deck::before,
.mlmj-deck::after,
.mlmj-deck .mlmj-face,
.mlmj-pile::before,
.mlmj-pile::after,
.mlmj-pile .mlmj-face{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid rgba(190,154,79,.42);
  border-radius:10px;
  background:url("cards/back.webp") center/cover no-repeat;
  box-shadow:0 8px 18px rgba(45,31,11,.18);
}
.mlmj-deck::before,
.mlmj-pile::before{transform:translate(4px,4px)}
.mlmj-deck::after,
.mlmj-pile::after{transform:translate(8px,8px)}
.mlmj-face{z-index:2}
.mlmj-shuffle-scene,
.mlmj-cut-scene,
.mlmj-fan-scene{
  position:absolute;
  inset:0;
  z-index:3;
  opacity:0;
  pointer-events:none;
}
.mlmj-shuffle-scene.is-active,
.mlmj-cut-scene.is-active,
.mlmj-fan-scene.is-active{
  opacity:1;
  pointer-events:auto;
}
.mlmj-mix-card{
  position:absolute;
  left:50%;
  top:175px;
  width:64px;
  height:110px;
  margin-left:-32px;
  border:1px solid rgba(190,154,79,.35);
  border-radius:7px;
  background:url("cards/back.webp") center/cover no-repeat;
  box-shadow:0 3px 7px rgba(47,33,12,.13);
}
.mlmj-pile{
  top:142px;
  left:calc(50% - 56px);
}
.mlmj-cut-scene.is-active .mlmj-pile-a{
  animation:mlmjCutBottom 2.5s ease both;
}
.mlmj-cut-scene.is-active .mlmj-pile-b{
  animation:mlmjCutTop 2.5s ease both;
}
.mlmj-fan-canvas{
  position:relative;
  width:100%;
  height:470px;
}
.mlmj-fan-card{
  position:absolute;
  left:50%;
  top:82px;
  width:70px;
  height:120px;
  margin-left:-35px;
  padding:0;
  border:0;
  border-radius:7px;
  background:url("cards/back.webp") center/cover no-repeat;
  box-shadow:0 5px 10px rgba(48,33,11,.17);
  transform:
    translateX(var(--x))
    translateY(var(--y))
    rotate(var(--angle));
  transform-origin:50% 355px;
  transition:
    transform .16s ease,
    filter .16s ease,
    opacity .16s ease;
  cursor:pointer;
}
.mlmj-fan-card:hover,
.mlmj-fan-card:focus-visible{
  z-index:999!important;
  filter:drop-shadow(0 0 9px rgba(205,158,59,.65));
  transform:
    translateX(var(--x))
    translateY(calc(var(--y) - 18px))
    rotate(var(--angle))
    scale(1.05);
}
.mlmj-fan-card.is-selected{
  z-index:1200!important;
  filter:drop-shadow(0 0 15px rgba(205,158,59,.88));
  transform:
    translateX(var(--x))
    translateY(calc(var(--y) - 26px))
    rotate(var(--angle))
    scale(1.09);
}
.mlmj-fan-card.is-dimmed{
  opacity:.18;
  filter:saturate(.25);
}
.mlmj-hint{
  position:absolute;
  left:50%;
  bottom:14px;
  transform:translateX(-50%);
  color:#9a7330;
  font-family:system-ui,-apple-system,sans-serif;
  font-size:12px;
  font-weight:700;
}
.mlmj-controls{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}
.mlmj-primary,
.mlmj-secondary,
.mlmj-guidance{
  display:inline-block;
  border:1px solid #bc8b39;
  border-radius:999px;
  padding:12px 25px;
  background:linear-gradient(180deg,#e1c58f,#d2aa65);
  color:#2c2112!important;
  font:600 16px Georgia,"Times New Roman",serif;
  text-decoration:none!important;
  cursor:pointer;
  box-shadow:0 7px 17px rgba(106,72,18,.13);
}
.mlmj-primary:hover,
.mlmj-secondary:hover,
.mlmj-guidance:hover{
  transform:translateY(-1px);
}
.mlmj-reveal{
  max-width:940px;
  margin:10px auto 0;
}
.mlmj-card-result{
  display:grid;
  grid-template-columns:290px minmax(0,1fr);
  gap:36px;
  align-items:center;
}
.mlmj-card-flip{
  width:260px;
  aspect-ratio:198/340;
  margin:auto;
  perspective:1400px;
}
.mlmj-card-inner{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition:transform 1.05s cubic-bezier(.2,.75,.25,1);
}
.mlmj-card-flip.is-revealed .mlmj-card-inner{
  transform:rotateY(180deg);
}
.mlmj-card-back,
.mlmj-card-front{
  position:absolute;
  inset:0;
  overflow:hidden;
  border-radius:15px;
  backface-visibility:hidden;
  box-shadow:0 18px 36px rgba(40,28,10,.22);
}
.mlmj-card-front{
  transform:rotateY(180deg);
}
.mlmj-card-back img,
.mlmj-card-front img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}
.mlmj-message{
  padding:30px;
  border:1px solid #d6bc84;
  border-radius:16px;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 27px rgba(67,48,16,.07);
}
.mlmj-kicker{
  color:#b1812c;
  font-family:system-ui,-apple-system,sans-serif;
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.mlmj-message h3{
  margin:9px 0 18px;
  color:#175846;
  font-size:32px;
  font-weight:500;
}
.mlmj-message>p#mlmj-card-message{
  margin:0;
  color:#453f35;
  font-family:system-ui,-apple-system,sans-serif;
  font-size:18px;
  line-height:1.75;
}
.mlmj-keyword{
  display:flex;
  align-items:center;
  gap:12px;
  margin:22px 0;
  padding:13px 16px;
  border-left:3px solid #ba8c38;
  background:#fbf5e7;
}
.mlmj-keyword span{
  color:#796a50;
  font-family:system-ui,-apple-system,sans-serif;
  font-size:13px;
}
.mlmj-keyword strong{
  color:#175846;
  font-size:21px;
}
.mlmj-note{
  color:#877b68;
  font-family:system-ui,-apple-system,sans-serif;
  font-size:13px;
}
.mlmj-guidance{
  margin-top:10px;
}
.mlmj-restart-wrap{
  margin-top:26px;
  text-align:center;
}
@keyframes mlmjFairyPulse{
  0%,100%{
    opacity:.25;
    transform:translate(-50%,-44%) scale(1);
  }
  50%{
    opacity:.34;
    transform:translate(-50%,-44%) scale(1.025);
  }
}
@keyframes mlmjCutBottom{
  0%{transform:translate(0,0);z-index:3}
  28%{transform:translate(-170px,0) rotate(-2deg);z-index:3}
  58%{transform:translate(-170px,18px) rotate(-2deg);z-index:3}
  78%{transform:translate(0,18px) rotate(0);z-index:2}
  100%{transform:translate(0,12px);z-index:2}
}
@keyframes mlmjCutTop{
  0%{transform:translate(0,0);z-index:2}
  28%{transform:translate(0,0);z-index:2}
  58%{transform:translate(0,0);z-index:2}
  78%{transform:translate(0,-8px);z-index:6}
  100%{transform:translate(0,-4px);z-index:6}
}
@media(max-width:760px){
  .mlmj{padding:30px 12px}
  .mlmj-intro h2{font-size:29px}
  .mlmj-scene{height:410px}
  .mlmj-fairy{width:300px;height:300px}
  .mlmj-fan-canvas{height:410px}
  .mlmj-fan-card{
    top:75px;
    width:52px;
    height:89px;
    margin-left:-26px;
    transform-origin:50% 300px;
  }
  .mlmj-deck,
  .mlmj-pile{
    width:92px;
    height:158px;
  }
  .mlmj-deck{top:128px}
  .mlmj-pile{top:128px;left:calc(50% - 46px)}
  .mlmj-mix-card{
    top:157px;
    width:50px;
    height:86px;
    margin-left:-25px;
  }
  .mlmj-card-result{
    grid-template-columns:1fr;
    gap:24px;
  }
  .mlmj-card-flip{
    width:min(245px,76vw);
  }
  .mlmj-message{
    padding:24px 18px;
    text-align:center;
  }
  .mlmj-keyword{
    justify-content:center;
    text-align:left;
  }
}
@media(prefers-reduced-motion:reduce){
  .mlmj-fairy,
  .mlmj-pile-a,
  .mlmj-pile-b,
  .mlmj-card-inner{
    animation:none!important;
    transition:none!important;
  }
}
.mlmj-login{padding:12px 0}.mlmj-login-card{max-width:470px;margin:0 auto;padding:34px;border:1px solid #d2ae68;border-radius:20px;background:rgba(255,255,255,.94);text-align:center;box-shadow:0 13px 32px rgba(62,43,14,.10)}
.mlmj-login-icon{display:block;color:#c6953d;font-size:29px;margin-bottom:4px}.mlmj-login-card h2{margin:0 0 8px;color:#175846;font-size:32px;font-weight:500}.mlmj-login-card>p{margin:0 0 24px;color:#746957;font-family:system-ui,-apple-system,sans-serif}
.mlmj-login-card form{display:grid;gap:15px;text-align:left}.mlmj-login-card label{font-family:system-ui,-apple-system,sans-serif;font-weight:700;color:#544a3b}.mlmj-login-card input{box-sizing:border-box;width:100%;margin-top:6px;padding:12px 14px;border:1px solid #ccb783;border-radius:10px;background:#fff;font-size:16px}.mlmj-login-card button{justify-self:center;margin-top:4px}.mlmj-login-error,.mlmj-api-error{margin:10px auto 0!important;padding:11px 14px;border:1px solid #d79a9a;border-radius:9px;background:#fff2f2;color:#9e2626!important;text-align:center;font-family:system-ui,-apple-system,sans-serif}
.mlmj-member-bar{display:flex;justify-content:space-between;align-items:center;max-width:1060px;margin:0 auto 20px;padding:10px 15px;border:1px solid #dbc28d;border-radius:12px;background:rgba(255,255,255,.8);font-family:system-ui,-apple-system,sans-serif;color:#655a49}.mlmj-member-bar button{border:0;background:none;color:#8b6425;text-decoration:underline;cursor:pointer}
.mlmj-blocked{max-width:760px;margin:0 auto 18px;padding:16px 20px;border:1px solid #d4b36e;border-radius:13px;background:#fff9eb;text-align:center}.mlmj-blocked h3{margin:0 0 5px;color:#175846}.mlmj-blocked p{margin:0;color:#736754;font-family:system-ui,-apple-system,sans-serif}
@media(max-width:600px){.mlmj-login-card{padding:26px 18px}.mlmj-member-bar{align-items:flex-start;gap:10px}.mlmj-member-bar button{white-space:nowrap}}