a,abbr,acronym,address,applet,article,aside,audio,b,big,blockquote,body,canvas,caption,center,cite,code,dd,del,details,dfn,div,dl,dt,em,embed,fieldset,figcaption,figure,footer,form,h1,h2,h3,h4,h5,h6,header,hgroup,html,i,iframe,img,ins,kbd,label,legend,li,mark,menu,nav,object,ol,output,p,pre,q,ruby,s,samp,section,small,span,strike,strong,sub,summary,sup,table,tbody,td,tfoot,th,thead,time,tr,tt,u,ul,var,video{border:0;font-size:100%;font:inherit;margin:0;padding:0;vertical-align:initial}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}
body{line-height:1}
ol,ul{list-style:none}
blockquote,q{quotes:none}
blockquote:after,blockquote:before,q:after,q:before{content:"";content:none}
table{border-collapse:collapse;border-spacing:0}

/* =========================
   ORYGINAŁ (zmienione tło)
   ========================= */

/* ZAMIANA: było github background.jpg -> teraz lokalne /assets/background.jpg */
html{
  background:url(/assets/background.jpg);
  background-color:#141414;
  background-repeat:no-repeat;
  background-size:cover
}

body{
  --col-background:#141414;
  --col-pane:#222;
  --col-yellow:#ffd100;
  --col-red:#ff4040;
  --col-green:#1eff00;
  --icon-size:2.75rem;
  --arrow-thickness:1rem;
  --z-index-arrow:100;
  --z-index-tooltip:200;
  --z-index-sticky:300;
  --sp-xxxs:0.0625rem;
  --sp-xxs:0.125rem;
  --sp-xs:0.25rem;
  --sp-sm:0.5rem;
  --sp-md:1rem;
  --sp-lg:2rem;
  --sp-xl:4rem;
  box-sizing:border-box;
  font-family:Helvetica;
  margin:0
}

.image-logo{bottom:7%;left:1%;max-height:10%;max-width:10%;position:absolute}
#footer{bottom:.5rem;height:1rem;position:absolute;width:100%}
.App{overflow:hidden}
.KlassList{display:flex;flex-wrap:wrap;justify-content:center;list-style:none}
.KlassList-item{margin:var(--sp-md)}
.SquareButton{background-color:initial;border:none;cursor:pointer;height:2.75rem;padding:0;position:relative;width:2.75rem}
.SquareButton-content{background-position:50%;background-repeat:no-repeat;background-size:2.75rem 2.75rem,2.25rem 2.25rem;height:100%;left:0;position:absolute;top:0;width:100%}
.SquareButton-content--disabled{-webkit-filter:grayscale();filter:grayscale()}
.SquareButton-aura{background-position:50%;background-repeat:no-repeat;background-size:2.375rem 2.375rem;height:100%;left:0;position:absolute;top:0;visibility:hidden;width:100%}
.SquareButton:hover .SquareButton-aura{visibility:visible}
.SquareButton-outline{--outline-size:2.625rem;background-position-y:center;background-repeat:no-repeat;background-size:auto 100%;height:2.625rem;left:50%;position:absolute;top:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);width:2.625rem}
.SquareButton-outline--grey{background-position-x:0}
.SquareButton-outline--gold{background-position-x:calc(var(--outline-size)*-1)}
.SquareButton-outline--green{background-position-x:calc(var(--outline-size)*-2)}

/* =========================================
   DODATEK: TNSGuild Vanilla WoW vibe (override)
   ========================================= */

html{
  background-image:
    radial-gradient(1200px 800px at 50% 18%, rgba(255, 209, 0, 0.08), transparent 60%),
    radial-gradient(900px 650px at 70% 65%, rgba(110, 160, 255, 0.05), transparent 55%),
    url("/assets/background.jpg");
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center top;
  background-color:#141414;
}

body{
  position:relative;
  min-height:100vh;
}

/* winieta + przyciemnienie brzegów */
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 40%, rgba(0,0,0,0) 35%, rgba(0,0,0,0.68) 78%),
    linear-gradient(180deg, rgba(0,0,0,0.30), rgba(0,0,0,0.55));
  z-index:0;
}

