/* style.css — wersja uporządkowana: scalone selektory, bez historycznych nakładek v0.5.8–v0.5.13. */
/* Uwaga: wartości odpowiadają finalnemu stanowi poprzedniego pliku po kaskadzie CSS. */

/*
 * STYLE.CSS - SPIS SEKCJI
 *
 * 01. Fundamenty: fonty, animacje, globalne reguly i typografia
 * 02. Walka: panele, log i podstawowy interfejs
 * 03. Kosci: wariant plaski, 3D i efekty
 * 04. Run: tooltipy, stos kart i nagrody po walce
 * 05. Shell: menu glowne, logowanie i wspolne ekrany
 * 06. Wyniki: lup, zwyciestwo i porazka
 * 07. Relikwiarz: laczenie krysztalow i Otchlan
 * 08. Efekty globalne: kursor, przejscia, wstrzas i debug
 * 09. Wybor klasy
 * 10. Menu postaci
 * 11. Zunifikowane przyciski i czasteczki
 *
 * Kolejnosc sekcji jest czescia kaskady CSS. Nie przenos reguly pomiedzy
 * sekcjami bez sprawdzenia selektorow, ktore moga byc przez nia nadpisywane.
 */


/* === 01. FUNDAMENTY ======================================================== */

/* --- 01.1 Lokalne fonty gry ---
   MedievalSharp: tytuły, klasy, przyciski, nagłówki.
   Cinzel: opisy, tooltipy, lore i dłuższe teksty.
   Oba fonty z przesłanej paczki obsługują polskie znaki. */
