/* CMG Damascus: original folded-steel artwork from tools/build-materials.mjs.
   Placement follows the existing Unslop direction by Damir Sokolovsky
   (@heydamir), CC BY 4.0: rich identity surfaces, quiet operational chrome. */
:root{
 --cmg-damascus:url('public/assets/materials/damascus-flow.svg');
 --cmg-damascus-canvas-size:640px;
 --cmg-damascus-plate-size:360px;
}

/* The game image remains the canvas; the steel appears in its darker margins. */
.app-body :is(.home-play,.team-page-hero){position:relative;isolation:isolate;overflow:hidden}
.app-body :is(.home-play,.team-page-hero)::after{
 content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background-image:var(--cmg-damascus);background-size:var(--cmg-damascus-canvas-size);
 background-position:36% 56%;opacity:.25;mix-blend-mode:screen;
 mask-image:linear-gradient(90deg,#000,transparent 72%);
}
.app-body .team-page-hero::after{
 background-position:right 58%;opacity:.28;
 mask-image:linear-gradient(90deg,transparent 24%,#000 100%);
}

/* A performance plate is the repeatable material detail on the team roster. */
@media(min-width:901px){
 .app-body .team-performance-panel>.team-panel-rating{position:relative;isolation:isolate}
}
.app-body :is(.team-performance-panel>.team-panel-rating,.team-poster .poster-rating)::before{
 content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
 background-image:var(--cmg-damascus);background-size:var(--cmg-damascus-plate-size);
 background-position:58% 42%;opacity:.44;
 mask-image:linear-gradient(115deg,transparent 4%,#000 100%);
}

/* Elite gets a larger material impression, concentrated away from the copy. */
.app-body .commerce-elite-hero{position:relative;isolation:isolate}
.app-body .commerce-elite-hero::before{
 content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
 background-image:var(--cmg-damascus);background-size:768px;background-position:right 44%;
 opacity:.52;mix-blend-mode:screen;
 mask-image:linear-gradient(90deg,transparent 8%,#000 100%);
}

/* Solid rank plates share the engraving; their numbers and outlines stay above it. */
.app-body :is(.profile-rank-emblem,.rank-emblem){isolation:isolate}
.app-body :is(.profile-rank-emblem,.rank-emblem)::before{
 content:'';position:absolute;inset:12% 13% 10%;z-index:-1;pointer-events:none;
 clip-path:polygon(50% 0,100% 15%,94% 68%,80% 83%,50% 100%,20% 83%,6% 68%,0 15%);
 background:#242424 var(--cmg-damascus) 58% 48%/240px;opacity:.88;
}
.app-body .team-page-emblem:not(:has(.team-game-art)){
 background:linear-gradient(130deg,#1a1a1a33,#1a1a1a99),var(--cmg-damascus) center/260px;
}

/* The queue is the action rail, with a softer finish than an identity plate. */
.app-body .play-workspace .queue-bar::before{
 background-image:var(--cmg-damascus);background-size:560px;background-position:65% 56%;
 opacity:.36;mask-image:linear-gradient(90deg,transparent 6%,#000 100%);
}

@media(max-width:900px){
 .app-body .team-poster .poster-rating{isolation:isolate}
 .app-body .team-poster .poster-rating::before{opacity:.58;background-size:320px}
 .app-body .team-poster::before{
  content:'';position:absolute;inset:45% 0 0;z-index:-1;pointer-events:none;
  background-image:var(--cmg-damascus);background-size:600px;background-position:60% 66%;
  opacity:.2;mix-blend-mode:screen;
  mask-image:linear-gradient(180deg,transparent 4%,#000 100%);
 }
}
@media(max-width:700px){
 :root{--cmg-damascus-canvas-size:520px}
 .app-body .commerce-elite-hero::before{background-size:560px;opacity:.4}
 .app-body .home-play::after{opacity:.2}
 .app-body .team-page-hero::after{opacity:.24}
}