/* Seção "O que fica para trás" como luta de arcade: cada atrito é um inimigo derrotado. */
.light-section:has(.friction-grid) .section-heading .eyebrow{
  display:inline-block;padding:7px 10px;background:#0d0b12;color:#f2a65a;
  font-family:"Press Start 2P","Courier New",monospace;font-size:9px;letter-spacing:0;line-height:1.4;box-shadow:3px 3px 0 #dd7136;
}
.light-section:has(.friction-grid) .section-heading h2{
  font-family:"Press Start 2P","Courier New",monospace;font-weight:400;letter-spacing:0;line-height:1.5;
  font-size:clamp(18px,2.8vw,34px);text-shadow:4px 4px 0 rgba(221,113,54,.5);
}

.friction-grid{gap:28px!important}
.friction-grid article{
  position:relative;display:flex;flex-direction:column;padding:18px 18px 22px;
  background-color:#1b1626;border:4px solid #0d0b12;border-radius:0;color:#fff;
  box-shadow:inset 4px 4px 0 #4b3f66,inset -4px -4px 0 #120f1b,7px 7px 0 #0d0b12;
  background-image:linear-gradient(transparent,transparent);
  image-rendering:pixelated;
}
.friction-grid article::after{
  position:absolute;right:14px;top:12px;font-family:"Press Start 2P","Courier New",monospace;font-size:7px;line-height:1;color:#f2a65a;
}
.friction-grid article:nth-child(1)::after{content:"LV.01"}
.friction-grid article:nth-child(2)::after{content:"LV.02"}
.friction-grid article:nth-child(3)::after{content:"LV.03"}
.friction-grid article:nth-child(4)::after{content:"LV.04"}