@font-face { font-family: "MedievalSharp"; src: url("../fonts/MedievalSharp-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "MedievalSharp"; src: url("../fonts/MedievalSharp-Regular.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "MedievalSharp"; src: url("../fonts/MedievalSharp-Regular.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: swap; }

@font-face {
    font-family: "Cinzel";
    src: url("../fonts/Cinzel-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "EB Garamond";
    src: url("../fonts/EB_Garamond/EBGaramond-VariableFont_wght.ttf") format("truetype");
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

/* --- 01.2 Podstawy globalne --- */
:root {
    --game-logical-width: 1920px;
    --game-logical-height: 960px;
    --game-scale: 1;
    --game-offset-x: 0px;
    --game-offset-y: 0px;
    --color-gold: #c5a059;
    --color-text: #e0e0e0;
    --font-title: "MedievalSharp", "Cinzel", serif;
    --font-body: "Cinzel", serif;
    --screen-shake-x: 0px;
    --screen-shake-y: 0px;
    --screen-shake-rot: 0deg;

    /* CARD THEME START — kompletny wyglad wszystkich rodzajow kart; edytuj tylko ten blok. */

    /* 1. KARTA SKILLA. */
    /* Glowne ustawienia, grafiki, warstwy i pole tekstowe. */
    --skill-card-width: 256px;
    --skill-card-height: 352px;
    --skill-card-font-family: "EB Garamond", "Cinzel", serif;
    --skill-card-front-image: url("../image/cards/run/skill_awers.png");
    --skill-card-front-plus-image: url("../image/cards/run/skill_awers_plus.png");
    --skill-card-back-image: url("../image/cards/run/run_rewers.png");
    --skill-card-face-x: 92px;
    --skill-card-face-y: 70px;
    --skill-card-face-size: 72px;
    --skill-card-face-atlas-width: 432px;
    --skill-card-face-z: 0;
    --skill-card-frame-z: 1;
    --skill-card-copy-z: 2;
    --skill-card-copy-x: 34px;
    --skill-card-copy-bottom: 58px;
    --skill-card-copy-height: 128px;
    --skill-card-copy-gap: 0px;

    /* Rodzaj skilla — pierwsza linia od gory. */
    --skill-card-type-color: #3b0e08;
    --skill-card-type-size: 18px;
    --skill-card-type-line: 1;
    --skill-card-type-weight: 800;
    --skill-card-upgrade-size: 14px;

    /* Tytul skilla — druga linia. */
    --skill-card-type-title-gap: -6px;
    --skill-card-title-color: #0e0906;
    --skill-card-title-size: 20px;
    --skill-card-title-line: 2;
    --skill-card-title-weight: 700;

    /* Opis skilla — trzecia linia. */
    --skill-card-description-color: #140d08;
    --skill-card-description-size: 18px;
    --skill-card-description-line: 1.2;
    --skill-card-description-weight: 700;
    --skill-card-emphasis-color: #490b06;
    --skill-card-emphasis-weight: 800;

    /* Ogolne ustawienia tekstu oraz bocznego panelu efektow. */
    --skill-card-base-color: #0c0805;
    --skill-card-text-shadow: 0px 0px 3px rgb(196, 181, 153);
    --skill-card-effects-font-family: "EB Garamond", "Cinzel", serif;
    --skill-card-effects-color: #141313;
    --skill-card-effects-size: 13px;
    --skill-card-effects-weight: 800;
    --skill-card-effects-emphasis-color: #490b06;
    --skill-card-effects-shadow: 0px 0px 3px rgb(196, 181, 153);


    /* 2. KARTA ODRZUCENIA KOSCI. */
    /* Glowne ustawienia, grafiki, ikona i pole tekstowe. */
    --discard-card-width: 256px;
    --discard-card-height: 384px;
    --discard-card-back-height: 352px;
    --discard-card-font-family: "EB Garamond", "Cinzel", serif;
    --discard-card-front-image: url("../image/cards/run/run_awers.png");
    --discard-card-back-image: url("../image/cards/run/run_rewers.png");
    --discard-card-icon-top: 28px;
    --discard-card-icon-size: 128px;
    --discard-card-icon-image: url("../image/dice/player/dice_icon.png");
    --discard-card-icon-atlas-width: 1536px;
    --discard-card-icon-atlas-height: 384px;
    --discard-card-copy-x: 34px;
    --discard-card-copy-bottom: 80px;
    --discard-card-copy-height: 152px;
    --discard-card-copy-gap: 1px;

    /* Rodzaj daru — pierwsza linia od gory. */
    --discard-card-type-color: #3d100a;
    --discard-card-type-size: 20px;
    --discard-card-type-line: 1;
    --discard-card-type-weight: 800;

    /* Tytul daru — druga linia. */
    --discard-card-type-title-gap: -5px;
    --discard-card-title-color: #0e0906;
    --discard-card-title-size: 21px;
    --discard-card-title-line: 2;
    --discard-card-title-weight: 700;

    /* Opis daru — trzecia linia. */
    --discard-card-description-color: #1a110b;
    --discard-card-description-size: 19px;
    --discard-card-description-line: 1.2;
    --discard-card-description-weight: 800;
    --discard-card-emphasis-color: #490b06;
    --discard-card-emphasis-weight: 800;

    /* Ogolne ustawienia tekstu. */
    --discard-card-base-color: #0c0805;
    --discard-card-text-shadow: 0px 0px 3px rgb(196, 181, 153);

    /* 3. KARTA RUNU. */
    /* Glowne ustawienia, grafiki i uklad pola tekstowego. */
    --run-card-width: 256px;
    --run-card-height: 384px;
    --run-card-back-height: 352px;
    --run-card-font-family: "EB Garamond", "Cinzel", serif;
    --run-card-front-image: url("../image/cards/run/run_awers.png");
    --run-card-back-image: url("../image/cards/run/run_rewers.png");
    --run-card-category-image: url("../image/ui/run_card_icon.png");
    --run-card-category-size: 44px;
    --run-card-category-bottom: 6px;
    --run-card-name-x: 34px;
    --run-card-name-top: 34px;
    --run-card-name-min-height: 44px;
    --run-card-body-x: 34px;
    --run-card-body-top: 76px;
    --run-card-body-bottom: 70px;
    --run-card-body-gap: 6px;
    --run-card-section-gap: 2px;
    --run-card-pile-scale: .70;
    --run-card-preview-scale: 1;

    /* Nazwa karty — pierwsza linia od gory. */
    --run-card-name-color: #4d1007;
    --run-card-name-size: 21px;
    --run-card-name-line: 1;
    --run-card-name-weight: 800;

    /* Tytuly sekcji „Bonus” i „Oslabienie”. */
    --run-card-title-color: #0a0604;
    --run-card-title-size: 20px;
    --run-card-title-line: 1.15;
    --run-card-title-weight: 700;

    /* Opisy bonusu i oslabienia. */
    --run-card-description-color: #140d08;
    --run-card-description-size: 18px;
    --run-card-description-line: 1.2;
    --run-card-description-weight: 700;

    /* Ogolne ustawienia tekstu. */
    --run-card-base-color: #0c0805;
    --run-card-text-shadow: 0px 0px 3px rgb(196, 181, 153);
    /* CARD THEME END */

    /* Ekran odbioru nagrod po runie: pozycje liczone wzgledem okna reward_victory_window 960x640. */
    --victory-window-w: 960px;
    --victory-title-top: 142px;
    --victory-title-w: 640px;
    --victory-title-label-size: 14px;
    --victory-title-label-line: 12px;
    --victory-title-main-size: 18px;
    --victory-title-main-gap: 6px;
    --victory-subtitle-top: 178px;
    --victory-subtitle-w: 700px;
    --victory-subtitle-size: 14px;
    --victory-relics-top: 204px;
    --victory-relics-w: 760px;
    --victory-relic-icon-w: 84px;
    --victory-relic-icon-h: 168px;
    --victory-relic-card-w: 104px;
    --victory-relic-card-h: 206px;
    --victory-relic-gap-x: 24px;
    --victory-relic-gap-y: 14px;
    --victory-stats-x: 468px;
    --victory-stats-y: 522px;
    --victory-stats-w: 440px;
    --victory-stats-gap: 42px;
    --victory-stat-label-size: 12px;
    --victory-stat-value-size: 16px;
    --victory-button-bottom: -64px;
    --victory-button-font-size: 14px;

    /* Kości WebGL: logiczny bok bryły i klatka atlasu mają dokładnie 72x72. */
    --dice-roll-size: 72px;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--color-text);
    margin: 0;
    overflow: hidden;
    height: 100vh;
    width: 100vw;
    font-family: var(--font-body);
    background: #030303;
}

/* Pierwsza widoczna klatka ma gotowe fonty i dotychczasową skalę viewportu. */
body.content-loading #game-viewport-host,
body.content-loading #fps-counter {
    visibility: hidden;
    opacity: 0;
}

/* This cover needs no downloaded image or custom font to appear. */
body.content-loading #screen-transition-layer,
body.assets-loading:not(.screen-transitioning) #screen-transition-layer {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transition: none;
}

#content-fatal-error button,
#asset-loading-status button {
    padding: 12px 26px;
    color: #e8d7b5;
    border: 1px solid #96713c;
    background: #21180f;
    font: inherit;
    cursor: pointer;
}
#asset-loading-status button[hidden] { display: none; }
body.assets-loading #game-viewport-host * { animation-play-state: paused !important; }

body.content-load-failed #game-viewport-host,
body.content-load-failed #fps-counter,
body.content-load-failed #screen-transition-layer {
    display: none !important;
}

