@import url("https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@300;400;500;600;700&display=swap");

/* =========================================================
   VARIABILI
   ========================================================= */

:root {
    --background: #050607;
    --panel: #080b0d;
    --panel-light: #111517;
    --border: #3d4448;

    --red: #d12626;
    --dark-red: #650707;

    --weapons: #f0ad13;
    --movement: #7cb52e;
    --mental: #3298dc;
    --special: #934de0;
    --aim: #f2760f;
    --combat: #ed2929;

    --white: #eeeeee;
    --silver: #d6dadd;
    --bronze: #c27c42;
    --gold: #e5ba3c;
}

/* =========================================================
   RESET
   ========================================================= */

* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;
    padding: 30px;

    color: var(--white);
    font-family: "Oswald", Arial, sans-serif;

    background:
        linear-gradient(
            rgba(0, 0, 0, 0.62),
            rgba(0, 0, 0, 0.9)
        ),
        url("images/backgrounds/gears-background.webp")
        center center / cover fixed no-repeat;

    overflow-x: hidden;
}

button,
input,
select {
    font: inherit;
}

/* =========================================================
   CONTENITORE PRINCIPALE
   ========================================================= */

.app {
    width: min(1640px, 100%);
    min-height: calc(100vh - 60px);
    margin: 0 auto;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

/* =========================================================
   CARTA GIOCATORE
   ========================================================= */

.player-card {
    --tier-main: var(--silver);
    --tier-dark: #686f74;
    --tier-glow: rgba(215, 220, 224, 0.25);

    position: relative;

    width: 520px;
    height: 1030px;
    flex: 0 0 520px;

    padding: 12px;

    background:
        linear-gradient(
            155deg,
            rgba(24, 28, 30, 0.99),
            rgba(4, 6, 7, 0.99)
        );

    border: 2px solid var(--tier-main);

    clip-path: polygon(
        22px 0,
        calc(100% - 22px) 0,
        100% 22px,
        100% calc(100% - 22px),
        calc(100% - 22px) 100%,
        22px 100%,
        0 calc(100% - 22px),
        0 22px
    );

    box-shadow:
        0 28px 85px rgba(0, 0, 0, 0.9),
        0 0 34px var(--tier-glow);

    overflow: hidden;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.player-card::before {
    content: "";

    position: absolute;
    inset: 9px;
    z-index: 20;

    border: 2px solid var(--tier-main);

    clip-path: polygon(
        18px 0,
        calc(100% - 18px) 0,
        100% 18px,
        100% calc(100% - 18px),
        calc(100% - 18px) 100%,
        18px 100%,
        0 calc(100% - 18px),
        0 18px
    );

    pointer-events: none;
}

.player-card:hover {
    transform: translateY(-4px);

    box-shadow:
        0 32px 95px rgba(0, 0, 0, 0.94),
        0 0 46px var(--tier-glow);
}

/* =========================================================
   LIVELLO CARTA
   ========================================================= */

.player-card.tier-gold {
    --tier-main: var(--gold);
    --tier-dark: #85600e;
    --tier-glow: rgba(229, 186, 60, 0.42);
}

.player-card.tier-silver {
    --tier-main: var(--silver);
    --tier-dark: #686f74;
    --tier-glow: rgba(214, 218, 221, 0.3);
}

.player-card.tier-bronze {
    --tier-main: var(--bronze);
    --tier-dark: #70401f;
    --tier-glow: rgba(194, 124, 66, 0.36);
}

.player-card.tier-base {
    --tier-main: #9da2a5;
    --tier-dark: #454a4d;
    --tier-glow: rgba(160, 165, 168, 0.2);
}

/* =========================================================
   TESTATA CARTA
   ========================================================= */

.card-header {
    height: 76px;

    display: flex;
    justify-content: center;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--tier-dark) 18%,
            rgba(105, 10, 10, 0.96) 50%,
            var(--tier-dark) 82%,
            transparent
        );

    border-bottom: 2px solid var(--tier-main);
}

.card-header h1 {
    margin: 0;

    color: var(--tier-main);

    font-family: "Anton", Impact, sans-serif;
    font-size: 35px;
    font-weight: 400;
    letter-spacing: 2px;

    text-shadow:
        0 3px 0 #111111,
        0 0 12px var(--tier-glow);
}

/* =========================================================
   CONTENUTO CARTA
   ========================================================= */

.card-content {
    height: calc(100% - 76px);
    padding: 15px 17px 18px;

    display: flex;
    flex-direction: column;
}

/* =========================================================
   LOGO + OVERALL
   ========================================================= */

.player-top {
    height: 105px;

    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.game-logo {
    margin-top: 7px;

    display: flex;
    align-items: center;
    gap: 12px;

    color: var(--tier-main);

    font-family: "Anton", Impact, sans-serif;
    font-size: 30px;
    line-height: 0.82;
}

.game-logo img {
    width: 76px;
    height: 76px;

    object-fit: contain;

    border-radius: 0;

    filter:
        drop-shadow(0 0 10px var(--tier-glow));
}

.game-logo span {
    font-size: 19px;
}

.overall-box {
    display: flex;
    flex-direction: column;
    align-items: center;

    line-height: 0.92;
}

.overall-box strong {
    color: var(--tier-main);

    font-family: "Anton", Impact, sans-serif;
    font-size: 95px;
    font-weight: 400;
    letter-spacing: -3px;

    text-shadow:
        0 4px 0 #222222,
        0 0 14px var(--tier-glow);
}

.overall-box span {
    color: var(--tier-main);

    font-size: 22px;
    font-weight: 600;
    letter-spacing: 2px;
}

/* =========================================================
   FOTO
   ========================================================= */

.player-image {
    position: relative;

    height: 365px;
    flex: 0 0 365px;

    margin: 0 -1px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at center,
            rgba(100, 45, 15, 0.42),
            transparent 58%
        ),
        #07090a;
}

.player-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            to top,
            rgba(5, 7, 8, 0.98) 0%,
            transparent 35%
        );

    pointer-events: none;
}

.player-photo {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 20%;
}

