/* v0.2.3 — vertical development cards, unique world-wonder art, and canonical gemstone cuts. */

/* Canonical Splendor gemstone identity */
.white{--gem-light:#ffffff;--gem-main:#e8edf2;--gem-deep:#8794a2;--gem-ring:#f4f1df;--gem-shape:polygon(50% 0,88% 25%,73% 78%,50% 100%,27% 78%,12% 25%)}
.blue{--gem-light:#9de5ff;--gem-main:#258ad0;--gem-deep:#073d78;--gem-ring:#d7edf8;--gem-shape:polygon(50% 1%,82% 15%,98% 50%,78% 88%,50% 100%,22% 88%,2% 50%,18% 15%)}
.green{--gem-light:#a7ffd3;--gem-main:#27a66f;--gem-deep:#07533b;--gem-ring:#d6f1e3;--gem-shape:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%)}
.red{--gem-light:#ffb0ac;--gem-main:#d9424e;--gem-deep:#751222;--gem-ring:#f5d6d5;--gem-shape:polygon(50% 0,86% 20%,100% 58%,72% 100%,28% 100%,0 58%,14% 20%)}
.black{--gem-light:#85838d;--gem-main:#312f39;--gem-deep:#07070a;--gem-ring:#d8d1c8;--gem-shape:polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%)}
.gold{--gem-light:#fff2a5;--gem-main:#d5a62d;--gem-deep:#71490a;--gem-ring:#ffe29a;--gem-shape:circle(50% at 50% 50%)}

.gem-icon,.bonus-gem,.gem-ribbon i{
  position:relative;
  display:inline-block;
  border:0!important;
  border-radius:0!important;
  background:linear-gradient(135deg,var(--gem-light) 0 16%,var(--gem-main) 17% 58%,var(--gem-deep) 100%)!important;
  clip-path:var(--gem-shape);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.5),inset -4px -5px 8px rgba(0,0,0,.28),0 2px 5px rgba(0,0,0,.55)!important;
  overflow:hidden;
}
.gem-icon::before,.bonus-gem::before,.gem-ribbon i::before{
  content:"";
  position:absolute;
  inset:12%;
  clip-path:inherit;
  border:1px solid rgba(255,255,255,.4);
  background:linear-gradient(145deg,rgba(255,255,255,.38),transparent 42%);
}
.gem-icon::after,.bonus-gem::after,.gem-ribbon i::after{
  content:"";
  position:absolute;
  left:20%;top:13%;width:30%;height:17%;
  border-radius:50%;
  background:rgba(255,255,255,.66);
  filter:blur(.4px);
}
.gem-icon.gold,.gem-ribbon i.gold{border-radius:50%!important;clip-path:circle(50% at 50% 50%)}

/* Round physical token with the correct cut gemstone in its centre. */
.bank-token .chip{
  --token-size:clamp(27px,3vw,42px);
  position:relative;
  width:var(--token-size)!important;
  height:var(--token-size)!important;
  flex:0 0 var(--token-size);
  border-radius:50%!important;
  clip-path:none!important;
  border:3px double rgba(255,255,255,.62)!important;
  background:radial-gradient(circle at 35% 25%,var(--gem-light),var(--gem-ring) 34%,var(--gem-deep) 76%,#090b0e 100%)!important;
  box-shadow:inset 0 4px 7px rgba(255,255,255,.38),inset 0 -5px 8px rgba(0,0,0,.45),0 4px 8px rgba(0,0,0,.65)!important;
  overflow:visible;
}
.bank-token .chip::before{
  content:"";
  position:absolute;
  inset:21%;
  clip-path:var(--gem-shape);
  background:linear-gradient(135deg,var(--gem-light),var(--gem-main) 48%,var(--gem-deep));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),0 2px 4px rgba(0,0,0,.55);
}
.bank-token .chip::after{
  content:"";
  position:absolute;
  left:31%;top:26%;width:17%;height:10%;
  border-radius:50%;background:rgba(255,255,255,.72);
}
.bank-token .chip.gold::before{
  inset:25%;clip-path:polygon(50% 0,61% 34%,98% 36%,68% 57%,78% 94%,50% 72%,22% 94%,32% 57%,2% 36%,39% 34%);
}

/* World-view artwork layer */
.dev-card{isolation:isolate;background:#0a1420!important}
.dev-card::before{display:none!important}
.dev-card .card-art-frame{
  position:absolute!important;
  inset:0!important;
  z-index:1!important;
  overflow:hidden;
  border-radius:inherit;
}
.card-landmark-art{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  transform:scale(1.015);
  filter:saturate(.93) contrast(1.04);
}
.card-art-vignette{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(2,5,9,.12) 0 48%,rgba(2,5,9,.38) 70%,rgba(2,4,7,.88) 100%),
    linear-gradient(90deg,rgba(0,0,0,.16),transparent 25% 75%,rgba(0,0,0,.16));
  box-shadow:inset 0 0 0 1px rgba(255,226,159,.22),inset 0 0 18px rgba(0,0,0,.35);
}
.dev-card .card-top{
  position:absolute!important;
  z-index:4!important;
  left:0;right:0;top:0;
  height:auto!important;
  padding:5px!important;
  align-items:flex-start!important;
}
.dev-card .card-vp{
  min-width:24px;
  min-height:24px;
  display:grid;place-items:center;
  padding:1px 4px;
  border:1px solid rgba(245,214,145,.72);
  border-radius:7px;
  background:rgba(7,10,15,.76);
  color:#fff0c0!important;
  font-size:clamp(17px,1.55vw,25px)!important;
  line-height:1!important;
  text-shadow:0 2px 3px rgba(0,0,0,.85)!important;
  box-shadow:0 3px 7px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.12);
}
.dev-card .bonus-gem{
  width:clamp(24px,2.25vw,34px)!important;
  height:clamp(24px,2.25vw,34px)!important;
  flex:0 0 auto;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.65));
}
.dev-card .card-cost{
  z-index:5!important;
  left:5px!important;right:auto!important;bottom:5px!important;
  max-width:78%;
  gap:2px!important;
}
.dev-card .cost-chip{
  min-width:28px!important;
  padding:2px 5px 2px 3px!important;
  border:1px solid rgba(255,255,255,.22)!important;
  border-radius:999px!important;
  background:rgba(3,5,8,.82)!important;
  box-shadow:0 2px 5px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.08)!important;
  backdrop-filter:blur(2px);
}
.dev-card .cost-chip .gem-icon{width:10px!important;height:10px!important;flex:0 0 10px}
.dev-card .cost-chip b{font-size:clamp(7px,.65vw,10px);color:#fff}
.dev-card.tier-1{border-color:#c9a96b!important}
.dev-card.tier-2{border-color:#a8c1c6!important}
.dev-card.tier-3{border-color:#e2b55c!important;box-shadow:0 8px 20px rgba(0,0,0,.72),0 0 16px rgba(226,181,92,.17)!important}

/* Modal action cards remain vertical too. */
.action-visual .dev-card{
  width:118px!important;
  height:169px!important;
  aspect-ratio:.70!important;
}

/* Compact labels for real gem names */
.bank-token::after{
  content:attr(aria-label);
  position:absolute;
  right:5px;bottom:1px;
  color:#8ba0aa;
  font-size:5px;
  opacity:.8;
}

@media (orientation:landscape) and (max-height:720px){
  .market-board{--world-card-h:clamp(98px,calc((100dvh - 250px)/3),150px);grid-template-columns:calc(var(--world-card-h)*.70) minmax(0,1fr) 50px 68px!important;gap:6px!important}
  .market-row{gap:6px!important}
  .dev-card .card-vp{min-width:19px;min-height:19px;font-size:15px!important;padding:1px 3px}
  .dev-card .bonus-gem{width:21px!important;height:21px!important}
  .dev-card .card-cost{left:3px!important;bottom:3px!important;gap:1px!important}
  .dev-card .cost-chip{padding:1px 3px 1px 2px!important;min-width:22px!important}
  .dev-card .cost-chip .gem-icon{width:7px!important;height:7px!important;flex-basis:7px}
  .dev-card .cost-chip b{font-size:6px!important}
  .bank-token .chip{--token-size:25px}
}