@import url("layout.css");

/* =========================================================
   UI — WSPÓLNE KOMPONENTY INTERFEJSU
   ========================================================= */

:root {
    --game-text: #f3f6f8;
    --game-text-muted: #d9e8f2;
    --game-gold: #d1b467;
    --game-gold-bright: #f3d981;
    --game-border: rgba(190, 210, 220, 0.38);
    --game-panel-border: rgba(122, 153, 169, 0.42);
    --game-button-top: #1a2a35;
    --game-button-bottom: #101a21;
    --game-panel-top: rgba(12, 24, 32, 0.96);
    --game-panel-bottom: rgba(7, 15, 20, 0.96);
}

.game-button,
#surrenderBattleButton,
#endTurnButton,
#resetTurnButton,
#closeBattleButton,
#sandboxAddCharacterButton,
#startSandboxButton,
#closeSandboxButton,
#playAddCharacterButton,
#searchGameButton,
#closePlayWindowButton,
#cancelMatchmakingButton,
.sandbox-pagination button,
.play-pagination button {
    border: 1px solid var(--game-border);
    border-radius: 6px;
    background: linear-gradient(180deg, var(--game-button-top), var(--game-button-bottom));
    color: var(--game-text);
    cursor: pointer;
    transition:
        border-color 140ms ease,
        color 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease,
        opacity 140ms ease;
}

.game-button:hover:not(:disabled),
#surrenderBattleButton:hover:not(:disabled),
#endTurnButton:hover:not(:disabled),
#resetTurnButton:hover:not(:disabled),
#closeBattleButton:hover:not(:disabled),
#sandboxAddCharacterButton:hover:not(:disabled),
#startSandboxButton:hover:not(:disabled),
#closeSandboxButton:hover:not(:disabled),
#playAddCharacterButton:hover:not(:disabled),
#searchGameButton:hover:not(:disabled),
#closePlayWindowButton:hover:not(:disabled),
#cancelMatchmakingButton:hover:not(:disabled),
.sandbox-pagination button:hover:not(:disabled),
.play-pagination button:hover:not(:disabled) {
    border-color: var(--game-gold);
    color: var(--game-gold-bright);
    transform: translateY(-1px);
    box-shadow: 0 0 10px rgba(209,180,103,.28);
}

.game-button:disabled,
#surrenderBattleButton:disabled,
#endTurnButton:disabled,
#resetTurnButton:disabled,
#sandboxAddCharacterButton:disabled,
#startSandboxButton:disabled,
#playAddCharacterButton:disabled,
#searchGameButton:disabled,
#cancelMatchmakingButton:disabled,
.sandbox-pagination button:disabled,
.play-pagination button:disabled {
    opacity: .4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.game-button-primary {
    min-width: 220px;
    padding: 13px 28px;
    font-size: 18px;
    font-weight: 700;
}

.game-button-secondary {
    padding: 9px 16px;
    font-size: 14px;
}

.auth-actions .game-button { width: 100%; }

.game-panel,
.auth-card,
.sandbox-character-preview,
.play-character-preview {
    border: 1px solid var(--game-panel-border);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--game-panel-top), var(--game-panel-bottom));
    box-shadow:
        inset 0 0 18px rgba(255,255,255,.018),
        0 0 18px rgba(49,139,198,.07);
}

.auth-card {
    border-color: rgba(191,151,74,.62);
    border-radius: 12px;
}

.game-panel-active,
.sandbox-team-section.active,
.play-team-section,
.battle-side.active {
    border-color: #dfc64d;
    box-shadow: 0 0 15px rgba(226,200,69,.34);
}

.game-icon-button,
.sandbox-preview-skill,
.play-preview-skill,
.battle-skill-button,
.game-character-card,
.sandbox-character-card,
.play-character-card {
    overflow: hidden;
    border: 2px solid #4d5b62;
    border-radius: 6px;
    background: #0d1216;
    transition:
        border-color 140ms ease,
        transform 140ms ease,
        box-shadow 140ms ease,
        opacity 140ms ease;
}

.game-icon-button:hover:not(:disabled),
.sandbox-preview-skill:hover,
.play-preview-skill:hover,
.battle-skill-button:hover:not(:disabled),
.game-character-card:hover,
.sandbox-character-card:hover,
.play-character-card:hover {
    border-color: #e0c95c;
    transform: translateY(-1px);
}

.game-pagination,
.sandbox-pagination,
.play-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    width: 100%;
    margin: 13px auto;
}

.character-role-profile {
    margin-top: 22px;
    padding: 15px;
    border: 1px solid rgba(122,153,169,.42);
    border-radius: 8px;
    background: linear-gradient(180deg, rgba(13,26,35,.92), rgba(7,15,21,.95));
}

.character-role-profile h4 {
    margin: 0 0 14px;
    text-align: center;
    font-size: 16px;
}

.character-role-row { margin-top: 13px; }

