/* Promoted destination cards: borrow their visual language from the products themselves. */

/* Seven-card rhythm: three paired rows, then a compact utility exit. */
.card-work{grid-column:span 7}
.card-writing{grid-column:span 5}
.card-dundunsee{grid-column:span 7}
.card-gaming{grid-column:span 5}
.card-cranes{grid-column:span 7}
.card-experiments{grid-column:span 5}
.card-elsewhere{grid-column:span 12;min-height:230px}
.card-elsewhere .card-copy{max-width:560px;margin:auto 0 1.2rem}

/* DunDunSee™: pastel gradient cycles, soft overlapping forms and utility chips. */
.card-dundunsee{
  --card-turn:.4deg;
  --card-glow:#8ebcff;
  --card-bg:
    radial-gradient(circle at 84% 18%,rgba(255,188,214,.94),transparent 24%),
    radial-gradient(circle at 69% 35%,rgba(161,207,255,.92),transparent 30%),
    radial-gradient(circle at 88% 63%,rgba(255,219,163,.82),transparent 27%),
    linear-gradient(145deg,#f8fbff 3%,#e9f4ff 42%,#f8eef7 73%,#fff4df 100%);
  --card-text:#111827;
  --card-muted:#475569;
}
.card-dundunsee::after{
  background:
    radial-gradient(circle at var(--light-x) var(--light-y),rgba(255,255,255,.78),transparent 25%),
    linear-gradient(118deg,rgba(255,255,255,.28),transparent 32%,transparent 70%,rgba(255,255,255,.12));
}
.card-dundunsee .card-kicker::before{box-shadow:0 0 0 4px rgba(142,188,255,.22),0 0 20px rgba(142,188,255,.36)}
.card-dundunsee .card-copy{max-width:470px}
.card-dundunsee .card-copy h2{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:900;
  letter-spacing:-.065em;
}
.card-dundunsee .card-copy h2::after{content:" ✨";font-family:inherit;font-size:.55em;vertical-align:.35em}
.card-dundunsee .card-route{max-width:470px}
.dds-visual{
  --visual-turn:5deg;
  position:absolute;
  z-index:1;
  right:clamp(1rem,3vw,2.2rem);
  top:clamp(1rem,3vw,2rem);
  width:min(42%,265px);
  aspect-ratio:1;
  pointer-events:none;
  filter:drop-shadow(0 18px 26px rgba(56,69,99,.13));
}
.dds-orb{position:absolute;border-radius:50%;filter:blur(.4px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.dds-orb-one{inset:2% 17% 27% 4%;background:linear-gradient(145deg,rgba(254,205,226,.92),rgba(253,186,116,.8));transform:rotate(-8deg)}
.dds-orb-two{inset:18% 0 7% 25%;background:linear-gradient(145deg,rgba(186,230,253,.94),rgba(196,181,253,.84));transform:rotate(7deg)}
.dds-orb-three{inset:42% 38% 0 11%;background:linear-gradient(145deg,rgba(254,240,138,.92),rgba(251,207,232,.92));transform:rotate(-4deg)}
.dds-wordmark{
  position:absolute;
  left:9%;
  top:34%;
  padding:.52rem .72rem;
  border:1px solid rgba(30,41,59,.12);
  border-radius:999px;
  background:rgba(255,255,255,.76);
  color:#0f172a;
  box-shadow:0 8px 18px rgba(51,65,85,.09);
  font-size:clamp(.68rem,1.2vw,.82rem);
  font-weight:950;
  letter-spacing:-.04em;
  backdrop-filter:blur(10px);
}
.dds-metrics{
  position:absolute;
  right:0;
  bottom:2%;
  display:grid;
  gap:.34rem;
}
.dds-metrics b{
  display:block;
  min-width:76px;
  padding:.38rem .55rem;
  border:1px solid rgba(30,41,59,.11);
  border-radius:999px;
  background:rgba(255,255,255,.68);
  color:#334155;
  box-shadow:0 6px 15px rgba(51,65,85,.07);
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.1em;
  text-align:center;
  text-transform:uppercase;
  backdrop-filter:blur(8px);
}

/* Cranes: use the game's actual front-door palette and crane construction language. */
.card-cranes{
  --card-turn:.32deg;
  --card-glow:#f2c94c;
  --card-bg:
    radial-gradient(circle at 79% 22%,rgba(255,247,194,.55),transparent 22%),
    repeating-linear-gradient(135deg,rgba(33,27,7,.055) 0 10px,transparent 10px 24px),
    linear-gradient(142deg,#f6d75e 0%,#f2c94c 52%,#dcae27 100%);
  --card-text:#211b07;
  --card-muted:#5c4a13;
  border-color:rgba(33,27,7,.22);
}
.card-cranes::after{
  background:
    radial-gradient(circle at var(--light-x) var(--light-y),rgba(255,255,255,.34),transparent 25%),
    linear-gradient(118deg,rgba(255,255,255,.16),transparent 28%,transparent 70%,rgba(33,27,7,.035));
}
.card-cranes .card-kicker::before{background:#211b07;box-shadow:0 0 0 4px rgba(33,27,7,.1)}
.card-cranes .card-copy{max-width:500px}
.card-cranes .card-copy h2{
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-weight:950;
  letter-spacing:-.065em;
  text-transform:none;
}
.card-cranes .card-copy h2::after{content:""}
.card-cranes .card-route{max-width:500px}
.crane-splash{
  --visual-turn:2deg;
  position:absolute;
  z-index:1;
  right:clamp(.6rem,2.8vw,2rem);
  top:clamp(.9rem,2.5vw,1.8rem);
  width:min(44%,320px);
  height:205px;
  pointer-events:none;
  filter:drop-shadow(0 12px 18px rgba(33,27,7,.12));
}
.crane-splash i{position:absolute;display:block;font-style:normal}
.mini-crane-base{left:22%;bottom:19px;width:22%;height:9px;border-radius:2px;background:#211b07;box-shadow:-18px 9px 0 -2px rgba(33,27,7,.45),18px 9px 0 -2px rgba(33,27,7,.45)}
.mini-crane-mast{left:30%;top:49px;bottom:29px;width:16px;border:3px solid #211b07;border-top:0;border-bottom:0;background:repeating-linear-gradient(45deg,transparent 0 10px,rgba(33,27,7,.72) 10px 13px,transparent 13px 23px)}
.mini-crane-mast::after{content:"";position:absolute;left:50%;top:-7px;width:20px;height:12px;transform:translateX(-50%);border-radius:3px;background:#7c6d31;box-shadow:inset 0 0 0 3px #211b07}
.mini-crane-jib{left:31%;top:45px;width:59%;height:10px;border-radius:2px;background:#211b07}
.mini-crane-jib::after{content:"";position:absolute;inset:2px 4px;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(242,201,76,.65) 14px 17px,transparent 17px 28px)}
.mini-crane-counter-jib{left:8%;top:45px;width:23%;height:8px;border-radius:2px;background:#3f350f}
.mini-crane-counterweight{left:7%;top:39px;width:24px;height:22px;border:3px solid #665823;border-radius:3px;background:#211b07}
.mini-crane-trolley{left:68%;top:42px;width:18px;height:16px;border:3px solid #5f5221;border-radius:3px;background:#211b07;box-shadow:inset 0 0 0 2px #f7dc6b}
.mini-crane-cable{left:calc(68% + 8px);top:58px;width:2px;height:76px;background:#39320f;transform-origin:top center}
.mini-crane-hook{left:calc(68% + 1px);top:132px;width:16px;height:18px;border:3px solid #211b07;border-top:0;border-left-color:transparent;border-radius:0 0 11px 11px;transform:rotate(4deg)}
.crane-build-label{
  position:absolute;
  right:3%;
  bottom:4%;
  padding:.4rem .55rem;
  border-top:1px solid rgba(33,27,7,.28);
  color:#4b3e10;
  font:800 .55rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.09em;
  text-transform:uppercase;
}
.card-cranes:hover .mini-crane-cable{animation:landing-hook-sway 1.7s ease-in-out infinite alternate}
.card-cranes:hover .mini-crane-hook{animation:landing-hook-sway 1.7s ease-in-out infinite alternate-reverse}
@keyframes landing-hook-sway{from{translate:-2px 0}to{translate:2px 0}}

/* The final utility card is deliberately shallower than the destinations above it. */
.card-elsewhere .elsewhere-visual{top:-70%;right:2%}

@media(max-width:900px){
  .card-work,.card-writing,.card-dundunsee,.card-gaming,.card-cranes,.card-experiments,.card-elsewhere{grid-column:span 6}
  .card-elsewhere{min-height:350px}
  .dds-visual,.crane-splash{opacity:.62}
}

@media(max-width:640px){
  .card-work,.card-writing,.card-dundunsee,.card-gaming,.card-cranes,.card-experiments,.card-elsewhere{grid-column:span 12}
  .card-elsewhere{min-height:330px}
  .dds-visual{width:52%;right:-.4rem;top:.4rem;opacity:.52}
  .crane-splash{width:58%;right:-1rem;top:.4rem;opacity:.58;transform-origin:center}
  .card-dundunsee .card-copy,.card-cranes .card-copy{max-width:78%}
  .card-dundunsee .card-route,.card-cranes .card-route{max-width:78%}
}

@media(prefers-reduced-motion:reduce){
  .card-cranes:hover .mini-crane-cable,.card-cranes:hover .mini-crane-hook{animation:none!important}
}