.upload-photo-button {
    position: absolute;
    right: 16px;
    bottom: 18px;
    z-index: 5;

    width: 60px;
    height: 60px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #eeeeee;

    background: rgba(6, 8, 9, 0.93);

    border: 2px solid var(--red);
    border-radius: 50%;

    cursor: pointer;

    box-shadow:
        0 0 18px rgba(220, 30, 30, 0.46);

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.upload-photo-button:hover {
    transform: scale(1.08);
    filter: brightness(1.2);
}

.upload-photo-button span:last-child {
    display: none;
}

.plus-symbol {
    font-family: Arial, sans-serif;
    font-size: 40px;
    font-weight: 300;
    line-height: 1;
}

/* =========================================================
   IDENTITÀ
   ========================================================= */

.player-identity {
    position: relative;
    z-index: 3;

    margin-top: -8px;
}

.player-identity h2 {
    margin: 0;

    color: var(--tier-main);

    font-family: "Anton", Impact, sans-serif;
    font-size: 61px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 1px;

    text-shadow:
        0 4px 0 #202020,
        0 0 9px var(--tier-glow);
}

.player-info-line {
    margin-top: 6px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
}

.country {
    display: flex;
    align-items: center;
    gap: 9px;

    color: var(--tier-main);

    font-size: 22px;
    font-weight: 600;
    letter-spacing: 1px;
}

.flag {
    font-size: 27px;
    line-height: 1;
}

.player-age {
    color: var(--tier-main);

    font-size: 17px;
    letter-spacing: 1px;
}

.player-age strong {
    margin-left: 5px;

    color: var(--tier-main);

    font-size: 22px;
    font-weight: 500;
}

/* =========================================================
   PIATTAFORMA
   ========================================================= */

.gaming-account {
    margin-top: 8px;
    padding: 8px 10px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border: 1px solid var(--tier-dark);

    background: rgba(3, 5, 6, 0.82);
}

.platform-label {
    color: var(--tier-main);

    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
}

.gaming-account strong {
    color: var(--tier-main);

    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.7px;
}

/* =========================================================
   RIASSUNTO 6 CATEGORIE
   ========================================================= */

.category-summary {
    margin-top: 9px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid var(--border);
    border-left: 1px solid var(--border);

    background: rgba(3, 5, 6, 0.8);
}

.summary-item {
    min-height: 77px;
    padding: 6px 3px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.summary-item > img {
    display: none;
}

.summary-item strong {
    font-family: "Anton", Impact, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}

.summary-item span {
    margin-top: 4px;

    color: #dddddd;

    font-size: 12px;
    letter-spacing: 0.45px;
}

/* =========================================================
   ICONE SVG TRASPARENTI
   ========================================================= */

.summary-item::before,
.category-title > div::before {
    content: "";

    display: block;
    flex: 0 0 auto;

    background-color: currentColor;

    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;

    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;

    filter:
        drop-shadow(0 0 5px currentColor);
}

.summary-item::before {
    width: 28px;
    height: 28px;
    margin-bottom: 3px;
}

.category-title > div::before {
    width: 32px;
    height: 32px;
}

.summary-item.weapons,
.weapons-panel {
    color: var(--weapons);
}

.summary-item.movement,
.movement-panel {
    color: var(--movement);
}

.summary-item.mental,
.mental-panel {
    color: var(--mental);
}

.summary-item.special,
.special-panel {
    color: var(--special);
}

.summary-item.aim,
.aim-panel {
    color: var(--aim);
}

.summary-item.combat,
.combat-panel {
    color: var(--combat);
}

/* ARMI */

.summary-item.weapons::before,
.weapons-panel .category-title > div::before {
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M7 22h34l8 7h8v8H43l-8 7H22l-4-5H7V22zm8 6v5h19l5-5H15zm28 3-3 3h11v-3h-8zM19 39h10l-5 15h-9l4-15z'/%3E%3C/svg%3E");

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M7 22h34l8 7h8v8H43l-8 7H22l-4-5H7V22zm8 6v5h19l5-5H15zm28 3-3 3h11v-3h-8zM19 39h10l-5 15h-9l4-15z'/%3E%3C/svg%3E");
}

/* MOVIMENTO */

.summary-item.movement::before,
.movement-panel .category-title > div::before {
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='37' cy='10' r='7' fill='black'/%3E%3Cpath fill='black' d='M28 19l12 3 8 10-6 5-7-8-4 10 9 8-5 7-13-12 4-13-8 6-9-2 2-7 8 1 9-8zM22 42l-7 14H7l9-19 6 5z'/%3E%3C/svg%3E");

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='37' cy='10' r='7' fill='black'/%3E%3Cpath fill='black' d='M28 19l12 3 8 10-6 5-7-8-4 10 9 8-5 7-13-12 4-13-8 6-9-2 2-7 8 1 9-8zM22 42l-7 14H7l9-19 6 5z'/%3E%3C/svg%3E");
}

/* CERVELLO */

.summary-item.mental::before,
.mental-panel .category-title > div::before {
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M25 8c-7 0-12 5-12 12-5 2-8 7-8 13 0 7 5 13 12 14 2 6 7 9 13 9V8h-5zm14 0h-5v48c6 0 11-3 13-9 7-1 12-7 12-14 0-6-3-11-8-13 0-7-5-12-12-12zM18 23c4 0 7 3 7 7h-5c0-2-1-3-3-3v-4h1zm27 0h2v4c-2 0-3 1-3 3h-5c0-4 3-7 6-7zM17 36h8v5h-8v-5zm22 0h8v5h-8v-5z'/%3E%3C/svg%3E");

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M25 8c-7 0-12 5-12 12-5 2-8 7-8 13 0 7 5 13 12 14 2 6 7 9 13 9V8h-5zm14 0h-5v48c6 0 11-3 13-9 7-1 12-7 12-14 0-6-3-11-8-13 0-7-5-12-12-12zM18 23c4 0 7 3 7 7h-5c0-2-1-3-3-3v-4h1zm27 0h2v4c-2 0-3 1-3 3h-5c0-4 3-7 6-7zM17 36h8v5h-8v-5zm22 0h8v5h-8v-5z'/%3E%3C/svg%3E");
}

/* FUORI CLASSE */

.summary-item.special::before,
.special-panel .category-title > div::before {
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 4l8 18 20 2-15 13 5 20-18-10-18 10 5-20L4 24l20-2 8-18z'/%3E%3C/svg%3E");

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M32 4l8 18 20 2-15 13 5 20-18-10-18 10 5-20L4 24l20-2 8-18z'/%3E%3C/svg%3E");
}

/* MIRA */

.summary-item.aim::before,
.aim-panel .category-title > div::before {
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M29 3h6v9c9 1 16 8 17 17h9v6h-9c-1 9-8 16-17 17v9h-6v-9c-9-1-16-8-17-17H3v-6h9c1-9 8-16 17-17V3zm3 15c-8 0-14 6-14 14s6 14 14 14 14-6 14-14-6-14-14-14zm0 8a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E");

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M29 3h6v9c9 1 16 8 17 17h9v6h-9c-1 9-8 16-17 17v9h-6v-9c-9-1-16-8-17-17H3v-6h9c1-9 8-16 17-17V3zm3 15c-8 0-14 6-14 14s6 14 14 14 14-6 14-14-6-14-14-14zm0 8a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E");
}

/* COMBATTIMENTO */

.summary-item.combat::before,
.combat-panel .category-title > div::before {
    mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M9 6l18 18-6 6L3 12V6h6zm46 0h6v6L43 30l-6-6L55 6zM29 26l6 6-8 8 6 6-6 6-6-6-8 8-5-5 8-8-6-6 6-6 6 6 7-9zm6 12l6-6 7 7 8-8 5 5-8 8 6 6-6 6-6-6-7 7-6-6 7-7-6-6z'/%3E%3C/svg%3E");

    -webkit-mask-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='black' d='M9 6l18 18-6 6L3 12V6h6zm46 0h6v6L43 30l-6-6L55 6zM29 26l6 6-8 8 6 6-6 6-6-6-8 8-5-5 8-8-6-6 6-6 6 6 7-9zm6 12l6-6 7 7 8-8 5 5-8 8 6 6-6 6-6-6-7 7-6-6 7-7-6-6z'/%3E%3C/svg%3E");
}

/* =========================================================
   STILE E RUOLO
   ========================================================= */

.calculated-section {
    min-height: 58px;
    padding: 6px 9px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    text-align: center;

    border: 1px solid var(--tier-dark);
    border-top: 0;

    background: rgba(5, 7, 8, 0.85);
}

.section-label {
    color: var(--tier-main);

    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
}

.calculated-section strong {
    color: var(--tier-main);

    font-size: 21px;
    font-weight: 500;
    letter-spacing: 1.5px;
}

.role-section {
    min-height: 69px;

    flex-direction: row;
    gap: 16px;
}

.role-section img {
    width: 58px;
    height: 58px;

    object-fit: contain;

    border-radius: 0;

    filter:
        drop-shadow(0 0 8px var(--tier-glow));
}

.role-section div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.role-section strong {
    font-size: 25px;
}

/* =========================================================
   FOOTER
   ========================================================= */

.card-footer {
    min-height: 66px;

    display: grid;
    grid-template-columns: 1fr 1fr;

    border: 1px solid var(--tier-dark);
    border-top: 0;

    background: rgba(5, 7, 8, 0.86);
}

.card-footer > div {
    padding: 6px;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.card-footer > div:first-child {
    border-right: 1px solid var(--tier-dark);
}

.card-footer span {
    color: var(--tier-main);

    font-size: 13px;
    letter-spacing: 0.6px;
}

.card-footer strong {
    color: var(--tier-main);

    font-size: 26px;
    font-weight: 400;
}

/* =========================================================
   PULSANTI
   ========================================================= */

.card-actions {
    margin-top: auto;

    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.card-actions button {
    padding: 12px 9px;

    color: #ffffff;

    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.open-details-button {
    border: 1px solid var(--tier-main);
bottom: 12px !important;
overflow: visible !important;
    background:
        linear-gradient(
            var(--tier-dark),
            #550404
        );
}

.edit-card-button {
    border: 1px solid #777777;

    background:
        linear-gradient(
            #373c3f,
            #17191a
        );
}

.card-actions button:hover {
    transform: translateY(-2px);
    filter: brightness(1.2);
}

/* =========================================================
   PANNELLO DETTAGLI
   ========================================================= */

.details-panel {
    position: relative;

    width: 0;
    max-width: 0;
    height: 1030px;
    padding: 0;

    opacity: 0;
    visibility: hidden;
    overflow: hidden;

    background:
        linear-gradient(
            155deg,
            rgba(16, 20, 22, 0.99),
            rgba(3, 5, 6, 0.99)
        );

    border: 1px solid #42494d;

    clip-path: polygon(
        16px 0,
        calc(100% - 16px) 0,
        100% 16px,
        100% calc(100% - 16px),
        calc(100% - 16px) 100%,
        16px 100%,
        0 calc(100% - 16px),
        0 16px
    );

    box-shadow:
        0 28px 85px rgba(0, 0, 0, 0.9),
        0 0 28px rgba(160, 15, 15, 0.12);

    transform: translateX(-25px);

    transition:
        width 0.55s ease,
        max-width 0.55s ease,
        padding 0.55s ease,
        opacity 0.35s ease,
        transform 0.55s ease,
        visibility 0.55s;
}

.app.details-open .details-panel {
    width: 1060px;
    max-width: 1060px;
    padding: 14px;

    opacity: 1;
    visibility: visible;

    transform: translateX(0);
}

.details-panel::before {
    content: "";

    position: absolute;
    inset: 9px;

    border: 1px solid rgba(105, 114, 118, 0.48);

    pointer-events: none;
}

/* =========================================================
   HEADER DETTAGLI
   ========================================================= */

.details-header {
    height: 64px;

    display: flex;
    justify-content: center;
    align-items: center;

    border-bottom: 2px solid rgba(200, 25, 25, 0.68);
}

.details-header h2 {
    margin: 0;

    color: var(--red);

    font-family: "Anton", Impact, sans-serif;
    font-size: 33px;
    font-weight: 400;
    letter-spacing: 2px;
}

.close-details-button {
    position: absolute;
    top: 18px;
    right: 21px;
    z-index: 20;

    width: 37px;
    height: 37px;

    display: flex;
    justify-content: center;
    align-items: center;

    color: #dddddd;

    font-family: Arial, sans-serif;
    font-size: 28px;

    background: rgba(12, 15, 16, 0.97);

    border: 1px solid #666666;
    border-radius: 50%;

    cursor: pointer;
}

.close-details-button:hover {
    color: #ffffff;
    border-color: var(--red);
}

/* =========================================================
   GRIGLIA DETTAGLI
   ========================================================= */

.stats-grid {
    height: calc(100% - 220px);
    margin-top: 11px;

    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.stat-category {
    position: relative;

    min-width: 0;
    padding: 10px 13px 8px;

    background:
        linear-gradient(
            145deg,
            rgba(15, 18, 19, 0.96),
            rgba(4, 6, 7, 0.99)
        );

    border: 1px solid currentColor;

    clip-path: polygon(
        10px 0,
        calc(100% - 10px) 0,
        100% 10px,
        100% calc(100% - 10px),
        calc(100% - 10px) 100%,
        10px 100%,
        0 calc(100% - 10px),
        0 10px
    );

    overflow: hidden;
}

.stat-category::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            120deg,
            currentColor,
            transparent 36%
        );

    opacity: 0.055;

    pointer-events: none;
}

/* =========================================================
   TITOLI CATEGORIE
   ========================================================= */

.category-title {
    min-height: 50px;

    display: flex;
    justify-content: space-between;
    align-items: center;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.17);
}

.category-title > div {
    display: flex;
    align-items: center;
    gap: 9px;
}

.category-title img {
    display: none;
}

.category-title h3 {
    margin: 0;

    font-family: "Anton", Impact, sans-serif;
    font-size: 26px;
    font-weight: 400;
    letter-spacing: 1px;
}

.category-title > strong {
    font-family: "Anton", Impact, sans-serif;
    font-size: 30px;
    font-weight: 400;
}

/* =========================================================
   VOCI STATISTICHE
   ========================================================= */

.stats-list {
    height: calc(100% - 50px);

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}

.stats-list label {
    min-height: 34px;
    padding: 4px 1px;

    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.09);
}

.stats-list label:last-child {
    border-bottom: 0;
}

.stats-list span {
    min-width: 0;

    color: #dddddd;

    font-size: 17px;
    letter-spacing: 0.3px;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stats-list input {
    width: 52px;
    height: 30px;
    padding: 2px 4px;

    flex: 0 0 52px;

    color: currentColor;

    font-size: 18px;
    font-weight: 700;
    text-align: center;

    background: rgba(0, 0, 0, 0.53);

    border: 1px solid currentColor;
    outline: none;
}

.stats-list input:focus {
    box-shadow:
        0 0 8px currentColor;
}

.stats-list input::-webkit-inner-spin-button,
.stats-list input::-webkit-outer-spin-button {
    margin: 0;
    appearance: none;
}

/* =========================================================
   ANALISI COMPLETA DEL GIOCATORE - COMPATTA
   ========================================================= */

.player-analysis {
    height: auto;
    min-height: 118px;
    margin: 8px 0 0;
    padding: 10px 14px;

    display: grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 12px;

    border: 1px solid var(--border);
    border-left: 3px solid #f1c338;

    background:
        linear-gradient(
            115deg,
            rgba(241, 195, 56, 0.08),
            transparent 42%
        ),
        rgba(5, 7, 8, 0.9);
}

.player-analysis-icon {
    width: 36px;
    height: 36px;

    display: grid;
    place-items: center;

    color: #f1c338;
    font-size: 19px;

    border: 1px solid #f1c338;
    transform: rotate(45deg);

    box-shadow:
        0 0 12px rgba(241, 195, 56, 0.18);
}

.player-analysis-content {
    min-width: 0;
}

.player-analysis-label {
    display: block;

    margin: 0 0 2px;

    color: #f1c338 !important;

    font-size: 16px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 1.2px;
}

.player-analysis-content > strong {
    display: block;

    margin: 3px 0 4px;

    color: #f1c338 !important;

    font-family: "Anton", Impact, sans-serif;
    font-size: 27px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.8px;
}

#playerAnalysisText {
    display: block;

    margin: 0;

    color: #d2d4d5;

    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;

    overflow: visible;
}

.analysis-description {
    display: block;
}

.analysis-points-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;

    margin-top: 7px;
    padding-top: 7px;

    border-top:
        1px solid rgba(241, 195, 56, 0.32);
}

.analysis-points-block {
    display: block;
    min-width: 0;
}

.analysis-points-block + .analysis-points-block {
    padding-left: 10px;

    border-left:
        1px solid rgba(241, 195, 56, 0.22);
}

.analysis-points-title {
    display: block;

    margin: 0 0 2px !important;

    color: #f1c338 !important;

    font-family: inherit !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: 0.5px !important;
}

.analysis-points-value {
    display: block;

    color: #f2f2f2;

    font-size: 14px;
    line-height: 1.2;
}

@media (max-width: 560px) {
    .player-analysis {
        grid-template-columns: 1fr;
    }

    .analysis-points-grid {
        grid-template-columns: 1fr;
    }

    .analysis-points-block + .analysis-points-block {
        padding-left: 0;
        padding-top: 6px;
        border-left: 0;
    }
}

/* =========================================================
   EDITOR
   ========================================================= */

.editor-panel {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 100;

    width: min(700px, calc(100vw - 30px));
    padding: 25px;

    opacity: 0;
    visibility: hidden;

    transform:
        translate(-50%, -46%)
        scale(0.96);

    background:
        linear-gradient(
            160deg,
            #15191b,
            #050708
        );

    border: 2px solid var(--red);

    box-shadow:
        0 30px 110px rgba(0, 0, 0, 0.96),
        0 0 35px rgba(210, 20, 20, 0.3);

    transition:
        opacity 0.25s ease,
        transform 0.25s ease,
        visibility 0.25s ease;
}

.editor-panel.open {
    opacity: 1;
    visibility: visible;

    transform:
        translate(-50%, -50%)
        scale(1);
}

.editor-panel h2 {
    margin: 0 0 20px;

    color: var(--red);

    font-family: "Anton", Impact, sans-serif;
    font-size: 31px;
    font-weight: 400;
    letter-spacing: 2px;
}

.close-editor-button {
    position: absolute;
    top: 15px;
    right: 17px;

    width: 36px;
    height: 36px;

    color: #ffffff;

    font-family: Arial, sans-serif;
    font-size: 27px;

    background: #111111;

    border: 1px solid #666666;
    border-radius: 50%;

    cursor: pointer;
}

.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.editor-grid label {
    display: flex;
    flex-direction: column;
    gap: 5px;

    color: #cccccc;

    font-size: 16px;
}

.editor-grid input,
.editor-grid select {
    padding: 10px;

    color: #ffffff;

    background: #0b0e10;

    border: 1px solid #495055;
    outline: none;
}

.editor-grid input:focus,
.editor-grid select:focus {
    border-color: var(--red);
}

.save-editor-button {
    width: 100%;
    margin-top: 18px;
    padding: 12px;

    color: #ffffff;

    font-weight: 700;
    letter-spacing: 1px;

    background:
        linear-gradient(
            #c51d1d,
            #620606
        );

    border: 1px solid #ef3b3b;

    cursor: pointer;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1450px) {

    .app.details-open {
        flex-direction: column;
        align-items: center;
    }

    .app.details-open .details-panel {
        width: min(1060px, 100%);
        max-width: 100%;
    }
}

@media (max-width: 900px) {

    body {
        padding: 10px;
    }

    .player-card {
        width: min(520px, 100%);
        flex-basis: min(520px, 100%);
        height: auto;
        min-height: 1030px;
    }

    .details-panel {
        height: auto;
        min-height: 1030px;
    }

    .stats-grid {
        height: auto;

        grid-template-columns: 1fr;
        grid-template-rows: none;
    }

    .stat-category {
        min-height: 340px;
    }

    .editor-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {

    .card-header h1 {
        font-size: 27px;
    }

    .game-logo img {
        width: 58px;
        height: 58px;
    }

    .game-logo {
        font-size: 24px;
    }

    .overall-box strong {
        font-size: 76px;
    }

    .player-image {
        height: 315px;
        flex-basis: 315px;
    }

    .player-identity h2 {
        font-size: 50px;
    }

    .summary-item span {
        font-size: 10px;
    }

    .card-actions {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   CORREZIONE DEFINITIVA CARTA GIOCATORE
   ========================================================= */

/* Più spazio verticale per mostrare tutto */

.player-card {
    width: 520px;
    flex: 0 0 520px;
    height: 1120px;
}

.details-panel {
    height: 1120px;
}

/* Header interno organizzato senza sovrapposizioni */

.player-top {
    height: 112px;
    flex: 0 0 112px;
}

/* Overall leggermente più piccolo e completamente leggibile */

.overall-box {
    position: relative;
    z-index: 6;

    min-width: 105px;
    padding-top: 2px;
}

.overall-box strong {
    font-size: 84px;
    line-height: 0.88;
}

.overall-box span {
    margin-top: 8px;

    font-size: 20px;
    line-height: 1;
}

/* Foto grande, ma senza mangiare il resto della carta */

.player-image {
    height: 340px;
    flex: 0 0 340px;

    margin: 0 -1px;
}

/* Mostra meglio Marcus senza ingrandirlo eccessivamente */

.player-photo {
    object-fit: cover;
    object-position: center 18%;
}

/* Evita che nome e informazioni salgano sulla foto */

.player-identity {
    margin-top: 0;
    flex: 0 0 auto;
}

/* Nome un poco più compatto */

.player-identity h2 {
    font-size: 58px;
}

/* Categorie leggermente più compatte */

.summary-item {
    min-height: 73px;
}

/* Stile e ruolo completamente leggibili */

.calculated-section {
    min-height: 61px;
    flex: 0 0 61px;
}

.role-section {
    min-height: 79px;
    flex: 0 0 79px;
}

.role-section strong {
    font-size: 25px;
    line-height: 1.1;
}

/* Esperienza e stagione */

.card-footer {
    min-height: 70px;
    flex: 0 0 70px;
}

/* Pulsanti sempre visibili in fondo */

.card-actions {
    min-height: 51px;
    margin-top: 10px;
    flex: 0 0 51px;
}

/* Il contenuto usa realmente tutta l’altezza disponibile */

.card-content {
    height: calc(100% - 76px);

    display: flex;
    flex-direction: column;

    overflow: visible;
}

/* Pannello destro allineato alla carta */

.app.details-open .details-panel {
    width: 1060px;
    max-width: 1060px;
}

.stats-grid {
    height: calc(100% - 202px);
}

/* =========================================================
   CARTA ORO
   Overall 80–99
   ========================================================= */

.player-card.tier-gold {
    --tier-main: #f0c84b;
    --tier-dark: #80600f;
    --tier-glow: rgba(240, 200, 75, 0.48);

    border-color: #f0c84b;

    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.92),
        0 0 38px rgba(240, 200, 75, 0.48);
}

.player-card.tier-gold::before {
    border-color: #f0c84b;
}

.player-card.tier-gold .card-header {
    background:
        linear-gradient(
            90deg,
            transparent,
            #5f470b 18%,
            #9c761a 50%,
            #5f470b 82%,
            transparent
        );

    border-bottom-color: #f0c84b;
}

/* Tutte le scritte identificative diventano dorate */

.player-card.tier-gold .card-header h1,
.player-card.tier-gold .game-logo,
.player-card.tier-gold .overall-box strong,
.player-card.tier-gold .overall-box span,
.player-card.tier-gold .player-identity h2,
.player-card.tier-gold .country,
.player-card.tier-gold .player-age,
.player-card.tier-gold .player-age strong,
.player-card.tier-gold .platform-label,
.player-card.tier-gold .gaming-account strong,
.player-card.tier-gold .section-label,
.player-card.tier-gold .calculated-section strong,
.player-card.tier-gold .card-footer span,
.player-card.tier-gold .card-footer strong {
    color: #f0c84b;
}

/* Separazioni dorate */

.player-card.tier-gold .gaming-account,
.player-card.tier-gold .calculated-section,
.player-card.tier-gold .card-footer {
    border-color: #80600f;
}

/* =========================================================
   CARTA ARGENTO
   Overall 70–79
   ========================================================= */

.player-card.tier-silver {
    --tier-main: #d6dadd;
    --tier-dark: #686f74;
    --tier-glow: rgba(214, 218, 221, 0.34);
}

/* =========================================================
   CARTA BRONZO
   Overall 55–69
   ========================================================= */

.player-card.tier-bronze {
    --tier-main: #c68146;
    --tier-dark: #70401f;
    --tier-glow: rgba(198, 129, 70, 0.38);
}

/* Schermi più piccoli */

@media (max-width: 1450px) {

    .player-card {
        height: 1120px;
    }

    .app.details-open .details-panel {
        width: min(1060px, 100%);
        max-width: 100%;
    }
}
/* =========================================================
   COLORI AUTOMATICI DELLA CARTA
   ========================================================= */

/* ORO: Overall 80–99 */

.player-card.card-gold {
    --card-level: #f2c84b;
    --card-level-dark: #80600f;
    --card-level-glow: rgba(242, 200, 75, 0.48);

    border-color: var(--card-level);

    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.92),
        0 0 42px var(--card-level-glow);
}

.player-card.card-gold::before {
    border-color: var(--card-level);
}

.player-card.card-gold .card-header {
    background:
        linear-gradient(
            90deg,
            transparent,
            #5e460b 18%,
            #9d781b 50%,
            #5e460b 82%,
            transparent
        );

    border-bottom-color: var(--card-level);
}

/* ARGENTO: Overall 70–79 */

.player-card.card-silver {
    --card-level: #d7dadd;
    --card-level-dark: #686f74;
    --card-level-glow: rgba(215, 218, 221, 0.34);

    border-color: var(--card-level);

    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.92),
        0 0 35px var(--card-level-glow);
}

.player-card.card-silver::before {
    border-color: var(--card-level);
}

/* BRONZO: Overall 55–69 */

.player-card.card-bronze {
    --card-level: #c98347;
    --card-level-dark: #70401f;
    --card-level-glow: rgba(201, 131, 71, 0.4);

    border-color: var(--card-level);

    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.92),
        0 0 38px var(--card-level-glow);
}