.character-role-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.character-role-label { font-weight: 700; }
.character-role-value { color: #afbdc5; font-size: 12px; }

.character-role-segments {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 5px;
}

.character-role-segment {
    height: 11px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    background: rgba(255,255,255,.055);
}

.character-role-segment.filled {
    animation: character-role-float 2.4s ease-in-out infinite;
}

.character-role-damage { color: #ef5d5d; }
.character-role-damage .character-role-segment.filled {
    background: linear-gradient(180deg, #ff7777, #bd3030);
    box-shadow: 0 0 8px #ef5d5d;
}

.character-role-tank { color: #5ba7ed; }
.character-role-tank .character-role-segment.filled {
    background: linear-gradient(180deg, #75bdff, #286aa8);
    box-shadow: 0 0 8px #5ba7ed;
}

.character-role-support { color: #61cf7b; }
.character-role-support .character-role-segment.filled {
    background: linear-gradient(180deg, #80e397, #2f9148);
    box-shadow: 0 0 8px #61cf7b;
}

.character-role-segment:nth-child(2) { animation-delay: 100ms; }
.character-role-segment:nth-child(3) { animation-delay: 200ms; }
.character-role-segment:nth-child(4) { animation-delay: 300ms; }
.character-role-segment:nth-child(5) { animation-delay: 400ms; }

@keyframes character-role-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-2px); }
}

.sandbox-character-hp {
    margin: 0 0 7px;
    color: var(--game-text-muted);
}

.player-logout-button {
    border-color: rgba(193,99,99,.42);
}

.player-logout-button:hover:not(:disabled) {
    border-color: #e88a8a;
    color: #ffb0b0;
    box-shadow: 0 0 10px rgba(232,138,138,.20);
}

em,
.game-empty,
.battle-skill-details-empty {
    font-style: italic;
}


/* Informacja prawna na stronach logowania i rejestracji. */
.auth-legal-disclaimer {
    margin: 18px 0 0;
    padding-top: 14px;

    border-top:
        1px solid rgba(125, 158, 174, 0.22);

    color:
        rgba(199, 211, 218, 0.64);

    font-size: 11px;
    line-height: 1.45;
    text-align: center;
}

@media (max-width: 560px) {
    .auth-legal-disclaimer {
        font-size: 10px;
        line-height: 1.4;
    }
}


.auth-consent-option {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #c7d3da;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
}

.auth-consent-option input {
    width: 18px;
    height: 18px;
    margin: 1px 0 0;
    accent-color: #b98a3f;
    flex: 0 0 auto;
}


/* Discord — ekrany logowania i rejestracji */
.auth-discord-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 16px;
    padding: 11px 14px;
    border: 1px solid rgba(88, 101, 242, .72);
    border-radius: 7px;
    background: linear-gradient(180deg, rgba(51, 63, 117, .9), rgba(28, 35, 70, .96));
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    transition: transform 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
}
.auth-discord-link:hover {
    transform: translateY(-1px);
    border-color: #9aa3ff;
    box-shadow: 0 0 14px rgba(88, 101, 242, .32);
}
.auth-discord-link img {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}
@media (max-width: 520px) {
    .auth-discord-link {
        min-height: 46px;
        padding: 10px 12px;
        font-size: 15px;
    }
}


/* Patch 0.07 — language selector */
.auth-language-switcher{position:absolute;top:18px;right:18px;display:flex;gap:8px;z-index:5}.language-option{border:1px solid rgba(255,215,80,.45);background:rgba(5,18,27,.82);border-radius:8px;padding:5px 8px;font-size:22px;line-height:1;cursor:pointer;opacity:.68;transition:.18s}.language-option:hover,.language-option.is-active{opacity:1;transform:translateY(-1px);box-shadow:0 0 0 2px rgba(255,215,80,.28)}.auth-card{position:relative}.settings-language-select{width:100%;min-height:40px;border:1px solid rgba(255,215,80,.35);border-radius:6px;background:#07131d;color:#fff;padding:8px 10px}

/* Patch 0.07 stage 1 hotfix: visible language flags */
.language-option{width:42px;height:34px;padding:4px;display:inline-flex;align-items:center;justify-content:center;overflow:hidden}.flag{display:block;width:28px;height:18px;border-radius:2px;box-shadow:0 0 0 1px rgba(255,255,255,.4);position:relative;overflow:hidden}.flag-pl{background:linear-gradient(to bottom,#fff 0 50%,#dc143c 50% 100%)}.flag-gb{background:#21468b}.flag-gb:before,.flag-gb:after{content:"";position:absolute;inset:0}.flag-gb:before{background:linear-gradient(27deg,transparent 43%,#fff 43% 48%,#cf142b 48% 52%,#fff 52% 57%,transparent 57%),linear-gradient(-27deg,transparent 43%,#fff 43% 48%,#cf142b 48% 52%,#fff 52% 57%,transparent 57%)}.flag-gb:after{background:linear-gradient(to right,transparent 38%,#fff 38% 44%,#cf142b 44% 56%,#fff 56% 62%,transparent 62%),linear-gradient(to bottom,transparent 32%,#fff 32% 40%,#cf142b 40% 60%,#fff 60% 68%,transparent 68%)}