/* palco do inimigo */
.friction-grid .cross{
  order:1;position:relative;display:block;height:116px;margin:18px 0 12px;overflow:hidden;
  background-color:#0d0b12;border:3px solid #4b3f66;
  background-image:linear-gradient(rgba(242,166,90,.10) 2px,transparent 2px),linear-gradient(90deg,rgba(242,166,90,.10) 2px,transparent 2px);
  background-size:16px 16px;color:inherit;font-size:0;
}
.friction-grid .cross svg{display:none}
.friction-grid .cross::before{
  content:"";position:absolute;top:24px;width:7px;height:7px;
  animation:px-enemy 6s steps(1,end) infinite;
}
.friction-grid .cross::after{
  content:"K.O.";position:absolute;inset:0;display:grid;place-items:center;
  font-family:"Press Start 2P","Courier New",monospace;font-size:20px;color:#fff;text-shadow:3px 3px 0 #ff3b4f,6px 6px 0 #0d0b12;
  opacity:0;animation:px-ko 6s steps(1,end) infinite;
}
/* barra de HP */
.friction-grid article::before{
  content:"";order:2;display:block;height:16px;margin-bottom:16px;border:3px solid #0d0b12;
  background:
    repeating-linear-gradient(to right,transparent 0 10px,#0d0b12 10px 12px),
    linear-gradient(#ff4d5e,#ff4d5e) left/100% 100% no-repeat,
    #2c2540;
  animation:px-hp 6s steps(1,end) infinite;
}
.friction-grid article h3{
  order:3;margin:0 0 8px;font-family:"Press Start 2P","Courier New",monospace;font-weight:400;font-size:11px;line-height:1.6;letter-spacing:0;color:#fff;
}
.friction-grid article p{order:4;margin:0;font-family:"VT323","Courier New",monospace;font-size:21px;line-height:1.1;color:#cdbfe6}
.friction-grid article:nth-child(2) .cross::before,.friction-grid article:nth-child(2) .cross::after,.friction-grid article:nth-child(2)::before{animation-delay:.7s}
.friction-grid article:nth-child(3) .cross::before,.friction-grid article:nth-child(3) .cross::after,.friction-grid article:nth-child(3)::before{animation-delay:1.4s}
.friction-grid article:nth-child(4) .cross::before,.friction-grid article:nth-child(4) .cross::after,.friction-grid article:nth-child(4)::before{animation-delay:2.1s}

@keyframes px-enemy{
  0%{transform:translateY(0)}
  8%{transform:translateY(-7px)}
  16%{transform:translateY(0)}
  24%{transform:translateY(-7px)}
  32%{transform:translateY(0)}
  40%{transform:translateY(-7px)}
  48%{transform:translateY(0)}
  50%{transform:translate(-8px,0);filter:brightness(3)}
  52%{transform:translate(8px,0);filter:brightness(3)}
  54%{transform:translate(-5px,0);filter:brightness(1)}
  56%{transform:translate(0,0)}
  62%{transform:translateY(-7px)}
  66%{transform:translateY(0)}
  68%{transform:translate(-8px,0);filter:brightness(3)}
  70%{transform:scale(1.25);filter:brightness(4);opacity:1}
  72%{transform:scale(.5);opacity:.7;filter:brightness(4)}
  74%,92%{transform:scale(0);opacity:0}
  94%{transform:scale(1);opacity:1;filter:none}
  96%{opacity:0}
  97%,100%{opacity:1;transform:translateY(0)}
}
@keyframes px-hp{
  0%,48%{background-size:100% 100%}
  50%{background-size:100% 100%}
  52%,60%{background-size:72% 100%}
  62%,66%{background-size:40% 100%}
  68%,92%{background-size:0% 100%}
  94%,100%{background-size:100% 100%}
}
@keyframes px-ko{0%,69%{opacity:0;transform:scale(3)}70%,92%{opacity:1;transform:scale(1)}93%,100%{opacity:0}}
@keyframes px-blink{to{visibility:hidden}}

/* faixa final: STAGE CLEAR */
.friction-conclusion{
  position:relative;display:flex;align-items:center;gap:18px;padding:22px 26px 22px 26px;margin-top:44px;
  background-color:#1b1626;border:4px solid #0d0b12;border-radius:0;
  box-shadow:inset 4px 4px 0 #f2a65a,inset -4px -4px 0 #8a3d14,8px 8px 0 #0d0b12;
  background-image:linear-gradient(transparent,transparent);
}
.friction-conclusion::before{
  content:"★ STAGE CLEAR ★";flex:0 0 auto;padding:8px 10px;background:#f2c94c;color:#0d0b12;border:3px solid #0d0b12;
  font-family:"Press Start 2P","Courier New",monospace;font-size:9px;line-height:1.3;
  box-shadow:inset 2px 2px 0 #fff3a8,inset -2px -2px 0 #a8841a,3px 3px 0 #0d0b12;animation:px-blink 1s steps(2,start) infinite;
}
.friction-conclusion svg{display:none}
.friction-conclusion p{margin:0;font-family:"VT323","Courier New",monospace;font-size:25px;line-height:1.1;color:#fff}
@media (max-width:700px){.friction-conclusion{flex-direction:column;align-items:flex-start}}
@media (prefers-reduced-motion:reduce){
  .friction-grid .cross::before,.friction-grid .cross::after,.friction-grid article::before,.friction-conclusion::before{animation:none!important}
  .friction-grid .cross::after{opacity:1}
}

/* sprites */
.friction-grid article:nth-child(1) .cross::before{color:#ff6b7a;left:calc(50% - 38px);box-shadow:14px 0px 0 0 currentColor,56px 0px 0 0 currentColor,21px 7px 0 0 currentColor,49px 7px 0 0 currentColor,14px 14px 0 0 currentColor,21px 14px 0 0 currentColor,28px 14px 0 0 currentColor,35px 14px 0 0 currentColor,42px 14px 0 0 currentColor,49px 14px 0 0 currentColor,56px 14px 0 0 currentColor,7px 21px 0 0 currentColor,14px 21px 0 0 currentColor,28px 21px 0 0 currentColor,35px 21px 0 0 currentColor,42px 21px 0 0 currentColor,56px 21px 0 0 currentColor,63px 21px 0 0 currentColor,0px 28px 0 0 currentColor,7px 28px 0 0 currentColor,14px 28px 0 0 currentColor,21px 28px 0 0 currentColor,28px 28px 0 0 currentColor,35px 28px 0 0 currentColor,42px 28px 0 0 currentColor,49px 28px 0 0 currentColor,56px 28px 0 0 currentColor,63px 28px 0 0 currentColor,70px 28px 0 0 currentColor,0px 35px 0 0 currentColor,14px 35px 0 0 currentColor,21px 35px 0 0 currentColor,28px 35px 0 0 currentColor,35px 35px 0 0 currentColor,42px 35px 0 0 currentColor,49px 35px 0 0 currentColor,56px 35px 0 0 currentColor,70px 35px 0 0 currentColor,0px 42px 0 0 currentColor,14px 42px 0 0 currentColor,56px 42px 0 0 currentColor,70px 42px 0 0 currentColor,21px 49px 0 0 currentColor,28px 49px 0 0 currentColor,42px 49px 0 0 currentColor,49px 49px 0 0 currentColor}
.friction-grid article:nth-child(2) .cross::before{color:#9ab4ff;left:calc(50% - 38px);box-shadow:14px 0px 0 0 currentColor,56px 0px 0 0 currentColor,0px 7px 0 0 currentColor,21px 7px 0 0 currentColor,49px 7px 0 0 currentColor,70px 7px 0 0 currentColor,0px 14px 0 0 currentColor,14px 14px 0 0 currentColor,21px 14px 0 0 currentColor,28px 14px 0 0 currentColor,35px 14px 0 0 currentColor,42px 14px 0 0 currentColor,49px 14px 0 0 currentColor,56px 14px 0 0 currentColor,70px 14px 0 0 currentColor,0px 21px 0 0 currentColor,7px 21px 0 0 currentColor,14px 21px 0 0 currentColor,28px 21px 0 0 currentColor,35px 21px 0 0 currentColor,42px 21px 0 0 currentColor,56px 21px 0 0 currentColor,63px 21px 0 0 currentColor,70px 21px 0 0 currentColor,0px 28px 0 0 currentColor,7px 28px 0 0 currentColor,14px 28px 0 0 currentColor,21px 28px 0 0 currentColor,28px 28px 0 0 currentColor,35px 28px 0 0 currentColor,42px 28px 0 0 currentColor,49px 28px 0 0 currentColor,56px 28px 0 0 currentColor,63px 28px 0 0 currentColor,70px 28px 0 0 currentColor,7px 35px 0 0 currentColor,14px 35px 0 0 currentColor,21px 35px 0 0 currentColor,28px 35px 0 0 currentColor,35px 35px 0 0 currentColor,42px 35px 0 0 currentColor,49px 35px 0 0 currentColor,56px 35px 0 0 currentColor,63px 35px 0 0 currentColor,14px 42px 0 0 currentColor,56px 42px 0 0 currentColor,7px 49px 0 0 currentColor,63px 49px 0 0 currentColor}
.friction-grid article:nth-child(3) .cross::before{color:#f2c94c;left:calc(50% - 35px);box-shadow:21px 0px 0 0 currentColor,28px 0px 0 0 currentColor,35px 0px 0 0 currentColor,42px 0px 0 0 currentColor,7px 7px 0 0 currentColor,14px 7px 0 0 currentColor,21px 7px 0 0 currentColor,28px 7px 0 0 currentColor,35px 7px 0 0 currentColor,42px 7px 0 0 currentColor,49px 7px 0 0 currentColor,56px 7px 0 0 currentColor,0px 14px 0 0 currentColor,7px 14px 0 0 currentColor,14px 14px 0 0 currentColor,21px 14px 0 0 currentColor,28px 14px 0 0 currentColor,35px 14px 0 0 currentColor,42px 14px 0 0 currentColor,49px 14px 0 0 currentColor,56px 14px 0 0 currentColor,63px 14px 0 0 currentColor,0px 21px 0 0 currentColor,7px 21px 0 0 currentColor,14px 21px 0 0 currentColor,35px 21px 0 0 currentColor,42px 21px 0 0 currentColor,63px 21px 0 0 currentColor,0px 28px 0 0 currentColor,7px 28px 0 0 currentColor,14px 28px 0 0 currentColor,21px 28px 0 0 currentColor,28px 28px 0 0 currentColor,35px 28px 0 0 currentColor,42px 28px 0 0 currentColor,49px 28px 0 0 currentColor,56px 28px 0 0 currentColor,63px 28px 0 0 currentColor,14px 35px 0 0 currentColor,21px 35px 0 0 currentColor,42px 35px 0 0 currentColor,49px 35px 0 0 currentColor,7px 42px 0 0 currentColor,14px 42px 0 0 currentColor,28px 42px 0 0 currentColor,35px 42px 0 0 currentColor,49px 42px 0 0 currentColor,56px 42px 0 0 currentColor,0px 49px 0 0 currentColor,7px 49px 0 0 currentColor,56px 49px 0 0 currentColor,63px 49px 0 0 currentColor}
.friction-grid article:nth-child(4) .cross::before{color:#7bd88f;left:calc(50% - 38px);box-shadow:14px 0px 0 0 currentColor,21px 0px 0 0 currentColor,28px 0px 0 0 currentColor,35px 0px 0 0 currentColor,42px 0px 0 0 currentColor,49px 0px 0 0 currentColor,56px 0px 0 0 currentColor,7px 7px 0 0 currentColor,14px 7px 0 0 currentColor,21px 7px 0 0 currentColor,28px 7px 0 0 currentColor,35px 7px 0 0 currentColor,42px 7px 0 0 currentColor,49px 7px 0 0 currentColor,56px 7px 0 0 currentColor,63px 7px 0 0 currentColor,0px 14px 0 0 currentColor,7px 14px 0 0 currentColor,28px 14px 0 0 currentColor,35px 14px 0 0 currentColor,42px 14px 0 0 currentColor,63px 14px 0 0 currentColor,70px 14px 0 0 currentColor,0px 21px 0 0 currentColor,7px 21px 0 0 currentColor,28px 21px 0 0 currentColor,35px 21px 0 0 currentColor,42px 21px 0 0 currentColor,63px 21px 0 0 currentColor,70px 21px 0 0 currentColor,0px 28px 0 0 currentColor,7px 28px 0 0 currentColor,14px 28px 0 0 currentColor,21px 28px 0 0 currentColor,28px 28px 0 0 currentColor,35px 28px 0 0 currentColor,42px 28px 0 0 currentColor,49px 28px 0 0 currentColor,56px 28px 0 0 currentColor,63px 28px 0 0 currentColor,70px 28px 0 0 currentColor,7px 35px 0 0 currentColor,14px 35px 0 0 currentColor,28px 35px 0 0 currentColor,35px 35px 0 0 currentColor,42px 35px 0 0 currentColor,56px 35px 0 0 currentColor,63px 35px 0 0 currentColor,7px 42px 0 0 currentColor,63px 42px 0 0 currentColor,14px 49px 0 0 currentColor,21px 49px 0 0 currentColor,49px 49px 0 0 currentColor,56px 49px 0 0 currentColor}
.friction-grid article .cross{width:100%!important;min-width:0;height:116px!important;box-sizing:border-box;align-self:stretch}
@keyframes px-hp{
  0%,50%{background-size:100% 100%,100% 100%,100% 100%}
  52%,60%{background-size:100% 100%,72% 100%,100% 100%}
  62%,66%{background-size:100% 100%,40% 100%,100% 100%}
  68%,92%{background-size:100% 100%,0% 100%,100% 100%}
  94%,100%{background-size:100% 100%,100% 100%,100% 100%}
}