/* lekkie "ziarno" */
body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:0.08;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255,255,255,0.06),
      rgba(255,255,255,0.06) 1px,
      transparent 1px,
      transparent 3px
    );
  z-index:0;
}

/* appka nad efektami */
#root,.App{
  position:relative;
  z-index:1;
}

/* subtelny "WoW hover" */
.SquareButton{
  transition:transform .12s ease, filter .12s ease;
}
.SquareButton:hover{
  transform:translateY(-1px);
  filter:saturate(1.08);
}

/* złoty akcent */
.SquareButton:hover .SquareButton-outline--gold{
  filter:drop-shadow(0 0 10px rgba(255,209,0,0.18));
}

/* =========================================
   BACK / COPY (CENTER UNDER TALENTS + GOLD PULSE)
   Pasuje do index.html:
   <div class="forum-footer">
     <div class="footer-actions">
       <a class="back-to-forum-center">...</a>
       <button class="copy-build-link">...</button>
     </div>
     <div class="copy-toast"></div>
   </div>
   ========================================= */

.forum-footer{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding: 26px 0 40px;
}

.footer-actions{
  display:flex;
  gap: 12px;
  justify-content:center;
  align-items:center;
  flex-wrap: wrap;
}

.back-to-forum-center{
  display:inline-block;
  text-decoration:none;
  font-weight:700;
  letter-spacing:.3px;

  padding: 12px 26px;
  border-radius: 10px;

  color: #ffd100;
  background: linear-gradient(180deg, #2a2216, #1c160f);
  border: 1px solid rgba(255,209,0,.45);

  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 10px 25px rgba(0,0,0,.45);

  animation: goldPulse 1.8s ease-in-out infinite;
  transition: transform .15s ease, filter .15s ease;
}

.back-to-forum-center:hover{
  transform: translateY(-2px);
  filter: saturate(1.12);
}

/* Copy button */
.copy-build-link{
  display:inline-block;
  cursor:pointer;

  padding: 12px 18px;
  border-radius: 10px;

  color: #ffd100;
  background: linear-gradient(180deg, #1f2a16, #131a0e);
  border: 1px solid rgba(255,209,0,.35);

  font-weight:700;
  letter-spacing:.3px;

  box-shadow:
    0 0 0 1px rgba(0,0,0,.60) inset,
    0 10px 25px rgba(0,0,0,.40);

  transition: transform .15s ease, filter .15s ease, box-shadow .15s ease;
}

.copy-build-link:hover{
  transform: translateY(-2px);
  filter: saturate(1.12);
  box-shadow:
    0 0 16px rgba(255,209,0,.18),
    0 10px 25px rgba(0,0,0,.45);
}

.copy-build-link:disabled{
  opacity:.65;
  cursor: not-allowed;
}

/* Toast WoW style */
.copy-toast{
  margin-top: 12px;
  text-align:center;
  font-weight:700;
  font-size: 1rem;
  letter-spacing: .5px;

  color: #ffd100;
  text-shadow:
    0 0 6px rgba(255,209,0,0.5),
    0 0 12px rgba(255,209,0,0.3);

  opacity: 0;
  transform: translateY(4px);
  transition: opacity .25s ease, transform .25s ease;
  min-height: 24px;
}

.copy-toast.is-ok{
  color: #ffd100;
}

.copy-toast.is-err{
  color: #ff4040;
  text-shadow:
    0 0 6px rgba(255,64,64,0.5),
    0 0 12px rgba(255,64,64,0.3);
}

/* gdy widoczny */
.copy-toast[style*="opacity: 1"]{
  transform: translateY(0);
}

/* animowany złoty puls */
@keyframes goldPulse{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(0,0,0,.60) inset,
      0 10px 25px rgba(0,0,0,.45),
      0 0 0 rgba(255,209,0,0);
    border-color: rgba(255,209,0,.35);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(0,0,0,.60) inset,
      0 10px 25px rgba(0,0,0,.45),
      0 0 18px rgba(255,209,0,.35);
    border-color: rgba(255,209,0,.85);
  }
}

/* Canvas overlay used now: #fantasy-bg */
#fantasy-bg{
  opacity: 0.35;
  filter: blur(1.2px); /* miękkość mgły + iskier */
}