/* Ogólne style */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    text-align: center;
    background-color: #1a1a1a;
    color: white;
}

/* Nagłówek */
header {
    display: flex;
    justify-content: center;
    align-items: center;
    background: url('../img/header.png') no-repeat center/cover;
    color: white;
    padding: 40px;
    position: relative;
}

/* Logo */
.logo {
    height: 150px;
}


/* Ogólne style */

/* Nagłówek */

/* Logo */




/* GŁÓWNY KONTENER */
/* GŁÓWNY KONTENER */
.container {
    display: flex;
    width: 98vw;
    padding: 20px;
    box-sizing: border-box;
    gap: 20px;
}



/* LEWA SEKCJA – MENU */
.menu {
    flex: 0 0 15%;
    min-width: 200px;
    background-color: #222;
    padding: 20px;
    border: 1px solid #444;
    text-align: left;
    border-radius: 10px;
}

.menu ul {
    list-style-type: none;
    padding: 0;
}

.menu li {
    margin: 10px 0;
}

.menu a {
    display: block;
    text-decoration: none;
    color: white;
    background-color: #d35400;
    padding: 10px;
    text-align: center;
    border-radius: 5px;
    font-weight: bold;
}

.menu a:hover {
    background-color: #e67e22;
}

/* ŚRODKOWA SEKCJA – CONTENT */
.content {
    flex: 0 0 70%;
    background-color: #444;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #555;
}

/* Boczne kolumny */
.column {
    flex: 0.1;
    background-color: #222;
    padding: 20px;
    border: 1px solid #444;
    border-radius: 10px;
}

/* Sidebar po prawej (15%) */
.column.sidebar {
    flex: 0 0 10%;
    background-color: #222;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid #444;
}



/* Stopka */
footer {
    background-color: #111;
    color: white;
    padding: 20px;
}



/* Stopka */
footer {
    background-color: #111;
    color: white;
    padding: 20px;
}





/* Wiadomość o sukcesie */
#registerMessage {
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 10px;
}

.account-actions {
    display: flex;
    justify-content: center; /* Środkowanie elementów */
    gap: 40px; /* Odsunięcie kolumn od siebie */
    padding: 20px;
}

.column-left, .column-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center; /* Środkowanie przycisków */
}

.column-left button, .column-right button {
    padding: 10px;
    width: 220px; /* Trochę większe dla lepszego wyglądu */
    font-weight: bold;
    background-color: #d35400;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.column-left button:hover, .column-right button:hover {
    background-color: #e67e22;
}

/* Centrum dla przycisku Premium */
.center {
    text-align: center;
    margin-top: 20px;
}

.premium-btn {
    background-color: gold;
    font-weight: bold;
    padding: 12px;
    border-radius: 5px;
    cursor: pointer;
}

.premium-btn:hover {
    background-color: darkgoldenrod;
}

/* Popup błędu logowania */
.popup-error {
    display: none;
    position: fixed;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: rgba(255, 0, 0, 0.9);
    color: white;
    padding: 15px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    z-index: 1000;
    width: 250px;
    box-shadow: 0px 0px 10px rgba(255, 0, 0, 0.5);
}

/* Kontener strony tworzenia postaci */
.create-character {
    width: 400px; /* Zmniejszona szerokość */
    background-color: rgba(255, 255, 255, 0.9); /* Jasne tło dla lepszej widoczności */
    border-radius: 10px;
    padding: 20px;
    text-align: center;
    color: black;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    margin: 50px auto;
}

/* Nagłówki */
.create-character h2 {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.create-character p {
    font-size: 16px;
    margin-bottom: 20px;
}

/* Kontener na przycisk */
.village-container {
    text-align: center;
    margin-top: 20px;
}

/* Przycisk wyboru wioski */
.village-button {
    background: url('../img/konoha_village.png') no-repeat center center;
    background-size: contain;
    width: 140px;
    height: 140px;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}

/* Efekt podświetlenia po najechaniu */
.village-button:hover {
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.8));
}

/* Strona wyboru klanu */

/* Nagłówki */


