.tft-loader-sr{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.tft-loader-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(26,26,26,.85);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  z-index:9999;
}

.tft-loader-overlay[data-visible="true"]{
  display:flex;
}

.tft-loader{
  width:min(420px, 80vw);
  max-width:420px;
  color:#e8e2d0;
  font-family:"Rajdhani","Noto Sans SC","Segoe UI",sans-serif;
}

.tft-loader--inline{
  width:100%;
  max-width:none;
  min-height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 20px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  background:rgba(255,255,255,.02);
}

.tft-loader--inline.tft-loader--hex{
  min-height:220px;
}

#detail-root > .tft-loader--inline,
#s17-root > .tft-loader--inline,
#simulator-root > .tft-loader--inline,
.daily-feedback .tft-loader--inline,
.oneshot-early-boards-block .tft-loader--inline{
  background:transparent;
}

.daily-feedback .tft-loader--inline{
  min-height:0;
  border:0;
  padding:0;
}

.oneshot-early-boards-block .tft-loader--inline{
  min-height:136px;
  border-style:dashed;
}

.tft-loader__panel{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
}

.tft-loader__message{
  color:#888;
  font-size:13px;
  letter-spacing:.04em;
  font-family:"Cascadia Code","SFMono-Regular","Consolas",monospace;
  text-align:center;
}

.tft-loader__actions{
  display:flex;
  gap:10px;
  justify-content:center;
  align-items:center;
}

.tft-loader__button{
  padding:8px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  color:#e8e2d0;
  cursor:pointer;
  transition:border-color .2s ease, background-color .2s ease, transform .2s ease;
}

.tft-loader__button:hover,
.tft-loader__button:focus-visible{
  border-color:rgba(184,233,134,.42);
  background:rgba(184,233,134,.1);
  transform:translateY(-1px);
}

.tft-cat-loader__walkway{
  position:relative;
  width:100%;
  height:40px;
}

.tft-cat-loader__cat{
  position:absolute;
  top:0;
  left:0;
  width:36px;
  height:36px;
  color:#e8e2d0;
  animation:tft-cat-walk 3s ease-in-out infinite;
  transform:translate3d(0,0,0);
  will-change:transform,left;
}

.tft-cat-loader__rail{
  width:100%;
  height:6px;
  border-radius:999px;
  background:#2a2a2a;
  overflow:hidden;
}

.tft-cat-loader__fill{
  height:100%;
  width:0%;
  border-radius:999px;
  background:#b8e986;
  animation:tft-cat-fill 3s ease-in-out infinite;
  will-change:width;
}

.tft-hex-loader__board{
  width:100%;
  max-width:280px;
}

.tft-hex-loader__board polygon{
  fill:#2a2a2a;
  stroke:#3a3a3a;
  stroke-width:1px;
  animation:tft-hex-pop 2.1s infinite;
}

.tft-hex-loader__percent{
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:6px;
}

.tft-hex-loader__value{
  font-size:28px;
  line-height:1;
  font-weight:500;
  color:#e8e2d0;
  font-family:"Cascadia Code","SFMono-Regular","Consolas",monospace;
}

.tft-hex-loader__suffix{
  color:#888;
  font-size:16px;
  line-height:1.2;
  font-family:"Cascadia Code","SFMono-Regular","Consolas",monospace;
}

.tft-hex-loader__label{
  text-transform:uppercase;
  letter-spacing:2px;
  font-size:12px;
  color:#888;
  text-align:center;
}

.tft-hex-loader__label strong{
  color:#b8e986;
  font-weight:600;
}

@keyframes tft-cat-walk{
  0%{ left:0; transform:translateY(0); }
  25%{ transform:translateY(-2px); }
  50%{ transform:translateY(0); }
  75%{ transform:translateY(-2px); }
  100%{ left:calc(100% - 36px); transform:translateY(0); }
}

@keyframes tft-cat-fill{
  0%{ width:0%; }
  100%{ width:100%; }
}

@keyframes tft-hex-pop{
  0%,100%{ fill:#2a2a2a; stroke:#3a3a3a; }
  40%,55%{ fill:#b8e986; stroke:#b8e986; }
}

@media (prefers-reduced-motion: reduce){
  .tft-cat-loader__cat,
  .tft-cat-loader__fill,
  .tft-hex-loader__board polygon{
    animation-duration:12s;
  }

  .tft-cat-loader__cat{
    animation-name:none;
    left:calc(50% - 18px);
    transform:none;
  }

  .tft-cat-loader__fill{
    animation-name:none;
    width:60%;
  }
}