/* --- Podstawowe ustawienia --- */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Georgia', serif;
    background-color: #1a1a1a;
    overflow: hidden;
}

/* --- STYLE MENU --- */
#menu-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10000;
    color: white;
    font-family: Arial, sans-serif;
}
.menu-container {
    background: #3d2f23;
    border: 5px solid #c0a060;
    border-radius: 10px;
    padding: 30px;
    width: 80%;
    max-width: 900px;
    text-align: center;
    box-shadow: 0 0 40px rgba(0,0,0,0.5);
}
.menu-section {
    margin-bottom: 20px;
}
.menu-section label {
    display: block;
    font-size: 18px;
    margin-bottom: 10px;
}
#player-name-input {
    padding: 10px;
    font-size: 16px;
    width: 50%;
    border-radius: 5px;
    border: 2px solid #c0a060;
}
.avatar-selection {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}
.avatar-option {
    background: #2a2a2a;
    border: 3px solid #555;
    border-radius: 10px;
    padding: 15px;
    width: 250px;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}
.avatar-option:hover {
    background-color: #3a3a3a;
    border-color: #c0a060;
}
.avatar-option.selected {
    background-color: #4a3b2a;
    border-color: #00ffaa;
    box-shadow: 0 0 15px #00ffaa;
}
.avatar-option img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid #c0a060;
}
.avatar-option span {
    display: block;
    font-size: 20px;
    font-weight: bold;
    margin: 10px 0;
}
.avatar-option p {
    font-size: 14px;
    color: #ccc;
    height: 60px;
}
#start-game-btn {
    padding: 15px 30px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: #2a8a4a;
    border: 3px solid #1a5a3a;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
}
#start-game-btn:hover {
    background-color: #3a9a5a;
}
/* --- Koniec stylów menu --- */


/* --- STYLE KOŃCA GRY --- */
#game-over-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9998;
    color: white;
    font-family: Arial, sans-serif;
}
#game-over-screen h1 {
    font-size: 48px;
    text-transform: uppercase;
}
#game-over-screen button {
    padding: 15px 30px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: #3a5a9a;
    border: 3px solid #1a3a7a;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 20px;
}
#game-over-screen button:hover {
    background-color: #4a6abf;
}
/* --- Koniec stylów końca gry --- */


/* Klasa ukrywająca elementy */
.hidden {
    display: none !important;
}

/* --- Główna plansza gry --- */
#game-board {
    width: 1400px;
    height: 900px;
    margin: 20px auto;
    background-color: #d7c6a5;
    background-image: url('https://www.transparenttextures.com/patterns/old-parchment.png');
    border: 5px solid #4a3b2a;
    border-radius: 10px;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.7);
    position: relative;
    display: block; 
    padding-top: 50px;
    padding-bottom: 120px;
    box-sizing: border-box;
}

/* --- PASKI UI --- */
.top-ui-bar, .bottom-ui-bar {
    position: absolute;
    left: 0;
    right: 0;
    height: 50px;
    background-color: rgba(0, 0, 0, 0.4);
    border-bottom: 3px solid #4a3b2a;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    z-index: 100;
}
.top-ui-bar {
    top: 0;
    border-bottom: 3px solid #4a3b2a;
    border-top: none;
}
.bottom-ui-bar {
    bottom: 0;
    height: 120px;
    border-top: 3px solid #4a3b2a;
    border-bottom: none;
    justify-content: space-between;
    padding: 0 40px;
    align-items: center;
}
.opponent-resources {
    display: flex;
    gap: 20px;
    align-items: center;
}
.player-deck-area {
    display: flex;
    gap: 20px;
    align-items: center;
}


/* --- ETYKIETY (Labels) --- */
.zone-label {
    font-family: Arial, sans-serif;
    font-weight: bold;
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
}
.zone-label.main-label {
    font-size: 20px;
    color: white;
}
.zone-label.avatar-label {
    font-size: 16px;
    margin-bottom: 5px;
    height: 20px; 
    overflow: hidden;
}
.zone-label.hand-label {
    position: absolute;
    bottom: 125px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    background: rgba(0, 0, 0, 0.5);
    padding: 5px 15px;
    border-radius: 10px;
    z-index: 101;
}
.zone-label.small {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: 3px;
}