/* Kontener dla klanów */
.clan-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 900px; /* Ograniczenie szerokości */
    margin: 0 auto;
}

/* Pierwszy rząd - 5 klanów */
.clan-container .clan-button:nth-child(1),
.clan-container .clan-button:nth-child(2),
.clan-container .clan-button:nth-child(3),
.clan-container .clan-button:nth-child(4),
.clan-container .clan-button:nth-child(5) {
    flex: 1 1 18%;
}

/* Drugi rząd - 4 klany */
.clan-container .clan-button:nth-child(6),
.clan-container .clan-button:nth-child(7),
.clan-container .clan-button:nth-child(8),
.clan-container .clan-button:nth-child(9) {
    flex: 1 1 22%;
}

/* Trzeci rząd - 1 klan (No Clan) */
.clan-container .clan-button:nth-child(10) {
    flex: 1 1 100%;
    display: flex;
    justify-content: center;
    margin-top: 20px; /* Oddzielenie od reszty */
}

/* Powiększone przyciski klanów */
.clan-button {
    width: 160px; /* Większe przyciski */
    height: 160px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    border: none;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.5));
}

/* Efekt podświetlenia po najechaniu */
.clan-button:hover {
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.8));
}


/* Styl dla przycisku Back - taki sam jak inne przyciski */
.back-button {
    width: 160px;
    height: 50px;
    background-color: #d35400;
    color: white;
    font-weight: bold;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.3s ease, background-color 0.3s ease;
    text-align: center;
    margin-top: 20px;
}

/* Efekt podświetlenia przycisku Back */
.back-button:hover {
    background-color: #e67e22;
    transform: scale(1.05);
}
/* Styl dla przycisku Back - taki sam jak inne przyciski */

/* Efekt podświetlenia przycisku Back */


/* Kontener strony klanu Aburame */
.aburame-container {
    background: url('../img/aburame.jpg') no-repeat center top;
    background-size: contain;
    background-position: center;
    min-height: 75vh; /* 3/4 ekranu */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    position: relative;
}

/* Nagłówek w ramce */
.aburame-title {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

/* Układ dwóch kolumn */
.aburame-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 30%; /* Podniesienie tabeli jeszcze wyżej */
    transform: translateY(-30%);
}

/* Lewa tabela - Informacje o klanie */
.aburame-left {
    width: 30%; /* Zwężona do 50% poprzedniej szerokości */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    left: 0;
    top: 5%; /* Jeszcze wyżej */
}

/* Prawa tabela - Formularz postaci */
.aburame-right {
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    right: 0;
    top: 5%; /* Jeszcze wyżej */
}

