/* ---- Podstawowy layout ---- */
        body {
            margin: 0;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            background-size: cover;
            color: #f5f5f5;
			font-family: 'Roboto', sans-serif;
        }

        body::before {
            content: "";
            position: fixed;
            inset: 0;
            background: rgba(0, 0, 0, 0.6);
            z-index: -1;
        }

        .main-container {
            display: flex;
            flex: 1;
        }

/* ---- Menu ogólne ---- */
nav {
    width: 220px;
    background-color: #1e1e1e;
    padding: 20px;
    box-sizing: border-box;
    border-right: 2px solid #2c2c2c;
    overflow-y: auto;
}

nav h2 { text-align: center; margin-top: 0; }

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

nav ul li { margin: 8px 0; }

/* ---- Toggle button i submenu ---- */
nav ul li button,
nav ul li .submenu li button {
    width: 100%;
    background: none;
    border: none;
    color: #ddd;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    transition: background 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ikony */
nav ul li .submenu li button i {
    min-width: 20px;
    text-align: center;
}

/* Hover */
nav ul li button:hover,
nav ul li .submenu li button:hover {
    background-color: #00bcd4;
    color: #121212;
}

/* Delikatne przesunięcie submenu dla długich nazw */
nav ul li .submenu li button {
    position: relative;
    left: -4px;
    width: calc(100% + 4px);
}


/* --- Zamiana stylu button na a --- */

/* Główne linki w menu i submenu */
nav ul li a,
nav ul li .submenu li a {
    width: 100%;
    background: none;
    border: none;
    color: #ddd;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    transition: background 0.3s, color 0.3s;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none; /* usuwa podkreślenie */
}

/* Ikony */
nav ul li .submenu li a i {
    min-width: 20px;
    text-align: center;
}

/* Hover efekt */
nav ul li a:hover,
nav ul li .submenu li a:hover {
    background-color: #00bcd4;
    color: #121212;
}

/* Delikatne przesunięcie submenu dla długich nazw */
nav ul li .submenu li a {
    position: relative;
    left: -4px;
    width: calc(100% + 4px);
    font-size: 15px; /* dopasowanie do submenu */
}

/* Efekt dla ikon przy hoverze */
nav ul li .submenu li a:hover i {
    filter: brightness(1.2);
    transition: filter 0.3s;
}


        .submenu {
            list-style: none;
            padding-left: 15px;
            margin: 5px 0;
            display: none;
        }

        .submenu li a {
            font-size: 14px;
            color: #bbb;
        }

        .submenu li a:hover { color: #00bcd4; }

        /* ---- Główny content ---- */
        main {
            flex: 1;
            padding: 30px;
            text-align: center;
            box-sizing: border-box;
        }

        main h1 { margin-top: 0; }

        /* ---- Prawa kolumna ---- */
        aside {
            width: 250px;
            background-color: #1e1e1e;
            display: flex;
            flex-direction: column;
            align-items: center;
            border-left: 2px solid #2c2c2c;
            padding-top: 20px;
            box-sizing: border-box;
        }

        .player-counter {
            width: 70px;
            height: 70px;
            background-color: #00bcd4;
            color: #121212;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 22px;
            border-radius: 10px;
            margin-bottom: 20px;
        }
		
		.player-counter {
    color: #ffffff;      /* biały kolor tekstu */
    text-decoration: none; /* usuwa podkreślenie */
	}
	.player-counter:hover {
		color: black;      /* np. zmiana koloru przy hover */
		text-decoration: none;
	}

table[border="1"] {
    border: 0 !important;
}

        .discord-widget {
            width: 90%;
            text-align: center;
        }

        .discord-widget iframe {
            border: none;
            border-radius: 8px;
            width: 100%;
            height: 500px;
        }

        /* ---- Footer ---- */
        footer {
            width: 100%;
            background-color: #1e1e1e;
            color: #aaa;
            text-align: center;
            padding: 10px 0;
            border-top: 2px solid #2c2c2c;
            font-size: 14px;
        }
		
		.footer-links a {
    color: #00bcd4;
    text-decoration: none;
    margin: 0 5px;
}
.footer-links a:hover {
    text-decoration: underline;
}
		
		
		.content-section {
    background-color: rgba(20, 20, 20, 0.85);
    border: 2px solid #2c2c2c;
    border-radius: 10px;
    padding: 20px;
    min-height: 400px;
    text-align: left;
}

		/* Styl slidera */
.update-slider-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 800px;
    margin: 20px auto;
    border: 2px solid #2c2c2c;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0.5);
}

.update-slider {
    display: flex;
    transition: transform 0.4s ease;
    width: 100%;
	touch-action: pan-y; /* pozwala scrollować pionowo stronę, ale nie blokuje poziomego przesuwania */
}

.update-slider .slide {
    min-width: 100%;
    box-sizing: border-box;
    text-align: center;
    padding: 20px;
}

.update-slider img {
    max-width: 100%;
    border-radius: 8px;
    margin-bottom: 10px;
	 user-select: none;
  -webkit-user-drag: none;
  user-drag: none;
}

.slider-controls {
    text-align: center;
    margin-top: 10px;
}

.slider-controls button {
    background-color: #00bcd4;
    border: none;
    color: #121212;
    padding: 10px 15px;
    margin: 0 5px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.3s;
}

.slider-controls button:hover {
    background-color: #0097a7;
}

.slider-indicators {
    text-align: center;
    margin-top: 10px;
}

.slider-indicators .dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin: 0 5px;
    background-color: #555;
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s;
}