/* --- Strefy Graczy --- */
.player-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    z-index: 1;
    height: 350px; 
}
.player-area.opponent {
    flex-direction: row-reverse;
}

/* --- Awatary i Zdrowie --- */
.avatar-container {
    text-align: center;
    margin: 0 20px;
    position: relative;
    flex-shrink: 0;
}
.avatar {
    width: 100px;
    height: 100px;
    background-color: #555;
    border: 4px solid #c0a060;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
}
.health {
    font-size: 28px;
    font-weight: bold;
    color: #fff;
    background-color: #a02c2c;
    border: 2px solid #501616;
    border-radius: 20px;
    padding: 2px 10px;
    margin-top: -15px;
    position: relative;
    z-index: 10;
}

/* --- Pasy (Lanes) - 5 PÓL --- */
.lanes-container {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-grow: 1;
    padding: 0 10px;
}
.lane {
    width: 200px;
    height: 230px;
    border: 3px dashed rgba(74, 59, 42, 0.5);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s;
}
.lane.targetable:hover {
    background-color: rgba(0, 255, 0, 0.2);
    border-style: solid;
    border-color: rgba(0, 255, 0, 0.5);
    cursor: pointer;
}

/* --- Ręka Gracza --- */
.hand {
    display: flex;
    justify-content: center;
    padding: 10px;
    width: 60%;
    position: absolute;
    bottom: -120px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 102;
    transition: bottom 0.2s ease;
}
.hand:hover {
    bottom: -10px;
}

/* --- Elementy UI (Talia, Mana, Przycisk) --- */
.deck {
    width: 100px;
    height: 150px;
    background-color: #4a2a1a;
    border: 4px solid #c0a060;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s ease;
    position: relative;
    bottom: 20px;
}
.deck:hover {
    transform: scale(1.05);
}
#deck-count {
    font-size: 24px;
    margin-top: 10px;
}
.opponent-deck {
    width: 80px;
    height: 120px;
    font-size: 16px;
    cursor: default;
    position: static;
    bottom: 0;
}
.opponent-deck:hover {
    transform: none;
}
.opponent-deck #opponent-deck-count {
    font-size: 20px;
}

.mana-crystal {
    width: 100px;
    height: 100px;
    background-color: #3a5a9a;
    border: 4px solid #c0a060;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 28px;
    font-weight: bold;
    text-shadow: 0 0 5px black;
    box-shadow: 0 0 15px #3a5a9a;
}
.opponent-mana {
    width: 80px;
    height: 80px;
    font-size: 24px;
    background-color: #8a3a9a;
    box-shadow: 0 0 15px #8a3a9a;
    position: static;
}

/* Przycisk tury na środku */
.end-turn-button {
    position: absolute;
    left: 50%;
    top: 400px; 
    transform: translate(-50%, -50%);
    z-index: 50;
    padding: 15px 30px;
    font-size: 20px;
    font-weight: bold;
    color: white;
    background-color: rgba(42, 138, 74, 0.8);
    border: 3px solid #1a5a3a;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    transition: background-color 0.2s, transform 0.2s;
}
.end-turn-button:hover {
    background-color: rgba(58, 154, 90, 0.9);
}
.end-turn-button:disabled {
    background-color: rgba(85, 85, 85, 0.8);
    border-color: #333;
    color: #999;
    cursor: not-allowed;
}

/* Cmentarz */
.cemetery {
    width: 80px;
    height: 100px;
    background-color: #2a2a2a;
    border: 4px solid #111;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;
    font-weight: bold;
}
.cemetery span {
    font-size: 24px;
    color: #ff4d4d;
    margin-top: 5px;
}
#player-cemetery {
    position: relative;
    bottom: 20px;
}

/* --- Style Kart --- */
.card {
    width: 120px;
    height: 180px;
    background-color: #3d2f23;
    border: 3px solid #1a1a1a;
    border-radius: 10px;
    color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    font-family: Arial, sans-serif;
    position: relative;
    flex-shrink: 0;
}
/* === POPRAWKA STYLÓW RZADKOŚCI === */
.card.common {
    background-color: #3d2f23; /* Brąz */
    border-color: #1a1a1a;
}
.card.rare {
    background-color: #4a2f4a; /* Fiolet */
    border-color: #7a4a7a;
}
.card.ultra-rare {
    background-color: #ff0062; /* Nowy kolor - Różowy/Magentowy */
    border-color: #a10040; /* Dopasowana ciemna ramka */
}
/* ================================ */

