@charset "UTF-8";
body {
  background-color: #000000;
  background-image: url(../gfx/noisebackground.jpg);
  background-attachment: fixed;
  font-family: "STIX Two Text", serif;
  font-weight: normal;
  font-style: normal;
  font-size: 15px;
  margin-top: 0px;
  color: #9fb9c9;
}

a {
  color: #c4c4c4;
  text-decoration: none;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

strong{

}

a:hover {
  text-decoration: none;
  color: #c4c4c4;
  text-shadow: 0px 0px 30px #fdec6e;
  -moz-transition: all 0.2s ease-in;
  -o-transition: all 0.2s ease-in;
  -webkit-transition: all 0.2s ease-in;
  transition: all 0.2s ease-in;
}

.--special {
  background: none;
  border: none;
  font-family: "FoglihtenNo07 Regular";
  color: #b5b6b6 !important;
  font-size: 20px;
}
.--special img {
  height: 25px;
  vertical-align: middle;
}

th {
  font-family: "STIX Two Text", serif;
  vertical-align: top;
  text-align: left;
  color: #b5b6b6;
  font-size: 15px;
}

ul li {
  list-style-image: url(../gfx/p.png);
}

ul {
  padding-left: 15px;
}


h3 {
  font-family: "FoglihtenNo07 Regular";
  color: #9fb9c9;
}

h2 {
  font-family: "FoglihtenNo07 Regular";
  font-size: 19px;
}

h5 {
  color: #9fb9c9;
  font-family: "Almendra", serif;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 26px;
  text-align: center;
}

.font_almendra {
  font-family: "Almendra", serif;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.nice_block {
  display: block;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.24) !important;
  border: 1px solid #838383;
  margin: 0 auto;
  font-size: 15px;
  color: #b5b6b6;
  position: relative;
  min-height: 160px;
}
.nice_block_title {
  font-family: "FoglihtenNo07 Regular";
  font-size: 25px;
  color: #9fb9c9;
  text-align: center;
  padding-top: 25px;
}
.nice_block.--dark-4 {
  background: rgba(0, 0, 0, 0.4) !important;
}
.nice_block.--dark-6 {
  background: rgba(0, 0, 0, 0.6) !important;
}
.nice_block.--dark-8 {
  background: rgba(0, 0, 0, 0.8) !important;
}
.nice_block_content {
  width: 97%;
  z-index: 5;
  padding: 0.6em;
}
.nice_block_content_wrapper {
  padding: 0.3rem;
}
.nice_block_content_wrapper.--cytat {
  text-align: center !important;
  padding-top: 5px !important;
  font-family: "Times New Roman" !important;
  font-size: 16px;
}
.nice_block_content_wrapper.--cytat i {
  color: #b5b6b6 !important;
}
.nice_block_content_wrapper.--cytat b {
  color: #84bde0 !important;
}

:root {
  --page-width: 1300px;
}

/* WSPÓLNA SZEROKOŚĆ STRONY */
.nice_block.--header,
.houses,
.page-width {
  max-width: var(--page-width);
  margin-left: auto;
  margin-right: auto;
}

.nice_block.--header {
  max-width: calc(var(--page-width) + 70px);
}

.nice_block.--header-v2{
    background-color: transparent !important;
    background-position: center calc(50% + 25px); /* przesuwa w dół o 25px względem środka */
}

.nice_block .--bottom-left:before {
  content: "";
  position: absolute;
  left: -2px;
  bottom: -3px;
  width: 138px;
  height: 138px;
  background: url(../gfx/bottom-left.png) no-repeat center center;
  z-index: -1;
}
.nice_block .--bottom-right:after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -3px;
  width: 138px;
  height: 138px;
  background: url(../gfx/bottom-right.png) no-repeat center center;
  z-index: -10;
}
.nice_block .--top-left:before {
  content: "";
  position: absolute;
  left: -2px;
  top: -3px;
  width: 138px;
  height: 138px;
  background: url(../gfx/top-left.png) no-repeat center center;
  z-index: -1;
}
.nice_block .--top-right:after {
  content: "";
  position: absolute;
  right: -2px;
  top: -3px;
  width: 138px;
  height: 138px;
  background: url(../gfx/top-right.png) no-repeat center center;
  z-index: -1;
}
.nice_block .--bottom-left-2:before {
  content: "";
  position: absolute;
  left: -8px;
  bottom: -8px;
  width: 98px;
  height: 98px;
  background: url(../gfx/bottom-left-2.png) no-repeat center center;
  z-index: 1;
}
.nice_block .--bottom-right-2:after {
  content: "";
  position: absolute;
  right: -13px;
  bottom: -8px;
  width: 98px;
  height: 98px;
  background: url(../gfx/bottom-right-2.png) no-repeat center center;
  z-index: 1;
}
.nice_block .--bottom-center-stars:after {
  content: "";
  position: absolute;
  left: 0px;
  bottom: -10px;
  width: 100%;
  height: 22px;
  background: url(../gfx/bottom-center-stars.png) no-repeat center center;
  z-index: 1;
}
.nice_block .--top-left-2:before {
  content: "";
  position: absolute;
  left: -8px;
  top: -8px;
  width: 98px;
  height: 98px;
  background: url(../gfx/top-left-2.png) no-repeat center center;
  z-index: 1;
}
.nice_block .--top-right-2:after {
  content: "";
  position: absolute;
  right: -8px;
  top: -8px;
  width: 98px;
  height: 98px;
  background: url(../gfx/top-right-2.png) no-repeat center center;
  z-index: 1;
}
.nice_block .--top-right-small:after {
  content: "";
  position: absolute;
  right: 0px;
  top: 0px;
  width: 65px;
  height: 66px;
  background: url(../gfx/top-right-small.png) no-repeat center center;
  z-index: 1;
}

.nice_block .--top-left-small:before {
  content: "";
  position: absolute;
  left: 0px;
  top: 0px;
  width: 65px;
  height: 66px;
  background: url(../gfx/top-left-small.png) no-repeat center center;
  z-index: 1;
}

.flex-grid {
  display: flex;
  justify-content: space-between;
}

.col {
  flex-grow: 1;
  font-size: 12.8px;
  color: #85766f;
}
.col.--content {
  margin-top: 75px;
  flex-grow: 100 !important;
  padding: 0px 20px;
}

@media (max-width: 400px) {
  .flex-grid {
    display: block;
  }
}
.newsContents {
  padding: 5px;
}

.newsButtonsArea{
  font-family:"FoglihtenNo07 Regular";
  font-size:15px;
  text-align:center;
  /* usuń to: position:relative; bottom:-5px; */
  margin-top:8px;           /* delikatne dosunięcie w dół zamiast bottom:-5px */
  margin-bottom:8px;
}

.newsMoreButton {
  font-family: "FoglihtenNo07 Regular";
  color: #c4c4c4;
  font-size: 12px;
}

.newsTitle {
  text-align: center;
  font-family: "Almendra", serif;
  color: #9fb9c9;
  font-size: 30px;
  margin-top: -5px;
}

/* autor – bez dodatkowej dziury od góry */
.newsAuthor{
  margin-top:0;
  margin-bottom:8px;
  color:#b5b6b6;
  font-size:15px;
  display:block;
}

.newsImg {
  margin-top: 2px;    /* lekki oddech pod tekstem */
  margin-bottom: 15px; /* odległość od dalszej treści */
}



.klimat {
    margin: 5px auto;
    padding: 10px 18px;
    text-align: center;

    /* MAGICZNE TŁO (szkło + delikatny srebrny gradient) */
    background: linear-gradient(
        rgba(255,255,255,0.06),
        rgba(0,0,0,0.25)
    );
    backdrop-filter: blur(3px);

    /* OBRAMOWANIE SREBRNE */
    border: 1px solid rgba(180,180,180,0.38);
    border-radius: 22px;

    /* LEKKI GLOW */
    box-shadow:
        0 0 8px rgba(190,190,190,0.25),
        inset 0 0 12px rgba(255,255,255,0.06);

    /* KOLOR TEKSTU POD SKÓRKĘ */
    color: #d6d6d6;
    font-size: 16px;
    line-height: 1.4;
}

.notification {
  width: 370px;
  border: 0px;
  padding: 5px;
  position: fixed;
  z-index: 500;
  background-color: #b5b6b6;
  display: block;
  text-align: right;
  /*box-shadow: 0 0 5px 5px #F6B806;*/
  border-top: 2px solid #f6b806;
  border-right: 2px solid #f6b806;
  font-weight: bold;
  font-size: 14px;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
  opacity: 1 !important;
  filter: alpha(opacity=100) !important;
}

.notification img {
  float: left;
  margin-right: 10px;
}

#notification_close {
  float: right;
  margin-right: 0px;
}

/* --- Styl linków w powiadomieniach: wersja srebrna --- */
.notifications a,
.klimat a,
fieldset a {
  color: #c9c9c9;
  text-decoration: none;
  border-bottom: 1px dotted rgba(180, 180, 180, 0.35);
  transition: all 0.3s ease;
  position: relative;
}

/* efekt rozświetlenia przy najechaniu */
.notifications a:hover,
.klimat a:hover,
fieldset a:hover {
  color: #f1f1f1;
  border-bottom-color: #f1f1f1;
  text-shadow: 0 0 8px rgba(240, 240, 240, 0.7);
}

/* animowany błysk jak świetlisty refleks */
.notifications a::after,
.klimat a::after,
fieldset a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
  transition: width 0.5s ease;
}

.notifications a:hover::after,
.klimat a:hover::after,
fieldset a:hover::after {
  width: 100%;
}

/* separator obrazkowy między wpisami w boxie "Najnowsze powiadomienia" */
.notifications h3{
  margin:12px 0 4px;
  color:#d8d8d8; font-weight:700;
}

.notifications h3:not(:first-of-type)::before{
  content:"";
  display:block;
  height:14px;                  /* wysokość separatora */
  margin:12px 0;                /* odstępy */
  background: url("/uploads/files/grafika2025/linia1.png") center center / contain no-repeat;
}

/*NICKI*/
.nick {
  color: #84bde0;
  font-family: "FoglihtenNo07 Regular";
  font-size: 15px;
}

.pageTitle {
  /*font-weight: bold;*/
  font-size: 37px;
  font-family: "Almendra", serif;
  color: #9fb9c9;
  text-align: center;
  margin-top: -13px;
}

.title {
  text-transform: uppercase;
  /*font-weight: bold;*/
  font-size: 25px;
  color: #b5b6b6;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}

.title2 {
  font-weight: bold;
  font-size: 20px;
  color: #b5b6b6;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000,
    1px 1px 0 #000;
}

.meta {
  font-weight: bold;
}

/* --- Boksy informacyjne w stylu przycisku WEJDŹ / TWÓJ PANEL --- */

.ignis-error-box,
.ignis-info-box {
    display: block;
    width: 90%;
    max-width: 520px;
    margin: 8px auto;

    padding: 10px 24px;
    text-align: center;

    font-family: "STIX Two Text", serif;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;

    border-radius: 25px;

    /* główny efekt – ciemny pil z jaśniejszym środkiem */
    background:
        radial-gradient(circle at 50% 0,
            rgba(255, 255, 255, 0.20),
            transparent 60%) ,
        linear-gradient(
            90deg,
            #050608 0%,
            #2f333e 50%,
            #050608 100%
        );

    border: 1px solid rgba(255, 255, 255, 0.06);

    color: #f3f3f3;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -4px 10px rgba(0, 0, 0, 0.65),
        0 0 12px rgba(0, 0, 0, 0.60);
}

/* warianty kolorystyczne */

.ignis-error-box {
    color: #e4e4e4;
    border-color: rgba(180, 180, 180, 0.30);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -4px 10px rgba(0, 0, 0, 0.65),
        0 0 12px rgba(160, 160, 160, 0.20);
}

.ignis-info-box {
    color: #e1e8ff;
    border-color: rgba(150, 180, 255, 0.35);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 -4px 10px rgba(0, 0, 0, 0.65),
        0 0 12px rgba(120, 180, 255, 0.25);
}


.wyr1 a {
  color: #e3a802;
}

.wyr2 a {
  color: #0889fb;
}

/* nag³ówek */
#main_header {
  margin-top: -20px;
  width: 100%;
  height: 718px;
  margin-top: -5px;
  z-index: 8;
}

header {
  max-width: 1400px;     /* ← TA SAMA szerokość co dół */
  height: 640px;
  margin: 0 auto -15px auto;
  display: flex;
}

header .header-logo-image{
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -570px;
}

/* header nav {
  background: rgba(0,0,0,.25);


  position: absolute;
  top: 0px;
  left: 0px;
  right: 0px;
  text-align: center;
}
header nav a {
  color: #908d8d;
  font-size: 30px;
  display: inline-block;
  margin: 0px 13px;
  font-family: "Almendra";
} */



/* Ustaw ile pikseli szerokości ma jeden róg (szerokość nav-left/right.png) */
:root { 
    --corner-w: 28px; 
    --overlap: 3px;
} /* dopasuj do realnej szerokości PNG */


.nav-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;               /* dopasuj do wysokości rogów */
}

/* Dolna linia – skrócona, żeby nie wchodziła w rogi */
.nav-wrapper::after {
  content: "";
  position: absolute;
  left:  calc(var(--corner-w) - var(--overlap));
  right: calc(var(--corner-w) - var(--overlap));
  bottom: 0;
  height: 2px;
  background: #6f6f6f;        
  z-index: 1;               
}