.slider-indicators .dot.active {
    background-color: #00bcd4;
}

.slide img {
    display: block;
    margin: 0 auto 10px;
    border-radius: 8px;
    mask-image: radial-gradient(circle, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 80%, rgba(0,0,0,0) 100%);
}

        /* ---- Responsywność ---- */
        @media (max-width: 900px) {
            .main-container {
                flex-direction: column;
            }

                nav {
        width: 100%;
        border: none;
        text-align: center; /* wycentrowanie menu */
        padding: 10px 0;
		background-color: rgba(20, 20, 20, 0.85);
    }

    nav ul {
        display: inline-block; /* żeby ul też był wycentrowany */
        padding: 0;
        margin: 0 auto;
    }

    nav ul li {
        margin: 8px 0;
    }

    nav ul li button,
    nav ul li a {
        text-align: center; /* wycentrowanie tekstu w przyciskach */
    }

    .submenu {
        padding-left: 0; /* usuwa wcięcie dla podmenu */
    }
	
	.submenu li button {
    font-size: 15px;
}

    aside {
        width: 100%;           /* pełna szerokość ekranu */
        flex-direction: column; /* kolumnowo, elementy jeden pod drugim */
        align-items: center;   /* wyśrodkowanie zawartości */
        padding: 10px 0;
        border-left: none;     /* usuń lewą ramkę */
        border-top: 2px solid #2c2c2c; /* opcjonalnie ramka od góry */
		background-color: rgba(20, 20, 20, 0.85);
    }

    .player-counter {
        margin-bottom: 20px; /* trochę odstępu poniżej licznika */
    }

    .discord-widget iframe {
        width: 90%;
        height: 300px;
    }

        }
		
		
		
		/* Stylizacja linków tylko wewnątrz diva #game-content */
#game-content a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    text-decoration: none;
    color: #ddd;
    font-size: 16px;
    border-radius: 4px;
    transition: background 0.3s, color 0.3s;
    background: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}

/* Hover tylko dla linków w #game-content */
#game-content a:hover {
    background-color: #00bcd4;
    color: #121212;
}

/* Ikony tylko dla linków w #game-content */
#game-content a i {
    min-width: 20px;
    text-align: center;
}

		
		
	tbody tr:not(nav) {
    background-color: #1e1e1e;
}
		
		
#tb_instantSpells, .tab-panels {
    background-color: #303030; /* nowy kolor tła dla całej tabeli */
    border-collapse: collapse; /* opcjonalnie, jeśli masz obramowania */
}

#game-content table td {
    border: 2px solid #2c2c2c;   /* obramowanie komórek */
    padding: 8px;             /* trochę odstępu wewnątrz komórek */
}

table > tbody > tr > td > b {
    color: white;
}

td {
    color: white;
}

.Table1 {
    width: 100%;        /* tabela zajmuje całą szerokość diva */
    max-width: 100%;    /* zapobiega wychodzeniu poza diva */
    table-layout: auto; /* lub fixed, jeśli chcesz równomierne kolumny */
}

.TableContent td b,
.TableContent td span {
    color: white !important;
}



input[type="submit"] {
    background-color: #00bcd4;   /* tło */
    color: #121212;               /* kolor tekstu */
    border: none;                 /* bez obramowania */
    padding: 10px 20px;           /* odstęp wewnętrzny */
    font-size: 16px;              /* rozmiar czcionki */
    border-radius: 6px;           /* zaokrąglone rogi */
    cursor: pointer;              /* zmiana kursora przy hover */
    transition: background 0.3s, color 0.3s; /* płynna zmiana kolorów */
}

input[type="submit"]:hover {
    background-color: #0097a7;   /* ciemniejszy odcień przy hover */
    color: #ffffff;               /* opcjonalnie zmiana koloru tekstu */
}


/* Styl dla wszystkich buttonów wewnątrz formularzy */
form button {
    background-color: #00bcd4; /* taki sam jak input */
    color: black;              /* biały tekst */
    border: none;              /* usuwa domyślny border */
    padding: 10px 20px;        /* trochę paddingu */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* czcionka jak dla input */
    font-size: 14px;
    border-radius: 4px;        /* lekko zaokrąglone rogi */
    cursor: pointer;
    transition: background-color 0.3s ease;
    width: 100%;               /* jeśli chcesz, żeby wypełniał całą szerokość */
    height: 40px;              /* żeby pasowało do Twojego buttona inline */
}

/* Opcjonalnie efekt hover */
form button:hover {
    background-color: #0097a7; /* ciemniejszy odcień dla efektu hover */
}