.card-cost, .card-art, .card-name, .card-description, .card-stats {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.card-cost {
    position: absolute; top: -5px; left: -5px; width: 30px; height: 30px;
    background-color: #3a5a9a; color: white; border: 2px solid #fff;
    border-radius: 50%; display: flex; justify-content: center;
    align-items: center; font-size: 20px; font-weight: bold; z-index: 2;
}
.card-art {
    height: 90px; margin: 10px 10px 5px 10px; background-color: #666;
    border-radius: 5px; border: 2px solid #c0a060;
    background-size: cover; background-position: center;
}
.card-name {
    font-size: 14px; font-weight: bold; text-align: center;
    padding: 5px 0; color: #f0e0c0;
}
.card-description {
    font-size: 11px; text-align: center; padding: 5px; color: #ccc;
}
.card-stats {
    display: flex; justify-content: space-between; padding: 0 15px;
    margin-top: auto; margin-bottom: 10px; font-size: 18px; font-weight: bold;
}
.stat-attack { color: #f0c040; }
.stat-health { color: #c04040; }
.stat-health.damaged { color: #ff8080; }

.hand-card {
    margin: 0 -20px;
    transition: transform 0.2s ease, z-index 0s 0.2s;
    position: relative;
    z-index: 1;
    cursor: pointer;
}
.hand-card:hover {
    transform: translateY(-40px) scale(1.1);
    z-index: 100 !important;
    transition: transform 0.2s ease;
}
.hand:hover .hand-card {
    z-index: 1;
}

.card.in-play {
    width: 140px;
    height: 210px;
}
.card.in-play .card-art {
    height: 110px;
}

.card.in-play.player-card {
    box-shadow: 0 0 20px 8px #00aaff, 0 4px 8px rgba(0, 0, 0, 0.4);
}
.card.in-play.opponent-card {
    box-shadow: 0 0 20px 8px #00ffaa, 0 4px 8px rgba(0, 0, 0, 0.4);
}

.in-play.summoning-sick {
    opacity: 0.7;
    box-shadow: 0 0 15px 5px #777; 
}

.hand-card.disabled {
    filter: grayscale(80%) brightness(0.7);
    cursor: not-allowed;
}
.hand-card.disabled:hover {
    transform: none;
    z-index: 1 !important;
}

/* --- Style dla Celowania i Zagrywania --- */
body.targeting-mode, body.placing-mode {
    cursor: crosshair !important;
}
.hand-card.is-targeting {
    transform: translateY(-40px) scale(1.1);
    box-shadow: 0 0 20px 10px #ff0000;
    z-index: 100 !important;
}
.hand-card.is-placing {
    transform: translateY(-40px) scale(1.1);
    box-shadow: 0 0 20px 10px #00ff00;
    z-index: 100 !important;
}

.targetable {
    cursor: crosshair;
}
.targetable:hover {
    box-shadow: 0 0 30px 15px rgba(255, 0, 0, 0.8) !important;
    transform: scale(1.05);
}

/* --- Animacje Obrażeń i Leczenia --- */
.damage-popup {
    position: absolute;
    z-index: 9999;
    font-size: 32px;
    font-weight: bold;
    color: #ff4d4d;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
    transform: translate(-50%, -50%); 
    animation: floatAndFade 1.5s ease-out forwards;
}

@keyframes floatAndFade {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    50% { opacity: 1; transform: translate(-50%, -80px) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -120px) scale(1); }
}

.heal-popup {
    position: absolute;
    z-index: 9999;
    font-size: 32px;
    font-weight: bold;
    color: #4dff4d;
    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: floatAndFadeHeal 1.5s ease-out forwards;
}

@keyframes floatAndFadeHeal {
    0% { opacity: 1; transform: translate(-50%, -50%) scale(0.5); }
    50% { opacity: 1; transform: translate(-50%, -80px) scale(1.2); }
    100% { opacity: 0; transform: translate(-50%, -120px) scale(1); }
}