.player-card.card-bronze::before {
    border-color: var(--card-level);
}

/* Base: Overall sotto 55 */

.player-card.card-base {
    --card-level: #92989b;
    --card-level-dark: #454a4d;
    --card-level-glow: rgba(146, 152, 155, 0.25);
}

/* Elementi che cambiano insieme al livello */

.player-card.card-gold .card-header h1,
.player-card.card-gold .game-logo,
.player-card.card-gold .overall-box strong,
.player-card.card-gold .overall-box span,
.player-card.card-gold .player-identity h2,
.player-card.card-gold .country,
.player-card.card-gold .player-age,
.player-card.card-gold .player-age strong,
.player-card.card-gold .platform-label,
.player-card.card-gold .gaming-account strong,
.player-card.card-gold .section-label,
.player-card.card-gold .calculated-section strong,
.player-card.card-gold .card-footer span,
.player-card.card-gold .card-footer strong {
    color: #f2c84b !important;
}

.player-card.card-silver .card-header h1,
.player-card.card-silver .game-logo,
.player-card.card-silver .overall-box strong,
.player-card.card-silver .overall-box span,
.player-card.card-silver .player-identity h2,
.player-card.card-silver .country,
.player-card.card-silver .player-age,
.player-card.card-silver .player-age strong,
.player-card.card-silver .platform-label,
.player-card.card-silver .gaming-account strong,
.player-card.card-silver .section-label,
.player-card.card-silver .calculated-section strong,
.player-card.card-silver .card-footer span,
.player-card.card-silver .card-footer strong {
    color: #d7dadd !important;
}