/* tylko inputy w formularzu characters */
input[type="image"] {
    background-color: #00bcd4 !important;
    color: black !important;
    border: none !important;
    padding: 6px 12px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Arial', sans-serif;
    font-size: 14px;
    text-align: center;
}

/* efekt hover */
input[type="image"]:hover {
    background-color: #0097a7 !important;
}



.Text {
	font-size: 14px;
	padding: 5px;
}

table#myTable tbody tr:nth-child(2) td:nth-child(3) {
    border: 2px solid blue;
    padding: 5px;
}


#account-manage table tr[style*="background-color: #F1E0C6"] {
    background-color: #1e1e1e !important;
}

#account-manage table tr[style*="background-color: #D4C0A1"] {
    background-color: #2c2c2c !important;
}

#account-manage th {
    border-right: 0 !important;
}

td[bgcolor="#505050"] {
    background-color: #2c2c2c !important;
}

.NewsHeadlineBackground {
	background-color: #2c2c2c !important;
}
		
		/* ---- Ikony kolorowe ---- */
.icon-orange { color: #ff7043; }   /* rozwój, postać */
.icon-gold { color: #ffd54f; }     /* zadania, eventy */
.icon-purple { color: #ba68c8; }   /* mini gry */
.icon-cyan { color: #00bcd4; }     /* przedmioty */
.icon-green { color: #81c784; }    /* global info */

/* Opcjonalnie: dodajmy efekt płynnego rozjaśnienia ikony przy hoverze */
nav ul li .submenu li button:hover i {
    filter: brightness(1.2);
    transition: filter 0.3s;
}

		
		/* ---- Library submenu ---- */
nav ul li .submenu li button {
    display: flex;               /* Ikona + tekst w jednej linii */
    align-items: center;         /* Wyrównanie pionowe */
    gap: 8px;                    /* Odstęp między ikoną a tekstem */
    width: 100%;
    background: none;
    border: none;
    color: #ddd;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    font-size: 15px;             /* Lekko mniejsza czcionka dla długich nazw */
    border-radius: 4px;
    transition: background 0.3s, color 0.3s;
    white-space: nowrap;         /* Nie łamiemy tekstu */
    overflow: hidden;            /* Ukrycie nadmiaru */
    text-overflow: ellipsis;     /* Dodaje "..." jeśli się nie mieści */
}

/* Hover efekt */
nav ul li .submenu li button:hover {
    background-color: #00bcd4;  /* Pasuje do Community */
    color: #121212;
}

/* Opcjonalnie: lekko przesunięcie w lewo, jeśli nadal nie mieści się tekst */
nav ul li .submenu li button {
    position: relative;
    left: -4px;                  /* Delikatne przesunięcie w lewo */
    width: calc(100% + 4px);     /* Klikalny obszar wciąż pełny */
}

/* Ikony zawsze w jednej linii */
nav ul li .submenu li button i {
    min-width: 20px;             /* Zapewnia stałą szerokość dla ikon */
    text-align: center;
}

/* Submenu toggle button (Library ▼) */
nav ul li > button.menu-toggle {
    width: 100%;
    background: none;
    border: none;
    color: #ddd;
    text-align: left;
    padding: 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 4px;
    transition: background 0.3s, color 0.3s;
}

nav ul li > button.menu-toggle:hover {
    background-color: #00bcd4;
    color: #121212;
}

.hoverI {
	background-color: #2c2c2c !important;
}

.tableC {
	background-color: #2c2c2c !important;
}

.BigButton {
    background-image: none !important;
}

#tb_instantSpells_wrapper,
#tb_instantSpells_wrapper .dataTables_length,
#tb_instantSpells_wrapper .dataTables_info,
#tb_instantSpells_wrapper .dataTables_paginate,
#tb_instantSpells_wrapper table.dataTable.no-footer,
#tb_instantSpells_wrapper table.dataTable.no-footer tbody tr,
#tb_instantSpells_wrapper table.dataTable.no-footer thead th {
    background-color: #1e1e1e !important; /* Twój kolor tła */
    color: white !important;               /* Kolor czcionki */
}


		#tb_instantSpells thead th {
    background-color: #1e1e1e !important;
}

tr[style*="background:#D4C0A1"] {
    background-color: #606060 !important; /* nowy kolor */
}


td[bgcolor="#D4C0A1"] {
    background-color: #1e1e1e !important;
}

			/* === STAŁY PRZYCISK DO GÓRY === */
.scroll-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  background: var(--accent);
  color: white;
  font-size: 1.3rem;
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  text-decoration: none;
  transition: background 0.3s, transform 0.3s, opacity 0.3s;
  opacity: 0;
  visibility: hidden;
  z-index: 999;
}

/* Efekt hover */
.scroll-top:hover {
  background: #00bcd4;
  transform: translateY(-4px);
}

/* Widoczny po przewinięciu */
.scroll-top.visible {
  opacity: 1;
  visibility: visible;
}

/* Responsywność – mniejsze urządzenia */
@media (max-width: 600px) {
  .scroll-top {
    width: 40px;
    height: 40px;
    font-size: 1.1rem;
    bottom: 20px;
    right: 20px;
  }
}