/* Rogi */
header .nav-left,
header .nav-right {
  position: absolute;
  top: 0;
  height: 100%;
  display: block;              /* bez „dziur” po inline-img */
  z-index: 2;                  /* nad linią */
  pointer-events: none;        /* klik nie łapie grafik */
}

header .nav-left  { left: 0; }
header .nav-right { right: 0; }

/* Treść nawigacji nad wszystkim */
header nav {
  text-align: center;
  z-index: 3;
  position: relative;
}

/* --- Linki w headerze (wersja srebrna z efektem refleksu) --- */
header nav a {
  color: #bdbcbc;
  font-size: 30px;
  display: inline-block;
  margin: 0 13px;
  font-family: "Almendra", serif;
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
  position: relative;
}

/* Efekt po najechaniu */
header nav a:hover {
  color: #f2f2f2;
  text-shadow: 0 0 8px rgba(240, 240, 240, 0.7);
}

/* Subtelna animacja błysku przy hover */
header nav a::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e6e6e6, transparent);
  transition: width 0.5s ease;
}

header nav a:hover::after {
  width: 100%;
}


/** **/

.second_header {
  position: relative;
  padding: 30px 0px 20px 0px;
}
.second_header .hourglasses {
  font-family: "FoglihtenNo07calt Regular";
  text-align: center;
}
.second_header .hourglasses .hourglass {
  width: 140px;
  display: inline-block !important;
  font-family: "FoglihtenNo07calt Regular";
  font-size: 28px;
}
.second_header .hourglasses .hourglass img {
  margin-bottom: 5px;
}
.second_header .hourglasses .extend {
  font-family: "FoglihtenNo07 Regular";
  padding-top: 10px;
  text-align: center;
}
.second_header .hourglasses .extend a {
  font-family: "FoglihtenNo07 Regular";
  font-size: 26px;
  color: #f4be8c;
}
.second_header div.--left {
  position: absolute;
  left: 0px;
  bottom: 20px;
}
.second_header div.--right {
  position: absolute;
  right: 0px;
  bottom: 20px;
}

.third_header {
  font-family: "FoglihtenNo07calt Regular";
  text-align: center;
  position: relative;
}
.third_header .--wrapper {
  padding: 10px;
}
.third_header .--grid {
  display: flex;
  justify-content: space-between;
}
.third_header .--grid .--item {
  position: relative;
  background: rgba(0, 0, 0, 0.24);
  flex: 0 0 268px;
  min-height: 290px;
  font-size: 13px;
  color: #85766f;
}
.third_header .--grid .--item:after {
  content: "";
  position: absolute;
  width: 268px;
  height: 69px;
  bottom: -41px;
  left: 0px;
  background: url("../gfx/third-header-bottom.png") no-repeat center center;
}
.third_header .--grid .--item [class*="color_"] {
  font-family: "FoglihtenNo07calt Regular";
  font-size: 21px;
  margin-bottom: 10px;
}
.third_header .--grid .--item h5 {
  margin: 0px;
  font-size: 24px;
}
.third_header:before {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: -7px;
  border-top: 1px solid #7f6042;
  border-bottom: 1px solid #4b392a;
  z-index: 1;
}
.third_header:after {
  content: "";
  position: absolute;
  left: 0px;
  right: 0px;
  top: -2px;
  border-top: 1px solid #4e3c2c;
  height: 1px;
  background: #a67e5a;
  border-bottom: 1px solid #6b5037;
}

/* logowanie */
#login_panel {
  margin-top: 25px;
  margin-bottom: 25px;
  overflow: auto;
  width: 50px;
  height: 58px;
  padding: 5px;
  position: relative;
  left: 80px;
  top: -55px;
}

#login_panel input[type="image"] {
  position: relative;
  top: -20px;
  left: 20px;
  margin-bottom: -40px;
  display: inline;
  background-color: transparent;
  border: 0px;
}

#login_panel input {
  margin-right: 5px;
}

/* punkty */
#points {
  position: relative;
  top: 695px;
}

#points div {
  font-family: "Risque", cursive;
  width: 80px;
  text-align: center;
  float: left;
  font-size: 15pt;
  text-shadow: 0px 0px 6px #000000;
}

/* dorms points */
#gryffPoints {
  width: 63px;
  height: 30px;
  float: left;
  position: relative;
  top: 655px;
  color: #882929;
  margin-bottom: -35px;
  margin-left: 250px;
  text-align: right;
  font-size: 23px;
  vertical-align: text-bottom;
  padding-top: 4px;
}

#huffPoints {
  width: 63px;
  height: 30px;
  float: left;
  position: relative;
  top: 655px;
  color: #7c6d21;
  margin-bottom: -35px;
  margin-left: 430px;
  text-align: right;
  font-size: 23px;
  vertical-align: text-bottom;
  padding-top: 4px;
}

#ravenPoints {
  width: 63px;
  height: 30px;
  float: left;
  position: relative;
  top: 655px;
  color: #31549d;
  margin-bottom: -35px;
  margin-left: 620px;
  text-align: right;
  font-size: 23px;
  vertical-align: text-bottom;
  padding-top: 4px;
}

#slythPoints {
  width: 63px;
  height: 30px;
  float: left;
  position: relative;
  top: 655px;
  color: #22772a;
  margin-bottom: -35px;
  margin-left: 790px;
  text-align: right;
  font-size: 23px;
  vertical-align: text-bottom;
  padding-top: 4px;
}

/* cytaty*/
#cytatyTitle {
  text-align: center;
  font-family: "FoglihtenNo07 Regular";
  color: #b5b6b6;
  font-size: 20px;
}

.content {
  width: 1350px;
  margin: 0 auto;
}

/* g³ówna tabela */
#main_table {
  margin-top: -5px;
  /*width: 1050px;*/
  width: 100%;
  margin: 0 auto;
}

#main_table td {
  vertical-align: top;
}

/** Menu Block */
.block {
  width: 100%;
  color: #acaeaf;
  background-color: rgba(0, 0, 0, 0.24);
  border: 3px solid #838383;
  border-bottom: none;
  z-index: 2;
  position: relative;
  margin: 30px 0px 0px 0px;
}
.block-wrapper {
  padding: 128px 14px 10px 14px;
}
.block.--menu {
  background-color: rgba(0, 0, 0, 0.24);
  background: -moz-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.04) 100%
  );
  background: -webkit-linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.04) 100%
  );
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.7) 0%,
    rgba(0, 0, 0, 0.04) 100%
  );
  /* width: 250px; */
  width: 305px;
  margin: 155px 0px 0px 0px;
  color: #acaeaf;
  font-size: 16px;
  text-shadow: -1px -1px #000000;
  padding-bottom: 25px;
}
.block.--menu:before {
  border: 1px solid #838383;
  border-bottom: none;
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 3px;
  bottom: 3px;
  z-index: -1;
  background: rgba(0,0,0,.5);

}
.block.--menu:after {
  content: "";
  position: absolute;
  left: -3px;
  bottom: -52px;
  width: 311px;
  height: 72px;
  background: url(../gfx/menu-bottom-center.png) no-repeat center / 100% 100%;
  z-index: 1;
}
.block.--menu h5 {
  width: 100%;
  text-align: center;
  display: block;
  position: absolute;
  left: 0px;
  right: 0px;
  /* top: -115px; */
  top: -134px;
  z-index: 100;
}
.block.--menu h5 img {
  width: 185px !important; 
  height: 182px  !important;
  display: block;
  margin: 0 auto;
}

.menu-title {
  font-size: 20pt;
  text-align: center;
}
.menu-title span {
  background-color: #000926;
  padding: 0px 3px 0px 3px;
}

.index {
  width: 539px;
  margin-bottom: 10px;
  font-size: 15px;
}

.normalindex {
  width: 766px;
  margin-bottom: 5px;
  font-size: 15px;
}

#no-menu .index {
  width: 766px;
  margin-bottom: 5px;
  font-size: 15px;
}

footer {
  margin-top: 90px;
}

middle {
  margin-top: 10px;
}

.marquee {
  overflow: hidden;
  white-space: nowrap;
  box-sizing: border-box;
  animation: marquee 50s linear infinite;
}

.marquee:hover {
  animation-play-state: paused;
}

input {
padding: 5px 5px;
  border: 1px solid #b5b6b6;
  color: #b5b6b6;
  background-color: transparent;
  font-family: "beryliumregular";
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
}

input[type="text"],
input[type="password"] {
  width: 80%;
  background-color: transparent;
  padding: 5px 5px;
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  /* Opera/IE 8+ */
}

.img {
  opacity: 0.8;
}

.img:hover {
  opacity: 1;
}

/***************************************/
.block table {
  width: 100%;
}
.block table th {
  vertical-align: middle;
}
.block table td {
  font-family: "Fauna One", serif;
  font-size: 13px;
  color: #85766f;
  vertical-align: middle;
}

fieldset {
  border: 1px solid #b5b6b6;
}

legend {
  padding: 0.2em 0.5em;
  border: 1px solid #b5b6b6;
  color: #b5b6b6;
  font-size: 90%;
  background-color: #000000;
}

.block legend a {
  color: #b5b6b6;
}

textarea {
 padding: 5px 5px;
  border: 1px solid #b5b6b6;
  color: #b5b6b6;
  background-color: transparent;
  font-family: "beryliumregular";
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;

}

/** Update **/
.color_silver {
  color: #b5b6b6 !important;
}
.color_silver a {
  color: #adafaf;
}

/* --- Magiczne wersje kolorów domów z subtelną animacją połysku --- */
@keyframes magicGlow {
  0%, 90%, 100% {
    filter: brightness(1) drop-shadow(0 0 2px rgba(255,255,255,0.05));
  }
  95% {
    filter: brightness(1.4) drop-shadow(0 0 8px rgba(255,255,255,0.3));
  }
}

/* --- Magiczne wersje kolorów domów (nocna edycja) --- */
@keyframes nightGlow {
  0%, 80%, 100% {
    filter: brightness(0.9) drop-shadow(0 0 4px rgba(255,255,255,0.08));
  }
  90% {
    filter: brightness(1.6) drop-shadow(0 0 14px rgba(255,255,255,0.4));
  }
}

/** Update **/
.color_blue {
  color: #84bde0 !important;
}
.color_blue a {
  color: #84bde0;
}