.player-card.card-bronze .card-header h1,
.player-card.card-bronze .game-logo,
.player-card.card-bronze .overall-box strong,
.player-card.card-bronze .overall-box span,
.player-card.card-bronze .player-identity h2,
.player-card.card-bronze .country,
.player-card.card-bronze .player-age,
.player-card.card-bronze .player-age strong,
.player-card.card-bronze .platform-label,
.player-card.card-bronze .gaming-account strong,
.player-card.card-bronze .section-label,
.player-card.card-bronze .calculated-section strong,
.player-card.card-bronze .card-footer span,
.player-card.card-bronze .card-footer strong {
    color: #c98347 !important;
}

/* Bordi interni dello stesso livello */

.player-card.card-gold .gaming-account,
.player-card.card-gold .calculated-section,
.player-card.card-gold .card-footer {
    border-color: #80600f;
}

.player-card.card-silver .gaming-account,
.player-card.card-silver .calculated-section,
.player-card.card-silver .card-footer {
    border-color: #686f74;
}

.player-card.card-bronze .gaming-account,
.player-card.card-bronze .calculated-section,
.player-card.card-bronze .card-footer {
    border-color: #70401f;
}
/* FIX PLAYER CARD MOBILE */

@media (max-width: 560px) {

    body {
        padding: 8px !important;
    }

    .app,
    .app.details-open {
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;

        flex-direction: column !important;
        align-items: center !important;

        overflow: visible !important;
    }

    .player-card {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;

        flex: 0 0 auto !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        margin: 0 auto !important;

        overflow: visible !important;
    }

    .card-content {
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    .details-panel,
    .app.details-open .details-panel {
        width: calc(100vw - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        padding: 10px !important;

        overflow: visible !important;
    }

    .stats-grid {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        grid-template-columns: 1fr !important;
        grid-template-rows: none !important;

        overflow: visible !important;
    }

    .stat-category {
        min-height: 340px !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* FIX PULSANTE APRI STATISTICHE */

@media (max-width: 560px) {

    .card-actions {
        width: 100% !important;

        min-height: auto !important;
        height: auto !important;

        margin-top: 14px !important;
        padding-bottom: 14px !important;

        flex: 0 0 auto !important;

        display: grid !important;
        grid-template-columns: 1fr !important;

        overflow: visible !important;
    }

    .card-actions button,
    .open-details-button {
        width: 100% !important;

        min-height: 52px !important;
        height: auto !important;

        padding: 13px 10px !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        line-height: 1.2 !important;
        white-space: normal !important;

        overflow: visible !important;
    }

    .card-content {
        padding-bottom: 20px !important;
    }

    .player-card {
        padding-bottom: 14px !important;
    }
}
/* FIX PULSANTI DESKTOP: APRI STATISTICHE + MODIFICA CARTA */

@media (min-width: 561px) {

    .card-actions {
        width: 100% !important;

        min-height: 64px !important;
        height: 64px !important;

        margin-top: 14px !important;

        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;

        flex: 0 0 64px !important;

        overflow: visible !important;
    }

    .card-actions button,
    .open-details-button,
    .edit-card-button {
        min-height: 56px !important;
        height: 56px !important;

        padding: 12px 10px !important;

        display: flex !important;
        justify-content: center !important;
        align-items: center !important;

        font-size: 15px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;

        overflow: visible !important;
    }

    .card-content {
        padding-bottom: 18px !important;
    }
}
/* FIX DEFINITIVO PULSANTI DESKTOP DOPO CARICAMENTO JS */

@media (min-width: 561px) {

    .player-card {
        height: 1200px !important;
        min-height: 1200px !important;
    }

    .details-panel {
        height: 1200px !important;
        min-height: 1200px !important;
    }

    .card-content {
        height: calc(100% - 76px) !important;
        padding-bottom: 18px !important;
    }

    .card-actions {
        width: 100% !important;
        min-height: 56px !important;
        height: 56px !important;
        flex: 0 0 56px !important;

        margin-top: 12px !important;

        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;

        overflow: visible !important;
    }

    .card-actions button {
        width: 100% !important;
        height: 56px !important;
        min-height: 56px !important;

        padding: 12px 9px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        color: #ffffff !important;
        font-size: 15px !important;
        line-height: 1.2 !important;
        white-space: nowrap !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* =========================================================
   EDITOR CARTA GIOCATORE V2
   ========================================================= */
body.modal-open { overflow: hidden; }

.card-editor-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    place-items: center;
    padding: 18px;
    background: rgba(0,0,0,.88);
    backdrop-filter: blur(8px);
}
.card-editor-modal.is-open { display: grid; }

.card-editor-dialog {
    width: min(920px, 96vw);
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    border: 1px solid #a56f12;
    background: linear-gradient(160deg, #10161a, #050708 65%);
    box-shadow: 0 0 45px rgba(229,186,60,.22);
    overflow: hidden;
}
.card-editor-header {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-bottom: 1px solid #54451d;
}
.card-editor-header h2 {
    margin: 0;
    color: var(--gold);
    font-family: Anton, Impact, sans-serif;
    font-weight: 400;
    letter-spacing: 1px;
}
.close-editor-button {
    position: absolute;
    right: 10px;
    top: 9px;
    width: 38px;
    height: 38px;
    border: 1px solid #5d6469;
    color: #fff;
    background: #15191c;
    font-size: 25px;
    cursor: pointer;
}
.editor-tabs {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3px;
    padding: 10px;
    border-bottom: 1px solid #30363a;
}
.editor-tab {
    padding: 11px 8px;
    border: 1px solid #555d62;
    color: #e6e6e6;
    background: #111517;
    font-weight: 700;
    cursor: pointer;
}
.editor-tab.is-active {
    border-color: #d79422;
    background: linear-gradient(#8f281e, #4b0b08);
    color: #fff;
}
.editor-tab[hidden] { display: none; }
.editor-body { min-height: 420px; overflow: auto; padding: 18px; }
.editor-pane { display: none; }
.editor-pane.is-active { display: block; }
.editor-grid {
    display: grid;
    grid-template-columns: 1fr 140px;
    gap: 14px;
}
.editor-grid label { display: grid; gap: 6px; color: #e3b83d; font-weight: 600; }
.editor-grid input {
    min-height: 42px;
    width: 100%;
    border: 1px solid #465057;
    color: #f3f3f3;
    background: #091014;
    padding: 8px 10px;
}
.editor-wide { grid-column: 1 / -1; }
.country-editor-row { display: grid; grid-template-columns: 70px 1fr; gap: 8px; }
.editor-photo-row { display: flex; align-items: center; gap: 18px; }
.editor-photo-row img {
    width: 150px;
    height: 92px;
    object-fit: cover;
    border: 1px solid #a66b16;
}
.editor-photo-row button {
    padding: 12px 20px;
    border: 1px solid #6c7378;
    color: #fff;
    background: #20262a;
    cursor: pointer;
}
.editor-permission-note, .editor-derived-note {
    margin: 18px 0 0;
    color: #aeb6bb;
    line-height: 1.5;
}
.editor-overall-box {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    margin-bottom: 16px;
    border: 1px solid #5d4a19;
    background: #080c0e;
}
.editor-overall-box span { color: #d9b33c; font-weight: 700; }
.editor-overall-box strong { color: #ffd13e; font: 44px Anton, sans-serif; }
.editor-overall-box small { color: #9da6ab; }
.card-stats-editor { display: grid; gap: 14px; }
.editor-stat-category {
    border: 1px solid #343c41;
    background: rgba(8,12,14,.86);
    padding: 12px;
}
.editor-stat-category h3 { margin: 0 0 10px; color: #e0b636; }
.editor-stat-category > div {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}
.editor-stat-category label {
    display: grid;
    grid-template-columns: 1fr 68px;
    align-items: center;
    gap: 8px;
    color: #cbd0d3;
}
.editor-stat-category input {
    width: 68px;
    padding: 7px;
    border: 1px solid #465057;
    color: #fff;
    background: #070b0d;
}
.derived-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.derived-info-grid article {
    padding: 16px;
    border: 1px solid #3b4449;
    background: #080c0e;
}
.derived-info-grid span { display: block; color: #aab2b7; }
.derived-info-grid strong { display: block; margin-top: 8px; color: #f0bd31; font-size: 22px; }
.editor-skills-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.editor-skills-preview > div {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    padding: 12px;
    border: 1px solid #333b40;
    background: #090d10;
}
.editor-skills-preview strong { color: #f5bf21; letter-spacing: 2px; }
.editor-skills-preview small { color: #9ea7ac; }
.live-card-preview { display: grid; place-items: center; }
.mini-live-card {
    width: min(390px, 100%);
    padding: 14px;
    border: 2px solid #dfb63a;
    background: #070a0c;
    box-shadow: 0 0 30px rgba(229,186,60,.18);
}
.mini-live-card header { display: flex; justify-content: space-between; align-items: flex-start; color: #e6ba35; }
.mini-live-card header strong { font: 52px Anton, sans-serif; line-height: .9; }
.mini-live-card header small { display: block; font: 12px Oswald, sans-serif; text-align: center; }
.mini-live-card > img { width: 100%; height: 220px; object-fit: cover; margin-top: 8px; }
.mini-live-card h3 { margin: 8px 0 0; color: #efc13c; font: 36px Anton, sans-serif; }
.mini-live-card p { display: flex; justify-content: space-between; margin: 2px 0 10px; color: #e8c24d; }
.mini-live-card > div { display: grid; grid-template-columns: repeat(3,1fr); border: 1px solid #343b3f; }
.mini-live-card > div b { padding: 8px 3px; text-align: center; border: 1px solid #343b3f; font-size: 22px; }
.mini-live-card > div small { display: block; color: #c8ccce; font-size: 9px; }
.mini-live-card h4 { margin: 12px 0 6px; color: #efbd31; text-align: center; font-size: 22px; }
.mini-live-card section { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; color: #f1bd26; font-size: 12px; }
.card-editor-footer {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid #30363a;
    background: #080b0d;
}
#editorStatus { color: #7fca66; }
#editorStatus.is-error { color: #ff6d68; }
.editor-cancel-button, .save-editor-button {
    min-width: 160px;
    padding: 12px 18px;
    cursor: pointer;
}
.editor-cancel-button { border: 1px solid #666e73; color: #fff; background: #202529; }
.save-editor-button { border: 1px solid #d66b31; color: #fff; background: linear-gradient(#a53226,#5f0c09); }
.save-editor-button:disabled { opacity: .55; cursor: wait; }
.signature-skill-item { display: flex; justify-content: space-between; gap: 10px; width: 100%; color: #efbd2e; }

@media (max-width: 700px) {
    .card-editor-modal { padding: 4px; }
    .card-editor-dialog { width: 100%; max-height: 98vh; }
    .editor-tabs { grid-template-columns: 1fr 1fr; }
    .editor-grid { grid-template-columns: 1fr; }
    .editor-wide { grid-column: auto; }
    .editor-stat-category > div { grid-template-columns: 1fr; }
    .derived-info-grid, .editor-skills-preview { grid-template-columns: 1fr; }
    .card-editor-footer { grid-template-columns: 1fr 1fr; }
    #editorStatus { grid-column: 1 / -1; }
    .editor-cancel-button, .save-editor-button { min-width: 0; }
}
.stats-list input:disabled {
    opacity: 1;
    cursor: default;
    pointer-events: none;
    user-select: none;
    color: currentColor;
    -webkit-text-fill-color: currentColor;
}
.upload-photo-button:disabled {
    opacity: 0.55;
    cursor: wait;
    pointer-events: none;
}
a.edit-card-button,
a.edit-card-button:link,
a.edit-card-button:visited,
a.edit-card-button:hover,
a.edit-card-button:active {
    color: #ffffff;
    text-decoration: none;
}
a.edit-card-button {
    display: flex;
    align-items: center;
    justify-content: center;
}
.page-navigation {
    position: fixed;
    top: 18px;
    left: 18px;
    z-index: 9999;

    display: flex;
    gap: 10px;
}

.page-navigation button,
.page-navigation a {
    min-height: 42px;
    padding: 0 16px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #6b7378;

    color: #ffffff;
    background: rgba(10, 14, 16, 0.95);

    font-family: "Oswald", Arial, sans-serif;
    font-weight: 700;
    text-decoration: none;

    cursor: pointer;

    box-shadow:
        0 0 12px rgba(0, 0, 0, 0.45);
}

.page-navigation button:hover,
.page-navigation a:hover {
    border-color: var(--gold);
    color: var(--gold);

    box-shadow:
        0 0 14px rgba(229, 186, 60, 0.28);
}

@media (max-width: 700px) {
    .page-navigation {
        top: 8px;
        left: 8px;
        right: 8px;

        position: fixed;
    }

    .page-navigation button,
    .page-navigation a {
        flex: 1;
        min-height: 38px;
        padding: 0 8px;
        font-size: 13px;
    }
}
/* COLORE DEFINITIVO ANALISI GIOCATORE */

#playerAnalysisTitle,
#playerAnalysisRole {
    color: #f1c338 !important;
}

#playerAnalysisBox {
    height: auto !important;
    min-height: 150px !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: start !important;
}

#playerAnalysisText {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
}
/* PIATTAFORMA SOPRA ETÀ NELLA CARTA */

.player-platform-age {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
}

.player-platform {
    color: var(--tier-main);

    font-size: 18px;
    line-height: 1;
    letter-spacing: 0.8px;
}

.player-platform strong {
    font-weight: 600;
}

.player-platform-age .player-age {
    line-height: 1;
}
.card-actions .delete-card-button {
    min-height: 46px;
    border: 1px solid #d6343f !important;

    background:
        linear-gradient(
            180deg,
            #b3222d 0%,
            #6e1018 100%
        ) !important;

    color: #ffffff !important;

    font-family: inherit;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;

    cursor: pointer;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        0 0 14px rgba(190, 28, 42, 0.25);

    transition:
        background 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.card-actions .delete-card-button:hover {
    background:
        linear-gradient(
            180deg,
            #d52e3b 0%,
            #8d1520 100%
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.16),
        0 0 20px rgba(220, 35, 50, 0.42);

    transform: translateY(-1px);
}

.card-actions .delete-card-button:disabled {
    opacity: 0.55;
    cursor: wait;
    transform: none;
}