#content-fatal-error,
#asset-loading-status {
    position: fixed;
    inset: 0;
    z-index: 2147483646;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 48px;
    color: #e8d7b5;
    background: #070606;
    font-family: var(--font-body);
    text-align: center;
    cursor: none !important;
}

#asset-loading-status { display: none; background: transparent; pointer-events: auto; }
body.content-loading #asset-loading-status,
body.assets-loading-notice #asset-loading-status { display: flex; }

#content-fatal-error h1,
.asset-loading-title {
    margin: 0;
    color: #d4ad67;
    font: 700 38px/1.15 var(--font-title);
}

#content-fatal-error p,
#asset-loading-status p {
    max-width: 760px;
    margin: 0;
    font-size: 17px;
    line-height: 1.5;
}

#content-fatal-error pre {
    width: 90%;
    max-width: 920px;
    max-height: 38%;
    margin: 0;
    padding: 18px 22px;
    overflow: auto;
    border: 1px solid rgba(197, 160, 89, .35);
    color: #d7c8ad;
    background: #100d0d;
    font: 13px/1.5 Consolas, monospace;
    text-align: left;
    white-space: pre-wrap;
}

#game-viewport-host {
    position: fixed;
    inset: 0;
    overflow: hidden;
    background-color: #030303;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

#game-viewport-host::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .22);
    pointer-events: none;
}

#game-viewport-stage {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--game-logical-width);
    height: var(--game-logical-height);
    overflow: hidden;
    isolation: isolate;
    transform-origin: 0 0;
    transform: translate3d(var(--game-offset-x), var(--game-offset-y), 0) scale(var(--game-scale));
    z-index: 1;
    -webkit-user-select: none;
    user-select: none;
}

/* Pola tekstowe zachowują natywną edycję; reszta stage należy do interakcji gry. */
#game-viewport-stage img { -webkit-user-drag: none; }
#game-viewport-stage :is(input, textarea, select, [contenteditable]:not([contenteditable="false"]), [data-native-text-interaction]) {
    -webkit-user-select: text;
    user-select: text;
}

/* --- 01.4 Typografia semantyczna --- */
button,
.main-menu-title,
#status-text,
#skill-name,
#post-fight-title {
    font-family: var(--font-title);
}

p,
small,
#log-box,
#hint-text,
#skill-desc,
#post-fight-desc,
.hub-info-panel {
    font-family: var(--font-body);
}

#game-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#game-canvas {
    display: block;
}

#ui-layer {
    position: absolute;
    inset: 0;
    z-index: 10;
    pointer-events: none;
}

.ui-element {
    pointer-events: auto;
}

body.battle-active #game-container {
    display: block;
}

body.shell-active #game-container,
body.battle-active #shell-layer {
    display: none;
}