/* Gryffindor / Lew */
.color_gryffindor {
  color: #ba1515 !important;
}
.color_gryffindor1 {
background: radial-gradient(closest-side at 50% 50%, #ff4d4d 0%, #b30000 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(222, 42, 60, 0.2);
}
.color_gryffindor2 {
  color: #ba1515;
  background: linear-gradient(90deg, #ff5e6b 0%, #ba1515 50%, #8e101a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(222, 42, 60, .35), 0 0 12px rgba(222, 42, 60, .15);
  animation: magicGlow 6s infinite ease-in-out;
}
.color_gryffindor3 {
  color: #ba1515;
  background: linear-gradient(90deg, #b7202f 0%, #821421 50%, #40070d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(222, 42, 60, .45), 0 0 20px rgba(222, 42, 60, .25);
  animation: nightGlow 8s infinite ease-in-out;
}
.color_gryffindor a {
  color: #ab2c2c !important;
}
/* Hufflepuff / Borsuk */
.color_hufflepuff {
  color: #fcd368 !important;
}
.color_hufflepuff1 {
 background: radial-gradient(closest-side at 50% 50%, #fff173 0%, #a08a00 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(233, 220, 74, 0.25);
}
.color_hufflepuff2 {
  color: #fcd368;
  background: linear-gradient(90deg, #fffca7 0%, #fcd368 50%, #c9ad00 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(233, 220, 74, .35), 0 0 12px rgba(233, 220, 74, .15);
  animation: magicGlow 7s infinite ease-in-out;
}
.color_hufflepuff3 {
  color: #fcd368;
  background: linear-gradient(90deg, #e4d851 0%, #b4a622 50%, #6f6010 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(233, 220, 74, .45), 0 0 20px rgba(233, 220, 74, .25);
  animation: nightGlow 9s infinite ease-in-out;
}
.color_hufflepuff a {
  color: #d2b366 !important;
}
/* Ravenclaw / Krukon */
.color_ravenclaw {
  color: #156abf !important;
}
.color_ravenclaw1 {
 background: radial-gradient(closest-side at 50% 50%, #7fd5ff 0%, #004e80 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(62, 157, 203, 0.25);
}
.color_ravenclaw2 {
  color: #156abf;
  background: linear-gradient(90deg, #80d4ff 0%, #156abf 50%, #125d8b 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(62, 157, 203, .35), 0 0 12px rgba(62, 157, 203, .15);
  animation: magicGlow 8s infinite ease-in-out;
}
.color_ravenclaw3 {
  color: #156abf;
  background: linear-gradient(90deg, #4ea9d9 0%, #2e7ba6 50%, #114b71 100%);
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(62, 157, 203, .45), 0 0 20px rgba(62, 157, 203, .25);
  animation: nightGlow 8.5s infinite ease-in-out;
}
.color_ravenclaw a {
  color: #216cb7 !important;
}
/* Slytherin / Żmijowaty */
.color_slytherin {
  color: #2d8547 !important;
}
.color_slytherin1 {
 background: radial-gradient(closest-side at 50% 50%, #4aff88 0%, #007a2e 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(41, 237, 79, 0.25);
}
.color_slytherin2 {
  color: #2d8547;
  background: linear-gradient(90deg, #7effb4 0%, #2d8547 50%, #0f6d25 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 6px rgba(41, 237, 79, .35), 0 0 12px rgba(41, 237, 79, .15);
  animation: magicGlow 6.5s infinite ease-in-out;
}
.color_slytherin3 {
  color: #2d8547;
  background: linear-gradient(90deg, #3be06b 0%, #20c642 50%, #0a4418 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: 0 0 10px rgba(41, 237, 79, .45), 0 0 20px rgba(41, 237, 79, .25);
  animation: nightGlow 7.5s infinite ease-in-out;
}
.color_slytherin a {
  color: #419f5d !important;
}

.dom1 a:hover {
  color: #ba1515;
}

.dom2 a:hover {
  color: #fcd368;
}

.dom3 a:hover {
  color: #156abf;
}

.dom4 a:hover {
  color: #2d8547;
}

.nick-prof a:hover {
  color: #0e636b !important;
}

.nick1 a:hover {
  color: #0e636b !important;
}

.nick2 a:hover {
  color: #9c0948 !important;
}
.nick-intern a:hover {
  color: #9c0948 !important;
}

.nick-stud a:hover {
  color: #ba1515 !important;
}

.padding25-0 {
  padding: 25px 0px;
}

.padding15-0 {
  padding: 25px 0px;
}

.text-left {
  text-align: left !important;
}
.text-center {
  text-align: center !important;
}
.text-right {
  text-align: right !important;
}

ul.center-style {
  text-align: center;
}

ul.center-style li {
  text-align: center;
  list-style-image: none !important;
  list-style-type: none !important;
}

.w-100 {
  width: 100% !important;
}

.w-80 {
  width: 80% !important;
}

.m-auto {
  margin: 0 auto;
}

.h-100 {
  height: 100% !important;
}

.d-none {
  display: none !important;
}

.color-white {
  color: #fff;
}

.fs-1 {
  font-size: 0.25rem;
}
.fs-2 {
  font-size: 0.5rem;
}
.fs-3 {
  font-size: 0.75rem;
}
.fs-4 {
  font-size: 1.5rem;
}

.pt-1 {
  padding-top: 0.25rem;
}
.pt-2 {
  padding-top: 0.5rem;
}
.pt-3 {
  padding-top: 0.75rem;
}
.pt-4 {
  padding-top: 1.5rem;
}

.p-0 {
  padding: 0px !important;
}
.p-1 {
  padding: 0.25rem;
}
.p-2 {
  padding: 0.5rem;
}
.p-3 {
  padding: 0.75rem;
}

.mb-1 {
  margin-bottom: 0.25rem;
}
.mb-2 {
  margin-bottom: 0.5rem;
}
.mb-3 {
  margin-bottom: 0.75rem;
}
.mb-4 {
  margin-bottom: 1.5rem;
}

.m-0 {
  margin: 0px;
}

.float-right {
  float: right;
}

.float-left {
  float: left;
}

.img-fluid {
  max-width: 100%;
  height: auto;
}

.img-thumbnail {
  padding: 0.25rem;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  max-width: 100%;
  height: auto;
}

.clear-both {
  clear: both;
}

.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

.row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -15px;
  margin-left: -15px;
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

.col-xl,
.col-xl-auto,
.col-xl-12,
.col-xl-11,
.col-xl-10,
.col-xl-9,
.col-xl-8,
.col-xl-7,
.col-xl-6,
.col-xl-5,
.col-xl-4,
.col-xl-3,
.col-xl-2,
.col-xl-1,
.col-lg,
.col-lg-auto,
.col-lg-12,
.col-lg-11,
.col-lg-10,
.col-lg-9,
.col-lg-8,
.col-lg-7,
.col-lg-6,
.col-lg-5,
.col-lg-4,
.col-lg-3,
.col-lg-2,
.col-lg-1,
.col-md,
.col-md-auto,
.col-md-12,
.col-md-11,
.col-md-10,
.col-md-9,
.col-md-8,
.col-md-7,
.col-md-6,
.col-md-5,
.col-md-4,
.col-md-3,
.col-md-2,
.col-md-1,
.col-sm,
.col-sm-auto,
.col-sm-12,
.col-sm-11,
.col-sm-10,
.col-sm-9,
.col-sm-8,
.col-sm-7,
.col-sm-6,
.col-sm-5,
.col-sm-4,
.col-sm-3,
.col-sm-2,
.col-sm-1,
.col,
.col-auto,
.col-12,
.col-11,
.col-10,
.col-9,
.col-8,
.col-7,
.col-6,
.col-5,
.col-4,
.col-3,
.col-2,
.col-1 {
  position: relative;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
}

.col {
  flex-basis: 0;
  flex-grow: 1;
  max-width: 100%;
}

.row-cols-1 > * {
  flex: 0 0 100%;
  max-width: 100%;
}

.row-cols-2 > * {
  flex: 0 0 50%;
  max-width: 50%;
}

.row-cols-3 > * {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.row-cols-4 > * {
  flex: 0 0 25%;
  max-width: 25%;
}

.row-cols-5 > * {
  flex: 0 0 20%;
  max-width: 20%;
}

.row-cols-6 > * {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
}

.col-1 {
  flex: 0 0 8.3333333333%;
  max-width: 8.3333333333%;
}

.col-2 {
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}

.col-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-4 {
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
}

.col-5 {
  flex: 0 0 41.6666666667%;
  max-width: 41.6666666667%;
}

.col-6 {
  flex: 0 0 45.3%;
  max-width: 45.3%;
}

.col-7 {
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}

.col-8 {
  flex: 0 0 66.6666666667%;
  max-width: 66.6666666667%;
}

.col-9 {
  flex: 0 0 75%;
  max-width: 75%;
}

.col-10 {
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}

.col-11 {
  flex: 0 0 91.6666666667%;
  max-width: 91.6666666667%;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
}

.order-first {
  order: -1;
}

.order-last {
  order: 13;
}

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

.order-6 {
  order: 6;
}

.order-7 {
  order: 7;
}

.order-8 {
  order: 8;
}

.order-9 {
  order: 9;
}

.order-10 {
  order: 10;
}

.order-11 {
  order: 11;
}

.order-12 {
  order: 12;
}

.offset-1 {
  margin-left: 8.3333333333%;
}

.offset-2 {
  margin-left: 16.6666666667%;
}

.offset-3 {
  margin-left: 25%;
}

.offset-4 {
  margin-left: 33.3333333333%;
}

.offset-5 {
  margin-left: 41.6666666667%;
}

.offset-6 {
  margin-left: 50%;
}

.offset-7 {
  margin-left: 58.3333333333%;
}

.offset-8 {
  margin-left: 66.6666666667%;
}

.offset-9 {
  margin-left: 75%;
}

.offset-10 {
  margin-left: 83.3333333333%;
}

.offset-11 {
  margin-left: 91.6666666667%;
}

@media (min-width: 576px) {
  .col-sm {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-sm-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-sm-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-sm-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-sm-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-sm-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-sm-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-sm-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-sm-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-sm-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-sm-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-sm-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-sm-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-sm-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-sm-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-sm-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-sm-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-sm-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-sm-first {
    order: -1;
  }

  .order-sm-last {
    order: 13;
  }

  .order-sm-0 {
    order: 0;
  }

  .order-sm-1 {
    order: 1;
  }

  .order-sm-2 {
    order: 2;
  }

  .order-sm-3 {
    order: 3;
  }

  .order-sm-4 {
    order: 4;
  }

  .order-sm-5 {
    order: 5;
  }

  .order-sm-6 {
    order: 6;
  }

  .order-sm-7 {
    order: 7;
  }

  .order-sm-8 {
    order: 8;
  }

  .order-sm-9 {
    order: 9;
  }

  .order-sm-10 {
    order: 10;
  }

  .order-sm-11 {
    order: 11;
  }

  .order-sm-12 {
    order: 12;
  }

  .offset-sm-0 {
    margin-left: 0;
  }

  .offset-sm-1 {
    margin-left: 8.3333333333%;
  }

  .offset-sm-2 {
    margin-left: 16.6666666667%;
  }

  .offset-sm-3 {
    margin-left: 25%;
  }

  .offset-sm-4 {
    margin-left: 33.3333333333%;
  }

  .offset-sm-5 {
    margin-left: 41.6666666667%;
  }

  .offset-sm-6 {
    margin-left: 50%;
  }

  .offset-sm-7 {
    margin-left: 58.3333333333%;
  }

  .offset-sm-8 {
    margin-left: 66.6666666667%;
  }

  .offset-sm-9 {
    margin-left: 75%;
  }

  .offset-sm-10 {
    margin-left: 83.3333333333%;
  }

  .offset-sm-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 768px) {
  .col-md {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-md-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-md-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-md-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-md-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-md-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-md-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-md-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-md-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-md-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-md-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-md-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-md-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-md-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-md-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-md-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-md-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-md-first {
    order: -1;
  }

  .order-md-last {
    order: 13;
  }

  .order-md-0 {
    order: 0;
  }

  .order-md-1 {
    order: 1;
  }

  .order-md-2 {
    order: 2;
  }

  .order-md-3 {
    order: 3;
  }

  .order-md-4 {
    order: 4;
  }

  .order-md-5 {
    order: 5;
  }

  .order-md-6 {
    order: 6;
  }

  .order-md-7 {
    order: 7;
  }

  .order-md-8 {
    order: 8;
  }

  .order-md-9 {
    order: 9;
  }

  .order-md-10 {
    order: 10;
  }

  .order-md-11 {
    order: 11;
  }

  .order-md-12 {
    order: 12;
  }

  .offset-md-0 {
    margin-left: 0;
  }

  .offset-md-1 {
    margin-left: 8.3333333333%;
  }

  .offset-md-2 {
    margin-left: 16.6666666667%;
  }

  .offset-md-3 {
    margin-left: 25%;
  }

  .offset-md-4 {
    margin-left: 33.3333333333%;
  }

  .offset-md-5 {
    margin-left: 41.6666666667%;
  }

  .offset-md-6 {
    margin-left: 50%;
  }

  .offset-md-7 {
    margin-left: 58.3333333333%;
  }

  .offset-md-8 {
    margin-left: 66.6666666667%;
  }

  .offset-md-9 {
    margin-left: 75%;
  }

  .offset-md-10 {
    margin-left: 83.3333333333%;
  }

  .offset-md-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 992px) {
  .col-lg {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-lg-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-lg-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-lg-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-lg-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-lg-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-lg-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-lg-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-lg-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-lg-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-lg-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-lg-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-lg-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-lg-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-lg-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-lg-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-lg-first {
    order: -1;
  }

  .order-lg-last {
    order: 13;
  }

  .order-lg-0 {
    order: 0;
  }

  .order-lg-1 {
    order: 1;
  }

  .order-lg-2 {
    order: 2;
  }

  .order-lg-3 {
    order: 3;
  }

  .order-lg-4 {
    order: 4;
  }

  .order-lg-5 {
    order: 5;
  }

  .order-lg-6 {
    order: 6;
  }

  .order-lg-7 {
    order: 7;
  }

  .order-lg-8 {
    order: 8;
  }

  .order-lg-9 {
    order: 9;
  }

  .order-lg-10 {
    order: 10;
  }

  .order-lg-11 {
    order: 11;
  }

  .order-lg-12 {
    order: 12;
  }

  .offset-lg-0 {
    margin-left: 0;
  }

  .offset-lg-1 {
    margin-left: 8.3333333333%;
  }

  .offset-lg-2 {
    margin-left: 16.6666666667%;
  }

  .offset-lg-3 {
    margin-left: 25%;
  }

  .offset-lg-4 {
    margin-left: 33.3333333333%;
  }

  .offset-lg-5 {
    margin-left: 41.6666666667%;
  }

  .offset-lg-6 {
    margin-left: 50%;
  }

  .offset-lg-7 {
    margin-left: 58.3333333333%;
  }

  .offset-lg-8 {
    margin-left: 66.6666666667%;
  }

  .offset-lg-9 {
    margin-left: 75%;
  }

  .offset-lg-10 {
    margin-left: 83.3333333333%;
  }

  .offset-lg-11 {
    margin-left: 91.6666666667%;
  }
}
@media (min-width: 1200px) {
  .col-xl {
    flex-basis: 0;
    flex-grow: 1;
    max-width: 100%;
  }

  .row-cols-xl-1 > * {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .row-cols-xl-2 > * {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .row-cols-xl-3 > * {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .row-cols-xl-4 > * {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .row-cols-xl-5 > * {
    flex: 0 0 20%;
    max-width: 20%;
  }

  .row-cols-xl-6 > * {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xl-auto {
    flex: 0 0 auto;
    width: auto;
    max-width: 100%;
  }

  .col-xl-1 {
    flex: 0 0 8.3333333333%;
    max-width: 8.3333333333%;
  }

  .col-xl-2 {
    flex: 0 0 16.6666666667%;
    max-width: 16.6666666667%;
  }

  .col-xl-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }

  .col-xl-4 {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
  }

  .col-xl-5 {
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
  }

  .col-xl-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }

  .col-xl-7 {
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
  }

  .col-xl-8 {
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }

  .col-xl-9 {
    flex: 0 0 75%;
    max-width: 75%;
  }

  .col-xl-10 {
    flex: 0 0 83.3333333333%;
    max-width: 83.3333333333%;
  }

  .col-xl-11 {
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }

  .col-xl-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .order-xl-first {
    order: -1;
  }

  .order-xl-last {
    order: 13;
  }

  .order-xl-0 {
    order: 0;
  }

  .order-xl-1 {
    order: 1;
  }

  .order-xl-2 {
    order: 2;
  }

  .order-xl-3 {
    order: 3;
  }

  .order-xl-4 {
    order: 4;
  }

  .order-xl-5 {
    order: 5;
  }

  .order-xl-6 {
    order: 6;
  }

  .order-xl-7 {
    order: 7;
  }

  .order-xl-8 {
    order: 8;
  }

  .order-xl-9 {
    order: 9;
  }

  .order-xl-10 {
    order: 10;
  }

  .order-xl-11 {
    order: 11;
  }

  .order-xl-12 {
    order: 12;
  }

  .offset-xl-0 {
    margin-left: 0;
  }

  .offset-xl-1 {
    margin-left: 8.3333333333%;
  }

  .offset-xl-2 {
    margin-left: 16.6666666667%;
  }

  .offset-xl-3 {
    margin-left: 25%;
  }

  .offset-xl-4 {
    margin-left: 33.3333333333%;
  }

  .offset-xl-5 {
    margin-left: 41.6666666667%;
  }

  .offset-xl-6 {
    margin-left: 50%;
  }

  .offset-xl-7 {
    margin-left: 58.3333333333%;
  }

  .offset-xl-8 {
    margin-left: 66.6666666667%;
  }

  .offset-xl-9 {
    margin-left: 75%;
  }

  .offset-xl-10 {
    margin-left: 83.3333333333%;
  }

  .offset-xl-11 {
    margin-left: 91.6666666667%;
  }
}
.--col-shop {
  padding-bottom: 48px !important;
}
.--col-shop a {
  position: absolute;
  text-align: center;
  left: 0px;
  right: 0px;
  bottom: 0px;
}

.message- {
  /*Main*/
}
/* LEWY DYMek – rozmówca */
.message-left {
    float: left;
    clear: both;
    width: auto;              /* szerokość zależna od treści */
    max-width: 70%;           /* maksymalna szerokość bąbelka */
    background: rgba(70, 70, 70, 0.18);
    border: 1px solid rgba(180, 180, 180, 0.40);
    border-radius: 18px;
    padding: 12px 16px;
    margin-top: 10px;
    backdrop-filter: blur(3px);
    box-shadow:
        inset 0 0 10px rgba(255,255,255,0.08),
        0 0 12px rgba(255,255,255,0.10);
}

/* PRAWY dymek – Ty */
.message-right {
    float: right;
    clear: both;
    width: auto;              /* szerokość zależna od treści */
    max-width: 70%;
    text-align: left;         /* zachowuje normalne wyrównanie tekstu */
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(200, 200, 200, 0.35);
    border-radius: 18px;
    padding: 12px 16px;
    margin-top: 10px;
    backdrop-filter: blur(3px);
    box-shadow:
        inset 0 0 12px rgba(255,255,255,0.06),
        0 0 14px rgba(160,160,160,0.15);
}


.timetable,
.timetable td,
.timetable th {
  border: none !important;
}

.timetable .font_almendra * {
  font-family: "Almendra", serif;
  font-smooth: always;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/**
** Gromoptak Update
**/

.progress-container {
  margin: 4px 0px;
}

.progress-label {
}

.progress-label span {
  float: right;
  font-weight: bold;
}

.progress-bar {
  height: 4px;
  background-color: #14171c;
  border-top: 1px solid #060709;
  border-bottom: 1px solid #060709;
}

.progress {
  height: 100%;
  background: linear-gradient(to right, #e7e401, #992d00, #52c74f, #5f8bfc);
}

.progress-yellow {
  background: linear-gradient(to right, #e7e401, #aba902);
}
.progress-red {
  background: linear-gradient(to right, #992d00, #4b1000);
}
.progress-green {
  background: linear-gradient(to right, #52c74f, #1f6818);
}
.progress-blue {
  background: linear-gradient(to right, #5f8bfc, #173280);
}

.gromoptak-equip {
  margin-top: 20px;
  padding-left: 10px;
}

.gromoptak-equip .equip-item {
  margin-top: 21px;
  text-align: center;
  align-items: center;
}

.gromoptak-equip .equip-item h3 {
  display: inline;
}

.gromoptak-equip .equip-item img {
  width: 80px;
  display: block;
  margin: 0 auto;
}

.gromoptak-action-handler {
  position: relative;
}

.gromoptak-action-handler .go-to-mission {

  position: initial;
  text-align: center;
  width: 100%;
  bottom: 0px;
}

.gromoptak-action {
  display: block;
  text-align: center;
  width: 100%;
  border: 1px solid #3c3531;
  padding: 5px 10px;
  margin: 3px 0px;
}

.gromoptak-needs-handler {
}

.gromoptak-image {
  width: 450px;
}

@keyframes pulse {
  0% {
    opacity: 0.2;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

.pulsating-div {
  animation: pulse 2s infinite;
}

/** 
*** Update 202405 
**/
.position-relative {
  position: relative;
}

.avatar-wrapper {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-wrapper-small {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}

.avatar-frame {
    position: absolute;
    z-index: 3;

    filter:
        drop-shadow(0px 0px 10px rgba(0,0,0,0.85))
        drop-shadow(0px 0px 20px rgba(80,80,80,0.35))
        drop-shadow(0px 6px 14px rgba(0,0,0,0.9));
}



/** 
*** Update 202409 
**/

.avatar-round{
  border-radius: 50%;
  width: 40px;
  height: 40px;
  vertical-align: middle;
}

/* === Tekst z gradientem (ostry w Chrome/Opera) === */

/* === TRZYKOLOROWE GRADIENTY — eleganckie i gładkie === */

.role-value[class*="color_"],
.role-value[class*="color_"] a {
  -webkit-background-clip: text;
          background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  background-image: var(--grad);
  background-size: 100% 100%;
  -webkit-font-smoothing: antialiased;
          font-smooth: always;
  text-rendering: geometricPrecision;
  mix-blend-mode: normal;
  filter: none;

  /* lekkie „podostrzenie”, nie cień */
  text-shadow: 0 0 0.25px rgba(255,255,255,0.18);
}

/* === DZIENNE === */
.color_gryffindor-auto { 
  --grad: linear-gradient(90deg,
    #7a0f1a 0%,   /* ciemnoczerwony */
    #ff6673 45%,  /* jasny środek */
    #8b1b27 100%  /* z powrotem lekko ciemniej */
  );
}
.color_hufflepuff-auto { 
  --grad: linear-gradient(90deg,
    #a28c00 0%,   /* złoty brąz */
    #fff57a 45%,  /* jasny żółty */
    #c5a800 100%  /* cieplejszy złoty */
  );
}
.color_ravenclaw-auto  { 
  --grad: linear-gradient(90deg,
    #08314f 0%,   /* granat */
    #52b8e8 50%,  /* jasny błękit */
    #1c5983 100%  /* średni niebieski */
  );
}
.color_slytherin-auto  { 
  --grad: linear-gradient(90deg,
    #0b3a1b 0%,   /* ciemna zieleń */
    #3af582 45%,  /* limonkowo-szmaragdowy środek */
    #147d3c 100%  /* z powrotem ciemniejszy */
  );
}

/* === DARK MODE — mniej kontrastowy, ale dalej 3-kolorowy === */
@media (prefers-color-scheme: dark) {
  .color_gryffindor-auto { 
    --grad: linear-gradient(90deg, #5c0c14 0%, #cc3c4c 50%, #721a25 100%);
  }
  .color_hufflepuff-auto { 
    --grad: linear-gradient(90deg, #7d6e0c 0%, #e7d84e 50%, #9b870d 100%);
  }
  .color_ravenclaw-auto  { 
    --grad: linear-gradient(90deg, #07293f 0%, #3b8bbf 50%, #0f5076 100%);
  }
  .color_slytherin-auto  { 
    --grad: linear-gradient(90deg, #0a2f17 0%, #2ac664 50%, #0d4f25 100%);
  }
}


/* 4) Minimalna „precyzja” dla labeli (OPIEKUN / PREFEKT), żeby wyglądały równie gładko */
.role-label {
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  text-shadow: 0 0 0.25px rgba(255,255,255,0.15);
}




/* --- Linki w lewym bocznym menu (srebrny styl) --- */
.sidebar a,
.leftmenu a,
.block a,
.block li a {
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

/* Subtelny refleks pod linkiem */
.sidebar a::after,
.leftmenu a::after,
.block a::after,
.block li a::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #e0e0e0, transparent);
  transition: width 0.4s ease;
}

.sidebar a:hover::after,
.leftmenu a:hover::after,
.block a:hover::after,
.block li a:hover::after {
  width: 100%;
}



tr:has(.g-recaptcha) {
  vertical-align: middle;
}

/* Widoczna ramka + glow, bez ryzyka poszerzania strony */
td .g-recaptcha {
  display: inline-block;
  padding: 10px;
  border-radius: 12px;
  background: rgba(15, 15, 15, 0.65);
  outline: 1px solid #cfcfcf;                 /* zamiast box-shadow: 0 0 0 2px */


}

/* (opcjonalnie) delikatne pomniejszenie – można wyłączyć, jeśli nie chcesz */
td .g-recaptcha > div {
  transform: scale(0.98);
  transform-origin: center;
}

td .g-recaptcha:hover {
  outline-color: #e5e5e5;
  box-shadow: 0 0 22px rgba(235,235,235,0.9);
}


/* --- Styl i srebrne pulsowanie dla przycisku "Zarejestruj" --- */
input[type="submit"],
button[type="submit"],
.zarejestruj-btn {
  background: rgba(25, 25, 25, 0.8);
  border: 1px solid #cfcfcf;
  color: #f0f0f0;
  font-family: "Almendra", serif;
  font-size: 16px;
  padding: 6px 20px;
  border-radius: 10px;

  text-shadow: 0 0 6px rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  animation: argoButtonGlow 4s ease-in-out infinite;
}

input[type="submit"]:hover,
button[type="submit"]:hover,
.zarejestruj-btn:hover {
  background: rgba(45, 45, 45, 0.95);
  border-color: #ffffff;
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.9),
    0 0 20px rgba(230, 230, 230, 0.7);
  animation: none; /* zatrzymuje pulsowanie na hover */
}



html, body {
  cursor: url("/files/cur/cursor.png") 2 2, auto;
}

a, button, [role="button"], input[type='submit'], input[type='button'] {
  cursor: url("/files/cur/cursor.png") 2 2, pointer;
}

input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #bfbfbf;
  border-radius: 3px;
  background-color: transparent;
  margin-right: 8px;
  vertical-align: middle;

  transition: all 0.2s ease;
}

input[type="checkbox"]:checked {
  background-color: #cfcfcf;
  box-shadow: 0 0 5px #cfcfcf;
}

label {
  color: #dcdcdc;
  font-family: "Almendra", serif;
  font-size: 16px;

}


/* tylko główna klepsydra ma być 100% */
.hourglass > img.glow-red { width:100%; height:auto; display:block; }

/* ogon nie może się rozciągać */
.hourglass > img.tail {
  width:auto;           /* wyłącza rozciąganie */
  height:auto;
  max-width:none;
  position:absolute;
  left:17px;
  top:-2px;
  z-index:10;
  pointer-events:none;  /* klik przechodzi do klepsydry */
}


.hourglass .level{
  transition: height .9s ease-out, transform .9s ease-out;
}

/* warstwa na efekt ziarenek */
.hourglass .sand-fx{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:12;
  overflow:visible;
}

/* ziarenko */
.sand-grain{
  position:absolute;
  width:3px; height:3px;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #f4d3a1, #b88957 60%, #7b5636 100%);
  opacity:.95;
  filter: blur(.2px);
  animation: grain-fall var(--t,1200ms) cubic-bezier(.25,.6,.2,1) forwards;
}

@keyframes grain-fall{
  0%   { transform: translate(var(--sx,0), var(--sy,0)) scale(.9); opacity:.0; }
  5%   { opacity:1; }
  100% { transform: translate(var(--ex,0), var(--ey,120px)) scale(1.05); opacity:.1; }
}

.sand-grain.up{ animation-name: grain-rise; }
@keyframes grain-rise{
  0%   { transform: translate(var(--sx,0), var(--sy,0)) scale(.9); opacity:.0; }
  5%   { opacity:1; }
  100% { transform: translate(var(--ex,0), var(--ey,-120px)) scale(.95); opacity:.1; }
}

*/
/* === MAGICZNE ŚWIECĄCE KOLORY PIASKU DLA DOMÓW === */
.house.gryff .sand-grain {
  background: radial-gradient(circle at 30% 30%, #ff9999, #d41717 60%, #5b0000 100%);
  box-shadow: 0 0 8px 2px rgba(212, 23, 23, 0.7);
}

.house.huff .sand-grain {
  background: radial-gradient(circle at 30% 30%, #fff9b0, #d6b800 60%, #8a7600 100%);
  box-shadow: 0 0 8px 2px rgba(214, 184, 0, 0.7);
}

.house.rav .sand-grain {
  background: radial-gradient(circle at 30% 30%, #b0d4ff, #2a77ff 60%, #001a5b 100%);
  box-shadow: 0 0 8px 2px rgba(42, 119, 255, 0.6);
}

.house.sly .sand-grain {
  background: radial-gradient(circle at 30% 30%, #afffd1, #00b86b 60%, #004d2a 100%);
  box-shadow: 0 0 8px 2px rgba(0, 184, 107, 0.6);
}

.house.gryff .level {
 border-radius: 25px;
 background: linear-gradient(to top, #d41717, #5b0000); }
.house.huff .level {
 border-radius: 25px;
 background: linear-gradient(to top, #d6b800, #9b7e00); }
.house.rav .level { 
 border-radius: 25px;
 background: linear-gradient(to top, #3477b1, #184f7c); }
.house.sly .level {
 border-radius: 25px;
 background: linear-gradient(to top, #00b86b, #004d2a); }

@keyframes grain-glow {
  0%, 100% { filter: drop-shadow(0 0 4px currentColor) brightness(1); }
  50%      { filter: drop-shadow(0 0 10px currentColor) brightness(1.3); }
}

/* jedno źródło prawdy dla wyglądu ziarenka */
.sand-grain{
  background: radial-gradient(circle at 30% 30%, var(--sand1), var(--sand2) 60%, var(--sand3) 100%);
  box-shadow: 0 0 8px 2px var(--sandGlow);
}

/* domyślne (gdyby jakiś dom nie miał dopasowanej klasy) */
.house{
  --sand1:#f4d3a1;  /* jasny */
  --sand2:#b88957;  /* środek */
  --sand3:#7b5636;  /* ciemny */
  --sandGlow: rgba(255, 220, 160, .55);
}

/* GRYFFINDOR */
.house.gryff, .house.gryffindor{
  --sand1:#ff9999;
  --sand2:#d41717;
  --sand3:#5b0000;
  --sandGlow: rgba(212,23,23,.70);
}

/* HUFFLEPUFF */
.house.huff, .house.hufflepuff{
  --sand1:#fff9b0;
  --sand2:#d6b800;
  --sand3:#8a7600;
  --sandGlow: rgba(214,184,0,.70);
}

/* RAVENCLAW */
.house.rav, .house.ravenclaw{
  --sand1:#b0d4ff;
  --sand2:#2a77ff;
  --sand3:#001a5b;
  --sandGlow: rgba(42,119,255,.60);
}

/* SLYTHERIN — obejmij różne możliwe nazwy klasy */
.house.slyth, .house.slytherin, .house.sly{
  --sand1:#afffd1;
  --sand2:#00b86b;
  --sand3:#004d2a;
  --sandGlow: rgba(0,184,107,.60);
}

/* elipsa-górka na wierzchu poziomu piasku */
.hourglass .dune{
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  /* rozmiar górki - proporcjonalny do szerokości wewnętrznej klepsydry */
  --dune-w: calc(var(--glass-w, 120px) * 0.70);
  --dune-h: calc(var(--glass-w, 120px) * 0.28);
  width: var(--dune-w);
  height: var(--dune-h);
  /* pozycja: „siedzi” na szczycie wypełnienia */
  bottom: calc(var(--level-h, 0px) - (var(--dune-h) * 0.30));
  z-index: 2;
  pointer-events:none;
  border-radius: 100% / 60%;
  /* kolor jak ziarenka – z lekkim połyskiem */
  background:
    radial-gradient(ellipse at 50% 40%,
      var(--sand1) 0%,
      var(--sand2) 60%,
      var(--sand3) 100%);
  filter: saturate(1.05);
  opacity: .95;
  transition: bottom .9s ease-out, transform .9s ease-out;
   transform: translateX(calc(-50% + var(--dune-skew, 0px)));
}

/* delikatny „glow” w kolorze domu, subtelny, żeby nie walił po oczach */
.hourglass .dune::after{
  content:"";
  position:absolute; inset:-6% -10% -30%;
  border-radius:inherit;
  box-shadow: 0 0 18px 4px var(--sandGlow);
  opacity:.55;
}

a {
  color: #cfcfcf;
  text-decoration: none;
  position: relative;
  transition: color .25s ease, text-shadow .25s ease;
}


/* delikatny cień w spoczynku */
a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  opacity: 0;
  transform: scaleX(0.6);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: none;
}

/* po najechaniu – jasne srebro + cienka poświata pod tekstem */
a:hover {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(255,255,255,0.35);
}

/* animacja podkreślenia przy hoverze */
a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* aktywne / bieżące linki (np. w menu lub pagerze) */
a.active,
.news-pagination strong {
  color: #fff;
  text-shadow: 0 0 8px rgba(255,255,255,0.4);
  border-bottom: 1px solid rgba(255,255,255,0.35);
}

input[type="checkbox"] {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 2px solid #bfbfbf;
  border-radius: 3px;
  background-color: transparent;
  margin-right: 8px;
  vertical-align: middle;

  transition: all 0.2s ease;
}

input[type="checkbox"]:checked {
  background-color: #cfcfcf;
  box-shadow: 0 0 5px #cfcfcf;
}

label {
  color: #dcdcdc;
  font-family: "Almendra", serif;
  font-size: 16px;

}


/* Checkboxy logowania */
.auth-checks {
  margin: 6px 0;
  display: grid;
  gap: 6px;
}
.auth-check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1.2;

}

.auth-check input[type="checkbox"] {
  width: 17px;
  height: 17px;
  accent-color: #dcdcdc; /* srebrny akcent */

}
.auth-check span {
  color: #dcdcdc;
  font-size: 14px;
}

:root{
  --uline-color: rgba(230,230,230,.55); /* podmień na dokładnie ten sam kolor co globalny */
  --uline-height: 2px;
  --uline-offset: .18em;
}

/* zgaś wszelkie natywne podkreślenia/bordery tylko dla tego przycisku */
.nice_block .newsButtonsArea a.newsMoreButton,
.nice_block .newsButtonsArea a.newsMoreButton:hover,
.nice_block .newsButtonsArea a.newsMoreButton:focus,
.nice_block .newsButtonsArea a.newsMoreButton h2 {
  text-decoration: none !important;
  border: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* gradientowy „ucięty” underline */
.link-uline{
  position: relative;
  display: inline;
  text-decoration: none;
  padding-bottom: var(--uline-offset);
  background-repeat: no-repeat;
  background-position: 0 calc(100% - var(--uline-offset));
  background-size: 0 var(--uline-height); /* start: ukryty */
  background-image: linear-gradient(90deg,
    transparent 0,
    var(--uline-color) 12%,
    var(--uline-color) 88%,
    transparent 100%);
  transition: background-size .22s ease;
}
.link-uline:hover,
.link-uline:focus-visible{
  background-size: 100% var(--uline-height);
}

/* Wyłącz globalny a::after tylko dla przycisków 'Rozwiń newsa' / 'Wszystkie newsy' */
.nice_block .newsButtonsArea a.newsMoreButton::after,
.nice_block .newsButtonsArea a.newsMoreButton:hover::after,
.nice_block .newsButtonsArea a.newsMoreButton:focus::after {
  content: none !important;
  display: none !important;
}

/* --- Styl dla linku "Archiwum newsów" (dół strony) --- */
.nice_block center a[href*="archived"],
.nice_block center a[href*="option=archived"] {
  display: inline-block !important;
  margin-top: 6px;
  padding: 6px 18px;
  font-family: "FoglihtenNo07 Regular", serif;
  font-size: 15px;
  color: #ddd !important;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.05);
  text-decoration: none;
  transition: all 0.25s ease;
  backdrop-filter: blur(2px);
}

/* Efekt po najechaniu */
.nice_block center a[href*="archived"]:hover,
.nice_block center a[href*="option=archived"]:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.12);
}

.magic-link {
  display: inline-block;
  padding: 8px 20px;
  margin-top: 6px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(200, 200, 200, 0.5);
  border-radius: 20px;
  color: #ddd;
    font-family: "FoglihtenNo07 Regular", serif;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.magic-link:hover {
  background: rgba(80, 80, 80, 0.45);
  border-color: rgba(220, 220, 220, 0.8);
  transform: translateY(-2px);
  box-shadow: 0 0 8px rgba(180, 180, 180, 0.5); /* subtelna srebrna poświata */
}

.page-link {
  padding: 4px 12px;
  margin: 2px;
  font-size: 13px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(180, 180, 180, 0.45);
  color: #ccc;
  text-decoration: none;
  transition: all 0.25s ease-in-out;
}

.page-link:hover {
  background: rgba(80, 80, 80, 0.45);
  border-color: rgba(220, 220, 220, 0.8);
  box-shadow: 0 0 6px rgba(180, 180, 180, 0.5);
  transform: translateY(-2px);
}

.news-pagination { text-align:center; margin:10px 0; }

.magic-page {
  display:inline-block;
  padding:4px 12px;
  margin:0 2px;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(180,180,180,.45);
  border-radius: 10px;
  color:#ccc;
  text-decoration:none;
  transition: all .25s ease-in-out;
  line-height: 1.1;
}

/* Link hover */
.news-pagination a.magic-page:hover {
  background: rgba(80,80,80,.45);
  border-color: rgba(220,220,220,.8);
  box-shadow: 0 0 6px rgba(180,180,180,.5);
  transform: translateY(-2px);
}

/* Aktywna strona */
.news-pagination strong.magic-page {
  background: rgba(120,120,120,.4);
  border-color: rgba(220,220,220,.7);
  color:#fff;
  box-shadow: 0 0 8px rgba(200,200,200,.4);
}

/* Strzałki nieaktywne */
.magic-page.disabled {
  pointer-events:none;
  opacity:.45;
  filter: grayscale(40%);
}

/* Ellipsa … */
.page-sep {
  opacity:.6;
  margin:0 4px;
}

/* === Pasek archiwum: przyciski i inputy w stylu silver === */
.archive-bar{
  display:flex; gap:12px; align-items:center; justify-content:space-between;
  margin:10px 0;
  font-family:"Almendra", serif;
}

/* linki Poprzednia / Następna */
.archive-bar a,
.archive-bar span{
  display:inline-block;
  padding:8px 12px;
  border:1px solid #8e8e8e;
  border-radius:999px;
  background:#1b1b1b;
  color:#e6e6e6;
  text-decoration:none;
  line-height:1;
  transition:all .2s ease;
}
.archive-bar a:hover{
  border-color:#cfcfcf; color:#fff;
  box-shadow:0 0 10px rgba(200,200,200,.35);
  transform:translateY(-1px);
}
.archive-bar span{ /* nieaktywne */
  opacity:.45; cursor:default; background:#111; border-color:#555; color:#aaa;
}

/* formularz "Skocz do strony" */
.archive-jump label{
  color:#d8d8d8; margin-right:4px;
}
.archive-jump input[type="number"]{
  width:130px; padding:8px 10px; border-radius:10px;
  border:1px solid #6f6f6f; background:#131313; color:#e6e6e6;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.archive-jump input[type="number"]:focus{
  outline:none; border-color:#c0c0c0;
  box-shadow:0 0 8px rgba(192,192,192,.35);
}

/* przyciski Idź / -1 / +1 (nadpisujemy delikatnie ignis-edit-modifier) */
.archive-jump .ignis-edit-modifier{
  background:linear-gradient(180deg,#3a3a3a 0%, #282828 100%);
  border:1px solid #9a9a9a;
  color:#f0f0f0;
  padding:8px 12px;
  border-radius:10px;
  line-height:1;
  transition:all .2s ease;
}
.archive-jump .ignis-edit-modifier:hover{
  border-color:#d8d8d8; color:#fff;
  box-shadow:0 0 10px rgba(220,220,220,.35);
  transform:translateY(-1px);
}

/* kompakt na telefonach */
@media (max-width:720px){
  .archive-bar{ flex-direction:column; gap:8px; align-items:stretch; }
  .archive-jump{ justify-content:space-between; }
  .archive-jump input[type="number"]{ flex:1; width:auto; }
}

/* (opcjonalnie) dopieszczenie pagera nad paskiem – spójne kapsułki */
.news-pagination a,
.news-pagination span,
.news-pagination strong{
  border:1px solid #7f7f7f;
  border-radius:999px;
  padding:4px 10px;
  margin:0 4px;
  background:#121212;
}
.news-pagination a:hover{
  background:#1e1e1e; color:#fff; box-shadow:0 0 8px rgba(200,200,200,.35);
}
.news-pagination strong{
  background:linear-gradient(180deg,#bfbfbf 0%, #8e8e8e 100%);
  color:#111; text-shadow:none; box-shadow:0 0 10px rgba(255,255,255,.45);
}

.login-options {
  margin-top: 15px;
  color: #dcdcdc;
  font-family: "Almendra", serif;
  font-size: 16px;
}

.login-options label {
  display: flex;
  align-items: center;
  margin-bottom: 8px;

}

.login-options input[type="checkbox"] {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 2px solid #cfcfcf;
  border-radius: 3px;
  margin-right: 10px;
  background-color: transparent;
  transition: all 0.2s ease;
}

.login-options input[type="checkbox"]:checked {
  background-color: #156abf;
  box-shadow: 0 0 5px #156abf;
}

.login-options span {
  color: #e0e0e0;
}

.reminder-btn{
  display:inline-block;
  text-decoration:none;
  line-height:0;          /* brak podbijania baseline'em */
  vertical-align:middle;
}

/* WRAPPER przycisku */
.reminder-btn{
  position:relative;
  display:inline-block;
  text-decoration:none;
}

.reminder-btn {
  display: inline-block;
  text-decoration: none;
  transition: filter 0.3s ease, transform 0.3s ease; /* płynny efekt */
}

.reminder-sprite {
  display: inline-block;
  width: 194px;
  height: 40px;
  background: url("/themes/ArgoMagic2025/gfx/przycisk-przypominajka.png") 0 0 no-repeat;
  background-size: 100% 200%; /* dwie klatki pionowo */
  transition: filter 0.4s ease, box-shadow 0.4s ease;
}

/* --- efekt po najechaniu --- */
.reminder-btn:hover .reminder-sprite {
  background-position-y: 100%; /* druga klatka */
  filter: brightness(1.4) saturate(1.2);
  box-shadow: 0 0 0px 0px rgba(255, 225, 160, 0.6); /* złoto-magiczny blask */
  transform: scale(1.02);
}

/* --- opcjonalne subtelne pulsowanie aury --- */
.reminder-btn:hover .reminder-sprite {
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% {
    filter: brightness(1.3) drop-shadow(0 0 6px rgba(255, 230, 180, 0.6));
  }
  50% {
    filter: brightness(1.6) drop-shadow(0 0 14px rgba(255, 255, 210, 0.9));
  }
}



.notif-sep {
  text-align: center;
  margin: 14px 0;
  opacity: 0.7;
  filter: drop-shadow(0 0 3px rgba(255,255,255,0.15));
}
.notif-sep img {
  max-width: 80%;
  height: auto;
  opacity: 0.75;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.notif-sep img:hover {
  opacity: 0.95;
  transform: scale(1.02);
}

fieldset ul li {
  list-style: none !important;
  list-style-image: none !important;
}

.homework-banner {
    font-family: "Almendra", serif;
    font-size: 28px;
    text-align: center;
    margin-bottom: 15px;
    color: #cfcfcf; /* srebro */
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(200,200,200,0.45);
    border-bottom: 1px solid rgba(200,200,200,0.25);
    padding-bottom: 8px;
}

.silver-star {
    color: #d0d0d0;
    text-shadow:
        0 0 5px rgba(220,220,220,0.7),
        0 0 10px rgba(220,220,220,0.4),
        0 0 15px rgba(220,220,220,0.3);
    font-size: 30px;
}

/* --- Lista prac domowych: wariant Hogwart Express --- */
.homework-table {
  border-collapse: collapse;
}

.homework-table th,
.homework-table td {
  padding: 8px 12px;
}

.homework-row td {
  vertical-align: top;
}

/* delikatny separator między wierszami */
.homework-row + .homework-row td {
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* ikonki i treści */
.hw-icon {
  display: inline-block;
  margin-right: 6px;
  font-size: 12px;
  opacity: 0.9;
}

.hw-term .hw-icon {
  font-size: 13px;
}

.hw-term .hw-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.7;
}

.hw-badge {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.hw-badge-tomorrow {
  color: orange;
}

.hw-badge-today {
  color: #e03e2d;
}

.hw-date {
  margin-top: 2px;
}

.hw-time {
  margin-top: 1px;
  opacity: 0.85;
}

/* przedmiot / nauczyciel */
.hw-subject {
  font-weight: 600;
}

.hw-teacher {
  font-weight: 400;
}

/* meta */
.hw-added {
  font-size: 12px;
}

.hw-link {
  font-size: 12px;
  text-decoration: none;
}

.hw-link:hover {
  text-decoration: underline;
}

.hw-status {
  font-size: 12px;
}

.hw-status-ok {
  color: #7ccd7c; /* zielonkawy, możesz zmienić na swoje złoto */
}

.hw-status-not {
  color: #b0b0b0;
}

.homework-row td {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.hw-meta .hw-icon {
    width: 20px;
    display: inline-block;
}
/* trochę ciaśniej między wierszami */
.homework-row td {
    padding: 6px 0 !important;
}

/* ładne wyrównanie ikonek w meta */
.hw-meta .hw-icon {
    width: 18px;
    display: inline-block;
}

/* rozwijana lista uczniów */
.hw-students-list {
    border-left: 1px dotted rgba(255,255,255,0.25);
    padding-left: 6px;
}

.hw-students-list table th,
.hw-students-list table td {
    padding: 2px 0;
}
/* zielony status */
.hw-status-ok {
    color: #7bff8a !important;   /* ładna magiczna zieleń */
    font-weight: 600;
}

/* czerwony status */
.hw-status-not {
    color: #ff6b6b !important;   /* elegancka czerwień */
    font-weight: 600;
}

/* Kontener z opcjami po prawej */
.hw-meta > div {
    display: flex;
    align-items: center;
    gap: 6px;           /* odstęp ikona–tekst */
    padding: 2px 0;
}

/* ikonki — powiększone */
.hw-meta .hw-icon {
    width: 24px;
    text-align: center;
    font-size: 20px;    /* duże ikonki */
    line-height: 1;
}

/* TEKST obok ikon — trochę większy */
.hw-meta .hw-link,
.hw-meta .hw-teacher,
.hw-meta span {
    font-size: 15px;            /* było 13–14, teraz czytelniejsze */
    line-height: 1.3;
}


/* Tytuł produktu w sklepie – magiczny glow */
.shop-title-glow {
    position: relative;
    font-size: 22px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    color: #9fb9c9;
    text-transform: none;
    text-shadow: 0 0 8px rgba(0,0,0,1), 0 0 14px rgba(0,0,0,0.8);
    transition: text-shadow 0.12s ease-out;
}


@keyframes shopTitlePulse {
    0%, 70%, 100% {
        text-shadow:
            0 0 4px rgba(0, 0, 0, 0.9),
            0 0 10px rgba(0, 0, 0, 0.8);
        filter: none;
    }

    /* moment „błysku” około 40% animacji */
    35%, 45% {
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.8),
            0 0 18px rgba(255, 255, 255, 0.7),
            0 0 26px rgba(255, 255, 255, 0.5);
    }
}

.magic-glow-link {
    position: relative;
    display: inline-block;
    padding: 4px 10px;
 
    color: #f3f3f3;
    text-shadow: 0 0 4px rgba(255,255,255,0.4);
    overflow: hidden;
}

.glow-spot {
    position: absolute;
    top: 0;
    left: 0;
    width: 140%;
    height: 140%;
    background: radial-gradient(
        circle,
        rgba(255,255,255,0.9) 0%,
        rgba(120,180,255,0.5) 20%,
        rgba(0,0,0,0) 60%
    );
    transform: translate(-50%, -50%);
    pointer-events: none;
    opacity: 0.85;
}

/* Magiczny box jak przycisk Nitro */
.magic-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 26px;
    border-radius: 999px;

    background: rgba(10, 10, 10, 0.92);
    color: #fdfdfd;
    font-size: 18px;
    text-decoration: none;

    border: 1px solid rgba(255, 255, 255, 0.15);

    box-shadow:
        0 0 0 1px rgba(0,0,0,0.7),
        0 10px 35px rgba(0,0,0,0.9);

    overflow: hidden;

    z-index: 0;
}

/* kolorowa poświata pod przyciskiem */
.magic-box::before {
    content: "";
    position: absolute;
    inset: -60%;
    background:
        radial-gradient(
            circle at var(--mx, 50%) var(--my, 50%),
            rgba(255,255,255,0.95) 0%,
            rgba(136,196,255,0.75) 18%,
            rgba(182,134,255,0.6) 33%,
            rgba(0,0,0,0) 70%
        );
    opacity: 0;
    transition: opacity 0.25s ease-out;
    z-index: -1;
}

/* przy najechaniu – włącz halo */
.magic-box:hover::before {
    opacity: 1;
}

/* delikatne rozjaśnienie tekstu przy hoverze */
.magic-box:hover {
    color: #ffffff;
    text-shadow: 0 0 6px rgba(255,255,255,0.6);
}

/* --- NITRO GLOW BUTTON --- */
/* --- BAZA DLA WSZYSTKICH NITRO-PRZYCISKÓW --- */
.nitro-btn {
    position: relative;
    display: inline-block;
    padding: 10px 30px;
    font-size: 19px;
    color: #ffffff;
    border-radius: 40px;
    text-decoration: none;
    font-family: 'Playfair Display', serif;


    overflow: visible;
    border: 1px solid rgba(255,255,255,0.15);
}

/* wspólne, subtelne halo za przyciskiem – sterowane JS-em przez --mx/--my */
.nitro-btn::before {
    content: "";
    position: absolute;
    inset: -14px;                 /* rozmiar halo */
    border-radius: inherit;
    background: radial-gradient(
        circle at var(--mx,50%) var(--my,50%),
        rgba(220,225,240,0.45),
        rgba(130,140,180,0.08),
        transparent 65%
    );
    opacity: 0;
    filter: blur(16px);
    transition: opacity .2s ease-out;
    z-index: -1;
}

.nitro-btn:hover::before {
    opacity: 1;
}

/* wariant 1 – miękki, lekko fioletowo–srebrny */
.nitro-soft {
    background: linear-gradient(120deg, #6b708a, #7f8bb4, #707795);
    box-shadow: 0 0 6px rgba(200,200,255,0.25);
}

.nitro-soft:hover {
    box-shadow: 0 0 10px rgba(210,210,255,0.40);
}

/* wariant 2 – prawie czysto srebrny */
.nitro-silver {
    background: linear-gradient(120deg, #5f6268, #9a9ea9, #5f6268);
    box-shadow: 0 0 5px rgba(220,220,230,0.35);
     text-transform: uppercase;
}

.nitro-silver:hover {
    box-shadow: 0 0 12px rgba(245,245,255,0.55);
}

/* wariant 3 – ciemny, argo, z lekkim "oddychaniem" */
.nitro-dark {
    background: radial-gradient(circle at 30% 0,
                #555a70 0,
                #15151b 60%,
                #050507 100%);
    box-shadow:
        0 0 4px rgba(0,0,0,0.8),
        0 0 16px rgba(40,40,60,0.6);
    animation: nitroBreath 4s ease-in-out infinite;
}

/* animacja oddechu – bardzo subtelna */
@keyframes nitroBreath {
    0%, 100% {
        box-shadow:
            0 0 4px rgba(0,0,0,0.8),
            0 0 14px rgba(40,40,60,0.55);
    }
    50% {
        box-shadow:
            0 0 8px rgba(0,0,0,0.9),
            0 0 24px rgba(120,120,180,0.7);
    }
}

/* --- Ciemny, elegancki przycisk BEZ animacji/pulsu --- */
.nitro-dark-static {
    background: radial-gradient(circle at 30% 0,
                #4a4d59 0%,
                #111217 60%,
                #050507 100%);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 40px;
    padding: 10px 30px;
    font-size: 19px;
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    text-decoration: none;
    display: inline-block;
     text-transform: uppercase;
    transition: box-shadow .15s ease-out, transform .15s ease-out;
}

/* delikatne rozjaśnienie po najechaniu */
.nitro-dark-static:hover {
    box-shadow:
        0 0 6px rgba(180,180,220,0.35),
        0 0 14px rgba(80,80,120,0.4);
    transform: translateY(-1px);
}

/* Ciemny, elegancki przycisk jak w "Wróć na Pokątną" */
.nitro-enter {
    background: radial-gradient(circle at 30% 0,
                #4a4d59 0%,
                #111217 60%,
                #050507 100%);
    padding: 8px 24px;
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.12);
    font-size: 18px;
    color: #ffffff;
    display: inline-block;
    text-decoration: none;
 text-transform: uppercase;

    box-shadow:
        0 0 6px rgba(80,80,100,0.35),
        0 0 14px rgba(40,40,60,0.25);

    transition: .15s ease-out;
}

/* delikatne rozjaśnienie po najechaniu */
.nitro-enter:hover {
    box-shadow:
        0 0 10px rgba(180,180,220,0.4),
        0 0 18px rgba(100,100,160,0.45);
    transform: translateY(-1px);
}

#message_owl {
    width: 148px;
    height: auto;
    position: absolute;
    top: 30px;        /* odległość od góry */
    left: 40px;       /* odległość od lewej strony */
    z-index: 9999;
    image-rendering: pixelated;
}

/* === PASEK CZATU AMS === */

.ams-chat-wrapper {
  margin-top: 10px;
}

/* główny pasek */
.ams-chat-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(200,200,200,0.4);
  border-radius: 22px;
  padding: 6px 10px;
  backdrop-filter: blur(4px);
}

/* pole tekstowe */
.ams-chat-input {
  flex: 1;
  border: none;
  background: transparent;
  color: #e0e0e0;
  resize: none;
  height: 40px;
  padding: 6px 4px;
  font-family: inherit;
  font-size: 14px;
}

.ams-chat-input::placeholder {
  color: #909090;
}

.ams-chat-input:focus {
  outline: none;
}

/* przyciski w pasku */
.ams-chat-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #e0e0e0;
  transition: 0.2s;
}

.ams-chat-btn:hover {
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 8px rgba(255,255,255,0.35);
}

/* Wyślij sowę – bardziej wyróżniony */
.ams-send-btn {
  background: linear-gradient(135deg, #4aa3ff, #9cc7ff);
  color: #000;
  border-radius: 18px;
  padding: 0 14px;
  width: auto;
  font-size: 13px;
  font-weight: 600;
}

.ams-send-btn:hover {
  box-shadow: 0 0 12px rgba(120,170,255,0.7);
}

/* panel emotek */
.ams-emotes {
  display: none;
  margin-bottom: 6px;
  max-height: 160px;
  overflow-y: auto;
  padding: 6px;
  background: rgba(0,0,0,0.75);
  border: 1px solid rgba(200,200,200,0.4);
  border-radius: 14px;
}

.ams-emotes.open {
  display: block;
}

/* wygląd pojedynczych emotek */
.ams-emotes img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.3);
  box-shadow: 0 0 6px rgba(0,0,0,0.6);
  margin: 3px;
  transition: 0.2s;
}

.ams-emotes img:hover {
  transform: scale(1.08);
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

/* opcja "enter wysyła" */
.ams-chat-options {
    margin-top: 6px;
    text-align: center;           /* na środek */
    font-size: 12px;
    color: #d0c7b5;
}

.ams-chat-options label {
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    border: 1px solid rgba(200,200,200,0.4);
    box-shadow: 0 0 8px rgba(0,0,0,0.6);
    cursor: pointer;
}

.ams-chat-options input[type="checkbox"] {
    margin-right: 6px;
    vertical-align: middle;
}
.ams-chat-footer {
    margin-top: 10px;
    text-align: left;        /* albo right; jeśli wolisz w prawym rogu */
}

.ams-back-link {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    border: 1px solid rgba(200,200,200,0.5);
    background: radial-gradient(circle at top, rgba(255,255,255,0.12), rgba(0,0,0,0.7));
    color: #e3ded0;
    font-size: 13px;
    text-decoration: none;
    box-shadow:
        inset 0 0 8px rgba(255,255,255,0.15),
        0 0 10px rgba(0,0,0,0.8);
    transition: 0.2s;
}

.ams-back-link:hover {
    border-color: rgba(255,255,255,0.8);
    box-shadow:
        inset 0 0 10px rgba(255,255,255,0.25),
        0 0 14px rgba(220,220,220,0.6);
    text-shadow: 0 0 6px rgba(255,255,255,0.6);
}

.enter-send-wrapper {
    width: 100%;
    text-align: center;
    margin-top: 10px;
}

.enter-send-wrapper label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.06);
    padding: 6px 14px;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px;
    font-size: 15px;
    cursor: pointer;
}

/* MOCNA animacja testowa pojawiania się dymka */
@keyframes amsMsgPopTest {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.7);
        filter: blur(2px);
        box-shadow: 0 0 0 rgba(255,255,255,0);
    }
    60% {
        opacity: 1;
        transform: translateY(0) scale(1.05);
        filter: blur(0);
        box-shadow: 0 0 25px rgba(255,255,255,0.6);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        box-shadow: 0 0 14px rgba(160,160,160,0.15);
    }
}

/* NA SIŁĘ dodaj animację do bąbelków */
.message-left,
.message-right {
    animation: amsMsgPopTest 0.5s ease-out;
    animation-fill-mode: both;
}

/* ===========================
   UKŁAD: 3 kafelki w rzędzie
   =========================== */

/* Wymuś siatkę 3 kafelków */
.shop-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 10px !important;
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
}

/* Zresetuj dziwne kolumny Bootstrapa, które je zawijają */
.shop-grid > div {
width: 100% !important;
  max-width: 280px !important;
}

/* ===========================
   KAFELKI + GLOW
   =========================== */

.shop-tile {
    position: relative;
    width: 100%;
    max-width: 360px;        /* mniejsze niż 380, żeby 3 się zmieściły */
    border-radius: 26px;
    padding: 1px;
    margin: 0 auto 40px;     /* ładny odstęp w dół */

    /* srebrno-grafitowa ramka z lekkim gradientem */
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.70),
        rgba(120,120,120,0.15),
        rgba(200,200,200,0.85)
    );

    box-shadow:
        0 0 30px rgba(0,0,0,0.95),
        0 0 20px rgba(0,0,0,0.9);
    overflow: visible;
    transform: translateY(0);
    transition: transform 0.25s ease-out;
}

/* neonowy „obłok” pod kafelkiem */
.shop-tile-glow {
    position: absolute;
    inset: -10px; /* trochę mniej, żeby nie wylewał się tak daleko */
    background:
        radial-gradient(circle at 20% 0%,
            rgba(170, 210, 255, 0.60) 0,
            transparent 55%),
        radial-gradient(circle at 80% 100%,
            rgba(220, 200, 255, 0.70) 0,
            transparent 55%);
    opacity: 0;
    filter: blur(12px);
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.35s ease-out, transform 0.35s ease-out;
}

/* „szklane” wnętrze */
.shop-tile-inner {
    position: relative;
    z-index: 5;
    border-radius: 24px;

    background: rgba(5, 5, 5, 0.88);
    backdrop-filter: blur(4px);
    padding: 20px 22px 24px 22px;
    text-align: center;

    box-shadow:
        inset 0 0 18px rgba(0,0,0,1),
        0 0 10px rgba(0,0,0,0.85);
}

/* logo sklepu */
.shop-tile-logo {
    margin-bottom: 14px;
}
.shop-tile-logo img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
    filter:
        drop-shadow(0 0 10px rgba(0,0,0,0.9))
        drop-shadow(0 0 18px rgba(0,0,0,0.8));
}

/* tytuł */
.shop-tile-title {
    font-size: 22px;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
    text-transform: none;

    background: linear-gradient(120deg, #f9f9f9, #d5defc, #f9f9f9);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    text-shadow:
        0 0 4px rgba(0,0,0,1),
        0 0 12px rgba(0,0,0,0.9);
}

/* opis */
.shop-tile-desc {
    font-size: 14px;
    line-height: 1.35;
    color: #e2e2e2;
    opacity: 0.92;
    margin: 4px 0 12px 0;
}

/* przycisk (korzysta z nitro-dark-static) */
.shop-tile-btn {
    margin-top: 4px;
    min-width: 170px;
    font-size: 17px;
}

/* animacja na hover – kafelek lekko „wypływa”, glow się pojawia */
.shop-tile:hover {
    transform: translateY(-4px);
}
.shop-tile:hover .shop-tile-glow {
    opacity: 1;
    transform: scale(1.03);
}


/* MAGICZNY TOOLTIP PROFILU */
/* === GLOSSY, MAGICZNY TOOLTIP PROFILU === */
.profile-tooltip {
    position: relative;
    overflow: hidden;

    /* główny ciemny szklany gradient */
    background:
        radial-gradient(circle at 40% 0%,
            rgba(0, 0, 0, 0.90) 0%,
            rgba(0, 0, 0, 0.32) 22%,
            rgba(0, 0, 0, 0.85) 60%,
            rgba(0, 0, 0, 0.95) 100%);
    border-radius: 26px;
    padding: 22px 24px;

    border: 1px solid rgba(200, 200, 200, 0.28);

    backdrop-filter: blur(7px) saturate(130%);

    /* głębia + magiczne szkło */
    box-shadow:
        0 8px 30px rgba(0, 0, 0, 0.55),
        inset 0 0 18px rgba(255, 255, 255, 0.08),
        inset 0 0 45px rgba(255, 255, 255, 0.03);
}



/* Tekst w tooltipie */
.profile-tooltip b,
.profile-tooltip small,
.profile-tooltip span {
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.12);
}

/* Aby tabelka w tooltipie nie dotykała brzegów */
.profile-tooltip table {
    width: 100%;
}

/* USUNIĘCIE BRĄZOWEGO ZEWNĘTRZNEGO OBROSU TOOLTIPA */
.theme-blank, 
.theme-blank table, 
.theme-blank td,
.theme-blank tr,
.theme-blank .content, 
.profile-tooltip table {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

/* === Zewnętrzny kontener tooltipa – usunięcie kwadratu === */

/* jeżeli tooltip jest z qTip (częsty przypadek) */
.qtip,
.qtip-default {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* === GLOW w kolorze rangi (domy + stażyści + profesorowie) === */

/* kolorowy glow w zależności od rangi / domu */
.profile-tooltip[data-rank]::after {
    content: "";
    position: absolute;
    bottom: -10%;
    left: 0;
    width: 100%;
    height: 65%;
    pointer-events: none;
    filter: blur(40px);
    opacity: 0.85;
    z-index: 1;
}



/* Gryffindor (#ba1515) */
.profile-tooltip[data-rank="gryffindor"]::after {
    background: radial-gradient(circle at center,
        rgba(186, 21, 21, 0.55),
        rgba(186, 21, 21, 0.22),
        transparent 75%);
}

/* Hufflepuff (#fcd368) */
.profile-tooltip[data-rank="hufflepuff"]::after {
    background: radial-gradient(circle at center,
        rgba(252, 211, 104, 0.55),
        rgba(252, 211, 104, 0.22),
        transparent 75%);
}

/* Ravenclaw (#156abf) */
.profile-tooltip[data-rank="ravenclaw"]::after {
    background: radial-gradient(circle at center,
        rgba(21, 106, 191, 0.55),
        rgba(21, 106, 191, 0.22),
        transparent 75%);
}

/* Slytherin (#2d8547) */
.profile-tooltip[data-rank="slytherin"]::after {
    background: radial-gradient(circle at center,
        rgba(45, 133, 71, 0.55),
        rgba(45, 133, 71, 0.22),
        transparent 75%);
}

/* Stażysta (#9c0948) */
.profile-tooltip[data-rank="intern"]::after {
    background: radial-gradient(circle at center,
        rgba(156, 9, 72, 0.55),
        rgba(156, 9, 72, 0.25),
        transparent 75%);
}

/* Profesor (#0e636b) */
.profile-tooltip[data-rank="teacher"]::after {
    background: radial-gradient(circle at center,
        rgba(14, 99, 107, 0.55),
        rgba(14, 99, 107, 0.25),
        transparent 75%);
}

/* jeśli kiedyś użyjesz staff */
.profile-tooltip[data-rank="staff"]::after {
    background: radial-gradient(circle at center,
        rgba(200, 200, 200, 0.20),
        transparent 70%);
}


/* GÓRNY KOLOROWY GLOW – NOWA, PEWNA WERSJA */
.profile-tooltip .top-glow {
    content: "";
    position: absolute;
    top: -12%;
    left: -10%;
    width: 120%;
    height: 50%;
    pointer-events: none;
    z-index: 3;
    filter: blur(35px);
    opacity: 0.7;
}

/* Kolory rang */
.profile-tooltip[data-rank="gryffindor"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(186, 21, 21, 0.45),
        transparent 70%);
}

.profile-tooltip[data-rank="hufflepuff"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(252, 211, 104, 0.45),
        transparent 70%);
}

.profile-tooltip[data-rank="ravenclaw"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(21, 106, 191, 0.45),
        transparent 70%);
}

.profile-tooltip[data-rank="slytherin"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(45, 133, 71, 0.45),
        transparent 70%);
}

.profile-tooltip[data-rank="intern"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(156, 9, 72, 0.45),
        transparent 70%);
}

.profile-tooltip[data-rank="teacher"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(14, 99, 107, 0.45),
        transparent 70%);
}
.powrot-panel {
    color: #d8d8d8;
    font-family: "Cinzel", serif;
    font-size: 16px;
    letter-spacing: 0.5px;

    /* delikatne srebro */
    text-shadow: 0 0 4px rgba(200,200,200,0.25);

    transition: 0.25s ease;
}

.powrot-panel:hover {
    color: #ffffff;
    text-shadow:
        0 0 6px rgba(255,255,255,0.7),
        0 0 10px rgba(255,255,255,0.4);
}

/* === GŁÓWNA BAŃKA PROFILU === */
.profile-main-bubble {
    position: relative;
    max-width: 780px;
    margin: 25px auto 35px;
    padding: 30px 34px 32px;
    border-radius: 30px;
    overflow: hidden;

    background: radial-gradient(circle at 50% 0,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(0, 0, 0, 0.92) 55%,
        rgba(0, 0, 0, 0.97) 100%);

    border: 1px solid rgba(200, 200, 200, 0.26);
    box-shadow:
        0 16px 60px rgba(0, 0, 0, 0.85),
        inset 0 0 22px rgba(255, 255, 255, 0.04);

    backdrop-filter: blur(7px) saturate(130%);
}

/* Zabezpieczenie, żeby glowy były pod treścią */
.profile-main-bubble__inner {
    position: relative;
    z-index: 2;
}

.profile-main-bubble::after {
    content: "";
    position: absolute;
    bottom: -15%;
    left: 0;
    width: 100%;
    height: 70%;
    filter: blur(50px);
    opacity: 0.9;
    pointer-events: none;
    z-index: 1;
}

/* Gryffindor */
.profile-main-bubble[data-rank="gryffindor"]::after {
    background: radial-gradient(circle at center,
        rgba(186, 21, 21, 0.55),
        rgba(186, 21, 21, 0.20),
        transparent 80%);
}

/* Hufflepuff */
.profile-main-bubble[data-rank="hufflepuff"]::after {
    background: radial-gradient(circle at center,
        rgba(252, 211, 104, 0.55),
        rgba(252, 211, 104, 0.20),
        transparent 80%);
}

/* Ravenclaw */
.profile-main-bubble[data-rank="ravenclaw"]::after {
    background: radial-gradient(circle at center,
        rgba(21, 106, 191, 0.55),
        rgba(21, 106, 191, 0.20),
        transparent 80%);
}

/* Slytherin */
.profile-main-bubble[data-rank="slytherin"]::after {
    background: radial-gradient(circle at center,
        rgba(45, 133, 71, 0.55),
        rgba(45, 133, 71, 0.20),
        transparent 80%);
}

/* Stażysta */
.profile-main-bubble[data-rank="intern"]::after {
    background: radial-gradient(circle at center,
        rgba(156, 9, 72, 0.55),
        rgba(156, 9, 72, 0.20),
        transparent 80%);
}

/* Profesor */
.profile-main-bubble[data-rank="teacher"]::after {
    background: radial-gradient(circle at center,
        rgba(14, 99, 107, 0.55),
        rgba(14, 99, 107, 0.20),
        transparent 80%);
}

/* Staff – srebrno-szary */
.profile-main-bubble[data-rank="staff"]::after {
    background: radial-gradient(circle at center,
        rgba(200, 200, 200, 0.45),
        rgba(0, 0, 0, 0.98) 75%,
        transparent 100%);
}



/* ===== GÓRNY KOLOROWY GLOW – GŁÓWNA BAŃKA PROFILU ===== */
.profile-main-bubble .top-glow {
    content: "";
    position: absolute;
    top: -12%;
    left: -10%;
    width: 120%;
    height: 45%;
    pointer-events: none;
    filter: blur(55px);
    opacity: 0.9;
    z-index: 1;
}

/* --- Kolory rang (GÓRA) --- */

/* Gryffindor */
.profile-main-bubble[data-rank="gryffindor"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(186, 21, 21, 0.38),
        transparent 70%);
}

/* Hufflepuff */
.profile-main-bubble[data-rank="hufflepuff"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(252, 211, 104, 0.38),
        transparent 70%);
}

/* Ravenclaw */
.profile-main-bubble[data-rank="ravenclaw"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(21, 106, 191, 0.38),
        transparent 70%);
}

/* Slytherin */
.profile-main-bubble[data-rank="slytherin"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(45, 133, 71, 0.38),
        transparent 70%);
}

/* Stażysta */
.profile-main-bubble[data-rank="intern"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(156, 9, 72, 0.38),
        transparent 70%);
}

/* Profesor */
.profile-main-bubble[data-rank="teacher"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(14, 99, 107, 0.38),
        transparent 70%);
}

/* Staff – jasny srebrny */
.profile-main-bubble[data-rank="staff"] .top-glow {
    background: radial-gradient(circle at top,
        rgba(200, 200, 200, 0.38),
        transparent 70%);
}

/* === PANEL UCZNIA – NOWY LAYOUT === */

.student-dashboard {
    position: relative;
    max-width: 860px;
    margin: 15px auto 25px;
    padding: 24px 28px 30px;

    background:
        radial-gradient(circle at 15% 0%,
            rgba(255,255,255,0.06) 0,
            rgba(0,0,0,0.90) 38%),
        radial-gradient(circle at 100% 100%,
            rgba(140,180,255,0.13) 0,
            rgba(0,0,0,0.96) 52%);
    border-radius: 22px;
    border: 1px solid rgba(190,190,190,0.25);
    box-shadow:
        0 18px 42px rgba(0,0,0,0.78),
        inset 0 0 22px rgba(255,255,255,0.06);
    backdrop-filter: blur(7px) saturate(130%);
}

/* Zakładki u góry */
.student-dashboard-topbar {
    display: inline-flex;
    gap: 6px;
    margin-bottom: 18px;
}

.student-tab {
    padding: 4px 12px 5px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-family: "Afacad", system-ui, sans-serif;
    text-decoration: none;
    border-radius: 999px;
    border: 1px solid rgba(210,210,210,0.30);
    background:
        radial-gradient(circle at 0 0,
            rgba(255,255,255,0.15) 0,
            rgba(0,0,0,0.92) 70%);
    color: #e8ecff;
    box-shadow:
        0 0 10px rgba(0,0,0,0.8),
        inset 0 0 10px rgba(255,255,255,0.08);
    transition: all .18s ease-out;
}

.student-tab--primary {
    border-color: rgba(180,210,255,0.95);
    background:
        radial-gradient(circle at 15% 0,
            rgba(150,190,255,0.40) 0,
            rgba(0,0,0,0.96) 70%);
}

.student-tab:hover {
    border-color: rgba(155,195,255,0.95);
    box-shadow:
        0 0 14px rgba(130,190,255,0.75),
        inset 0 0 14px rgba(255,255,255,0.13);
    transform: translateY(-1px);
}

/* Nagłówek z herbem i danymi */
.student-dashboard-header {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.student-dashboard-house img {
    max-width: 140px;
    height: auto;
    filter: drop-shadow(0 0 16px rgba(0,0,0,0.95));
}

.student-dashboard-title {
    margin: 0 0 10px;
    font-family: "Cinzel", serif;
    font-size: 28px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #dde6ff;
    text-shadow:
        0 0 14px rgba(90,140,255,0.7),
        0 0 22px rgba(0,0,0,0.9);
}

.student-dashboard-meta-list {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: #e4e4e4;
}

.student-dashboard-meta-list li {
    margin-bottom: 2px;
}

.student-dashboard-meta-list .meta-label {
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .16em;
    color: #84bde0;
    margin-right: 4px;
}

.student-dashboard-vault {
    font-size: 11px;
    opacity: .9;
}

/* Informacje od Dyrekcji */
.student-dashboard-announcement {
    margin: 8px 0 20px;
    padding: 12px 18px;
    border-radius: 14px;

    background: radial-gradient(circle at 30% 0%,
        rgba(120,160,255,0.08) 0%,
        rgba(0,0,0,0.78) 55%);
    
    border: 1px solid rgba(140,180,255,0.32);
    box-shadow:
        0 0 14px rgba(120,170,255,0.18),
        inset 0 0 12px rgba(140,180,255,0.08);
}

.student-dashboard-announcement-title {
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: #84bde0;
}

.student-dashboard-announcement-text {
    margin-top: 3px;
    color: #dfe6ff;
}


/* GRID IKON */
.student-dashboard-shortcuts {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px 40px;
}

.student-shortcut a {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.student-shortcut-icon img {
    width: 92px;
    height: auto;
    filter:
        saturate(115%)
        contrast(110%)
        drop-shadow(0 9px 16px rgba(0,0,0,0.95));
    transition:
        transform .18s ease-out,
        filter .18s ease-out;
}

.student-shortcut-label {
    text-align: center;
    font-family: "Almendra", system-ui, sans-serif;
    line-height: 0;
    color: #9fb9c9;

}

.student-shortcut a:hover .student-shortcut-icon img {
    transform: translateY(-4px) scale(1.04);
    filter:
        saturate(120%)
        contrast(115%)
        drop-shadow(0 0 22px rgba(140,190,255,0.85));
}

.student-shortcut a:hover .student-shortcut-label {
    color: #cfd8ff;
    text-shadow:
        0 0 12px rgba(130,185,255,0.9),
        0 0 18px rgba(0,0,0,0.8);
    transform: translateY(-1px);
}

/* Responsywność */
@media (max-width: 720px) {
    .student-dashboard {
        padding: 20px 18px 24px;
    }

    .student-dashboard-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .student-dashboard-house img {
        max-width: 120px;
    }

    .student-dashboard-shortcuts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 22px 24px;
    }
}

/* --- MAGICZNE FROSTOWE KARTY PANELU AMS --- */

.frost-box {
    position: relative;
    padding: 28px 32px;
    margin: 35px 0;
    border-radius: 18px;

    /* Frost Glass */
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(9px) saturate(140%);

    /* Subtelna srebrna ramka */
    border: 1px solid rgba(180, 220, 255, 0.25);

    /* Elegancki cień */
    box-shadow:
        0 8px 25px rgba(0, 0, 0, 0.45),
        inset 0 0 12px rgba(255, 255, 255, 0.05);
}

/* Nagłówki sekcji w stylu frost */
.frost-box .section-title {
    font-family: 'Castoro Titling', serif;
    font-size: 21px;
    letter-spacing: 0.5px;
    color: #c7ebff;
    text-shadow: 0 0 6px rgba(150, 200, 255, 0.45);
    margin-bottom: 18px;
}

/* Delikatny separator (linia magiczna) */
.frost-separator {
    width: 100%;
    height: 1px;
    margin: 14px 0 22px 0;
    background: linear-gradient(
        90deg,
        rgba(180, 220, 255, 0) 0%,
        rgba(180, 220, 255, 0.45) 50%,
        rgba(180, 220, 255, 0) 100%
    );
}

.legend-links {
    margin-bottom: 18px;
    color: #c7ebff;
    font-size: 14px;
}

.legend-links a {
    color: #c7ebff;
    text-decoration: none;
}

.legend-links a:hover {
    text-shadow: 0 0 6px rgba(150,200,255,0.6);
}

.frost-list li {
    margin: 6px 0;
}

.notif-separator {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right,
        rgba(255,255,255,0) 0%,
        rgba(170,200,255,0.23) 50%,
        rgba(255,255,255,0) 100%
    );
    margin: 12px 0 18px;
}


.frost-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 12px;
}

.frost-tabs a {
    padding: 6px 14px;
    border-radius: 14px;
    font-size: 14px;
    letter-spacing: 0.5px;
    text-decoration: none;
    color: #cfe7ff;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(150,180,255,0.22);
    transition: all 0.25s ease;
    backdrop-filter: blur(4px);
}

.frost-tabs a:hover {
    background: rgba(160,200,255,0.20);
    border-color: rgba(200,220,255,0.45);
    color: white;
}

/* --------- prace domowe archiwum nauczyciele --------- */
.hw-row {
    display: grid;
    grid-template-columns: 180px 1fr 220px;
    gap: 18px;

    padding: 18px 12px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
}

.hw-row:last-child {
    border-bottom: none;
        margin-bottom: 14px;
}

.hw-col-main > div:nth-child(2) {
    margin-bottom: 14px;
}

.hw-col-term {
    font-size: 12px;
    opacity: 0.9;
}

.hw-term-label {
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 11px;
    opacity: 0.6;
    margin-bottom: 6px;
}

.hw-term-date {
    font-size: 14px;
}

.hw-term-time {
    font-size: 11px;
    opacity: 0.7;
}

.hw-col-main {
    font-size: 13px;
}

.hw-content {

    border-top: 1px dashed rgba(255,255,255,0.15);
}

.hw-col-meta {
    font-size: 12px;
    margin-left: 100px;
}

.hw-teacher {
    margin-bottom: 6px;
}

.hw-status-ok {
    color: #6dff9c;
    margin-bottom: 6px;
}

.hw-status-not {
    color: #ff6d6d;
}

.hw-actions a {
    display: block;
    margin-bottom: 4px;
    opacity: 0.9;
}

.hw-row:hover {
    background: rgba(255,255,255,0.03);
}

.hw-status-mid { color: #ffd36d; }

.hw-col-main .hw-subject {
    margin-bottom: 14px;
}

.hw-class,
.hw-subject {
    line-height: 1.4;
}


/* usuwanie pracy domowej */
.hw-danger-btn {
    display: inline-block;
    margin-left: 8px;
    padding: 6px 14px;

    color: #ff4d4d;
    font-weight: 600;
    text-decoration: none;

    border: 1px solid rgba(255, 77, 77, 0.55);
    border-radius: 16px;

    background:
        linear-gradient(
            to bottom,
            rgba(255, 77, 77, 0.18),
            rgba(120, 0, 0, 0.25)
        );

    box-shadow:
        inset 0 0 12px rgba(255, 77, 77, 0.25),
        0 0 10px rgba(255, 77, 77, 0.15);

    transition: all 0.25s ease;
}

.hw-danger-btn:hover {
    color: #ffffff;
    background:
        linear-gradient(
            to bottom,
            rgba(255, 60, 60, 0.85),
            rgba(120, 0, 0, 0.95)
        );

    box-shadow:
        0 0 18px rgba(255, 60, 60, 0.85);
    transform: scale(1.04);
}

/* ======================================
   HEADER – FINALNE MAGICZNE WYKOŃCZENIE
   ====================================== */

.nice_block.--header {
  position: relative;
  overflow: hidden;
  border-top: none;
  color: #b5b6b6;
  border-bottom-right-radius: 25px;
  border-bottom-left-radius: 25px;
  box-shadow:
    inset 0 0 80px rgba(180,190,220,0.08),
    inset 0 -40px 80px rgba(0,0,0,0.55);
}

/* CIEMNE BOKI (VIGNETTE) */
.nice_block.--header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(to right,
      rgba(0,0,0,0.85),
      rgba(0,0,0,0.35) 25%,
      rgba(0,0,0,0) 50%,
      rgba(0,0,0,0.35) 75%,
      rgba(0,0,0,0.85)
    );
  pointer-events: none;
  z-index: 2;
}

/* MAGICZNY GLOW + WTOPIENIE W TŁO */
.nice_block.--header::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow:
    inset 0 0 90px rgba(180,190,220,0.09),
    inset 0 -60px 100px rgba(0,0,0,0.75);
  pointer-events: none;
  z-index: 3;
}

/* FADE NA DOLE – ŻEBY NIE UCINAŁO NAPISU */
.nice_block.--header .nice_block_content {
  position: relative;
  z-index: 1;
}

.nice_block.--header .nice_block_content::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 160px;
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0.45) 50%,
    rgba(0,0,0,0.9) 100%
  );
  pointer-events: none;
  z-index: 2;
}



/* ============================
   NAV – MAGICZNY PASEK
   ============================ */

.nav-wrapper {
  position: relative;
  z-index: 5;
  backdrop-filter: blur(4px);
  box-shadow:
    0 6px 20px rgba(0,0,0,0.55),
    inset 0 -1px 0 rgba(220,220,240,0.15);
}

header nav a {
  text-shadow:
    0 0 6px rgba(200,210,240,0.35),
    0 0 14px rgba(120,140,200,0.25);
}

   /*je spokojnie wywalić lub zakomentować, żeby nie mieszały w cieniach */


/*# sourceMappingURL=style.css.map */