/* Formularz postaci */
.aburame-form input, 
.aburame-form select, 
.aburame-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Przyciski - Wyśrodkowane pod tabelami */
.aburame-buttons {
    position: absolute;
    top: 75%; /* Pod tabelami */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

/* Styl przycisków */
.aburame-button {
    padding: 10px 20px;
    font-weight: bold;
    background-color: #d35400;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.aburame-button:hover {
    background-color: #e67e22;
}
/* Kontener strony klanu Akimichi */
.akimichi-container {
    background: url('../img/chouji.jpg') no-repeat center top;
    background-size: contain;
    background-position: center;
    min-height: 75vh; /* 3/4 ekranu */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    position: relative;
}

/* Nagłówek w ramce */
.akimichi-title {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

/* Układ dwóch kolumn */
.akimichi-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 30%; /* Podniesienie tabel */
    transform: translateY(-30%);
}

/* Lewa tabela - Informacje o klanie */
.akimichi-left {
    width: 30%; /* Zwężona do 50% poprzedniej szerokości */
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    left: 0;
    top: 5%; /* Jeszcze wyżej */
}

/* Prawa tabela - Formularz postaci */
.akimichi-right {
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    right: 0;
    top: 5%; /* Jeszcze wyżej */
}

/* Formularz postaci */
.akimichi-form input, 
.akimichi-form select, 
.akimichi-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Przyciski - Wyśrodkowane pod tabelami */
.akimichi-buttons {
    position: absolute;
    top: 75%; /* Pod tabelami */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

/* Styl przycisków */
.akimichi-button {
    padding: 10px 20px;
    font-weight: bold;
    background-color: #d35400;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.akimichi-button:hover {
    background-color: #e67e22;
}
/* Kontener strony klanu Hyuuga */
.hyuuga-container {
    background: url('../img/hyuuga.jpg') no-repeat center top;
    background-size: contain;
    background-position: center;
    min-height: 75vh; /* 3/4 ekranu */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    position: relative;
}

/* Nagłówek w ramce */
.hyuuga-title {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

/* Układ dwóch kolumn */
.hyuuga-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 30%; /* Podniesienie tabel */
    transform: translateY(-30%);
}

/* Lewa tabela - Informacje o klanie */
.hyuuga-left {
    width: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    left: 0;
    top: 5%;
}

/* Prawa tabela - Formularz postaci */
.hyuuga-right {
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    right: 0;
    top: 5%;
}

/* Formularz postaci */
.hyuuga-form input, 
.hyuuga-form select, 
.hyuuga-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Przyciski - Wyśrodkowane pod tabelami */
.hyuuga-buttons {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

/* Styl przycisków */
.hyuuga-button {
    padding: 10px 20px;
    font-weight: bold;
    background-color: #d35400;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.hyuuga-button:hover {
    background-color: #e67e22;
}
/* Kontener strony klanu Inuzuka */
.inuzuka-container {
    background: url('../img/inuzuka.jpg') no-repeat center top;
    background-size: contain;
    background-position: center;
    min-height: 75vh; /* 3/4 ekranu */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    position: relative;
}

/* Nagłówek w ramce */
.inuzuka-title {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

/* Układ dwóch kolumn */
.inuzuka-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 30%; /* Podniesienie tabel */
    transform: translateY(-30%);
}

/* Lewa tabela - Informacje o klanie */
.inuzuka-left {
    width: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    left: 0;
    top: 5%;
}

/* Prawa tabela - Formularz postaci */
.inuzuka-right {
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    right: 0;
    top: 5%;
}

/* Formularz postaci */
.inuzuka-form input, 
.inuzuka-form select, 
.inuzuka-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Przyciski - Wyśrodkowane pod tabelami */
.inuzuka-buttons {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

/* Styl przycisków */
.inuzuka-button {
    padding: 10px 20px;
    font-weight: bold;
    background-color: #d35400;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.inuzuka-button:hover {
    background-color: #e67e22;
}
/* Kontener strony klanu Nara */
.nara-container {
    background: url('../img/nara.jpg') no-repeat center top;
    background-size: contain;
    background-position: center;
    min-height: 75vh; /* 3/4 ekranu */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    position: relative;
}

/* Nagłówek w ramce */
.nara-title {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

/* Układ dwóch kolumn */
.nara-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 30%; /* Podniesienie tabel */
    transform: translateY(-30%);
}

/* Lewa tabela - Informacje o klanie */
.nara-left {
    width: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    left: 0;
    top: 5%;
}

/* Prawa tabela - Formularz postaci */
.nara-right {
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    right: 0;
    top: 5%;
}

/* Formularz postaci */
.nara-form input, 
.nara-form select, 
.nara-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Przyciski - Wyśrodkowane pod tabelami */
.nara-buttons {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

/* Styl przycisków */
.nara-button {
    padding: 10px 20px;
    font-weight: bold;
    background-color: #d35400;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.nara-button:hover {
    background-color: #e67e22;
}
/* Kontener strony klanu Senju */
.senju-container {
    background: url('../img/senju.jpg') no-repeat center top;
    background-size: contain;
    background-position: center;
    min-height: 75vh; /* 3/4 ekranu */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    position: relative;
}

/* Nagłówek w ramce */
.senju-title {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

/* Układ dwóch kolumn */
.senju-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 30%; /* Podniesienie tabel */
    transform: translateY(-30%);
}

/* Lewa tabela - Informacje o klanie */
.senju-left {
    width: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    left: 0;
    top: 5%;
}

/* Prawa tabela - Formularz postaci */
.senju-right {
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    right: 0;
    top: 5%;
}

/* Formularz postaci */
.senju-form input, 
.senju-form select, 
.senju-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Przyciski - Wyśrodkowane pod tabelami */
.senju-buttons {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

/* Styl przycisków */
.senju-button {
    padding: 10px 20px;
    font-weight: bold;
    background-color: #d35400;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.senju-button:hover {
    background-color: #e67e22;
}

/* Kontener strony klanu Yamanaka */
.yamanaka-container {
    background: url('../img/yamanaka.jpg') no-repeat center top;
    background-size: contain;
    background-position: center;
    min-height: 75vh; /* 3/4 ekranu */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    position: relative;
}

/* Nagłówek w ramce */
.yamanaka-title {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

/* Układ dwóch kolumn */
.yamanaka-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 30%; /* Podniesienie tabel */
    transform: translateY(-30%);
}

/* Lewa tabela - Informacje o klanie */
.yamanaka-left {
    width: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    left: 0;
    top: 5%;
}

/* Prawa tabela - Formularz postaci */
.yamanaka-right {
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    right: 0;
    top: 5%;
}

/* Formularz postaci */
.yamanaka-form input, 
.yamanaka-form select, 
.yamanaka-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Przyciski - Wyśrodkowane pod tabelami */
.yamanaka-buttons {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

/* Styl przycisków */
.yamanaka-button {
    padding: 10px 20px;
    font-weight: bold;
    background-color: #d35400;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.yamanaka-button:hover {
    background-color: #e67e22;
}
/* Kontener strony klanu Uzumaki */
.uzumaki-container {
    background: url('../img/uzumaki.jpg') no-repeat center top;
    background-size: contain;
    background-position: center;
    min-height: 75vh; /* 3/4 ekranu */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 30px;
    position: relative;
}

/* Nagłówek w ramce */
.uzumaki-title {
    background-color: rgba(255, 255, 255, 0.9);
    color: black;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    text-transform: uppercase;
    border: 2px solid black;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
    margin-bottom: 20px;
}

/* Układ dwóch kolumn */
.uzumaki-grid {
    display: flex;
    justify-content: space-between;
    width: 100%;
    max-width: 1200px;
    position: absolute;
    top: 30%; /* Podniesienie tabel */
    transform: translateY(-30%);
}

/* Lewa tabela - Informacje o klanie */
.uzumaki-left {
    width: 30%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    left: 0;
    top: 5%;
}

/* Prawa tabela - Formularz postaci */
.uzumaki-right {
    width: 40%;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    color: black;
    text-align: left;
    position: absolute;
    right: 0;
    top: 5%;
}

/* Formularz postaci */
.uzumaki-form input, 
.uzumaki-form select, 
.uzumaki-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Przyciski - Wyśrodkowane pod tabelami */
.uzumaki-buttons {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 15px;
}

/* Styl przycisków */
.uzumaki-button {
    padding: 10px 20px;
    font-weight: bold;
    background-color: #d35400;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.uzumaki-button:hover {
    background-color: #e67e22;
}
.looktype-selection {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.looktype-option {
    cursor: pointer;
    padding: 5px;
    border-radius: 10px;
    transition: all 0.2s ease-in-out;
}

.looktype-img {
    border-radius: 15px;
    transition: transform 0.2s ease-in-out, border 0.2s ease-in-out;
    border: 2px solid transparent;
}

.looktype-option:hover .looktype-img {
    transform: scale(1.1);
}

.looktype-option.selected .looktype-img {
    border: 3px solid orange;
}
.button-container {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}



/* ------------------------------------- MODAL STYLISTYKA ------------------------------------- */

.modal {
    display: none;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    background-color: #222;
    color: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255, 165, 0, 0.6);
    text-align: center;
}

.modal input {
    width: 100%;
    padding: 10px;
    margin: 5px 0;
    border: 1px solid #555;
    background-color: #333;
    color: white;
    border-radius: 5px;
}


.modal-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #1e1e1e;
    padding: 20px;
    border-radius: 10px;
}

.modal h2 {
    margin-bottom: 10px;
    color: #FFA500;
}



.modal button {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background-color: #FFA500;
    border: none;
    color: black;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.modal button:hover {
    background-color: #FF8C00;
}

.close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 24px;
    cursor: pointer;
    color: white;
}

.close:hover {
    color: red;
}




/* ------------------------------------- KONIEC STYLU ------------------------------------- */


/* Kontener główny */

/* Menu */





/* Treść */

/* Boczne kolumny */

/* Stopka */





/* Wiadomość o sukcesie */





/* Centrum dla przycisku Premium */



/* Popup błędu logowania */

/* Kontener strony tworzenia postaci */

/* Nagłówki */


/* Kontener na przycisk */

/* Przycisk wyboru wioski */

/* Efekt podświetlenia po najechaniu */

/* Strona wyboru klanu */

/* Nagłówki */


/* Kontener dla klanów */

/* Pierwszy rząd - 5 klanów */
.clan-container .clan-button:nth-child(1),
.clan-container .clan-button:nth-child(2),
.clan-container .clan-button:nth-child(3),
.clan-container .clan-button:nth-child(4),

/* Drugi rząd - 4 klany */
.clan-container .clan-button:nth-child(6),
.clan-container .clan-button:nth-child(7),
.clan-container .clan-button:nth-child(8),

/* Trzeci rząd - 1 klan (No Clan) */

/* Powiększone przyciski klanów */

/* Efekt podświetlenia po najechaniu */


/* Styl dla przycisku Back - taki sam jak inne przyciski */

/* Efekt podświetlenia przycisku Back */
/* Styl dla przycisku Back - taki sam jak inne przyciski */

/* Efekt podświetlenia przycisku Back */


/* Kontener strony klanu Aburame */

/* Nagłówek w ramce */

/* Układ dwóch kolumn */

/* Lewa tabela - Informacje o klanie */

/* Prawa tabela - Formularz postaci */

/* Formularz postaci */
.aburame-form input, 
.aburame-form select, 

/* Przyciski - Wyśrodkowane pod tabelami */

/* Styl przycisków */

/* Kontener strony klanu Akimichi */

/* Nagłówek w ramce */

/* Układ dwóch kolumn */

/* Lewa tabela - Informacje o klanie */

/* Prawa tabela - Formularz postaci */

/* Formularz postaci */
.akimichi-form input, 
.akimichi-form select, 

/* Przyciski - Wyśrodkowane pod tabelami */

/* Styl przycisków */

/* Kontener strony klanu Hyuuga */

/* Nagłówek w ramce */

/* Układ dwóch kolumn */

/* Lewa tabela - Informacje o klanie */

/* Prawa tabela - Formularz postaci */

/* Formularz postaci */
.hyuuga-form input, 
.hyuuga-form select, 

/* Przyciski - Wyśrodkowane pod tabelami */

/* Styl przycisków */

/* Kontener strony klanu Inuzuka */

/* Nagłówek w ramce */

/* Układ dwóch kolumn */

/* Lewa tabela - Informacje o klanie */

/* Prawa tabela - Formularz postaci */

/* Formularz postaci */
.inuzuka-form input, 
.inuzuka-form select, 

/* Przyciski - Wyśrodkowane pod tabelami */

/* Styl przycisków */

/* Kontener strony klanu Nara */

/* Nagłówek w ramce */

/* Układ dwóch kolumn */

/* Lewa tabela - Informacje o klanie */

/* Prawa tabela - Formularz postaci */

/* Formularz postaci */
.nara-form input, 
.nara-form select, 

/* Przyciski - Wyśrodkowane pod tabelami */

/* Styl przycisków */

/* Kontener strony klanu Senju */

/* Nagłówek w ramce */

/* Układ dwóch kolumn */

/* Lewa tabela - Informacje o klanie */

/* Prawa tabela - Formularz postaci */

/* Formularz postaci */
.senju-form input, 
.senju-form select, 

/* Przyciski - Wyśrodkowane pod tabelami */

/* Styl przycisków */




/* Kontener strony klanu Yamanaka */

/* Nagłówek w ramce */

/* Układ dwóch kolumn */

/* Lewa tabela - Informacje o klanie */

/* Prawa tabela - Formularz postaci */

/* Formularz postaci */
.yamanaka-form input, 
.yamanaka-form select, 

/* Przyciski - Wyśrodkowane pod tabelami */

/* Styl przycisków */

/* Kontener strony klanu Uzumaki */

/* Nagłówek w ramce */

/* Układ dwóch kolumn */

/* Lewa tabela - Informacje o klanie */

/* Prawa tabela - Formularz postaci */

/* Formularz postaci */
.uzumaki-form input, 
.uzumaki-form select, 

/* Przyciski - Wyśrodkowane pod tabelami */

/* Styl przycisków */









/* ===================================== */
/* 🔹 MODAL WINDOW - REJESTRACJA */
/* ===================================== */


/* 🔹 Nagłówek w modalu */

/* 🔹 Styl dla etykiet pól */
.modal label {
    font-size: 12px; /* 🔹 ZMNIEJSZENIE CZCIONKI */
    font-weight: bold;
    color: #bbb;
    text-align: left;
    width: 100%;
    margin-top: 12px; /* 🔹 WIĘKSZA ODLEGŁOŚĆ MIĘDZY REGISTER A REAL NAME */
}

/* 🔹 Pola tekstowe */

/* 🔹 Przycisk rejestracji */
#registerButton {
    width: 100%;
    padding: 10px;
    margin-top: 15px; /* 🔹 WIĘKSZA ODLEGŁOŚĆ OD POL */
    background-color: #d35400;
    border: none;
    color: white;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

#registerButton:hover {
    background-color: #e67e22;
}

/* 🔹 Wiadomości dynamiczne pod polami */
.validation-message {
    font-size: 12px;
    color: red;
    margin-top: 3px;
    text-align: left;
    width: 100%;
}




/* ===================================== */
/* 🔹 PANEL LOGOWANIA */
/* ===================================== */
.login-panel {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    background-color: #222;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #444;
    text-align: center;
}

.login-panel input {
    margin: 5px 0;
    padding: 8px;
    width: 90%;
    border-radius: 5px;
    border: none;
    background-color: #333;
    color: white;
}

.login-button, .create-account-button {
    margin-top: 5px;
    padding: 10px;
    width: 100%;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    background-color: #d35400;
    color: white;
}

.login-button:hover, .create-account-button:hover {
    background-color: #e67e22;
}

/* ===================================== */
/* 🔹 POPUP BŁĘDU LOGOWANIA */
/* ===================================== */
/* ===================================== */
/* 🔹 PANEL ZALOGOWANEGO UŻYTKOWNIKA */
/* ===================================== */
.logged-in-panel {
    position: absolute;
    left: 30px;
    top: 50%;
    transform: translateY(-50%);
    width: 250px;
    background-color: #222;
    padding: 15px;
    border-radius: 10px;
    border: 1px solid #444;
    text-align: center;
}

.logged-in-panel p {
    font-size: 16px;
    font-weight: bold;
    color: white;
    margin-bottom: 10px;
}

.account-button, .logout-button {
    margin-top: 5px;
    padding: 10px;
    width: 100%;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    transition: background 0.3s ease;
    background-color: #d35400;
    color: white;
}

.account-button:hover, .logout-button:hover {
    background-color: #e67e22;
}

.music-player-container {
    position: absolute;
    top: 50%;
    right: 0; /* Odtwarzacz CAŁKIEM na prawym krańcu */
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.8); /* Opcjonalne tło */
    padding: 10px;
    border-radius: 10px 0 0 10px; /* Zaokrąglenie tylko z lewej strony */
}

.music-player-container audio {
    width: 180px; /* Możesz dostosować szerokość */
}

/* ------------------------------------- KONIEC STYLU ------------------------------------- */
/* MOBILE RESPONSYWNOŚĆ */

/* PayPal iframe w sidebarze */
.column.sidebar iframe {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 550px;
    border: none;
    margin-top: 20px;
    box-sizing: border-box;
}