/* ==========================================================
   EVERYONE ASSEMBLE
   RPG SKILLS – USER CONTROL CENTER
   ========================================================== */

.eaucp-skills-page .eaucp-body{
    padding:25px;
}

/* ==========================================================
   HAUPTPANEL
   ========================================================== */

.rpgskills-panel{
    position:relative;
    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.86),
            rgba(4,25,43,.97)
        );
    border:1px solid var(--eaucp-line-soft);
    box-shadow:
        0 14px 28px rgba(0,0,0,.24),
        inset 0 1px 0 rgba(255,255,255,.025);
    overflow:hidden;
}

.rpgskills-panel::before{
    content:"";
    position:absolute;
    z-index:3;
    top:0;
    left:0;
    width:52px;
    height:2px;
    background:var(--eaucp-accent-light);
    box-shadow:
        52px 0 0 var(--eaucp-accent),
        104px 0 0 rgba(33,139,208,.38);
}

.rpgskills-panel::after{
    content:"";
    position:absolute;
    z-index:0;
    right:-60px;
    bottom:-60px;
    width:165px;
    height:165px;
    border:1px solid rgba(117,208,255,.05);
    transform:rotate(45deg);
    pointer-events:none;
}

.rpgskills-panel-head{
    position:relative;
    z-index:1;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:20px;
    padding:20px 22px;
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.14),
            transparent
        ),
        rgba(1,9,20,.28);
    border-bottom:1px solid var(--eaucp-line-soft);
}

.rpgskills-panel-head-copy{
    min-width:0;
}

.rpgskills-panel-code{
    display:block;
    margin-bottom:4px;
    color:var(--eaucp-muted);
    font-size:9px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:2px;
    text-transform:uppercase;
}

.rpgskills-panel-title{
    margin:0;
    color:var(--eaucp-text);
    font-size:15px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:1px;
    text-transform:uppercase;
}

.rpgskills-panel-status{
    flex-shrink:0;
    padding:7px 11px;
    color:var(--eaucp-accent-light);
    background:rgba(33,139,208,.09);
    border:1px solid var(--eaucp-line-soft);
    font-size:9px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:1.4px;
    text-transform:uppercase;
}

.rpgskills-panel-body{
    position:relative;
    z-index:1;
    padding:22px;
}

/* ==========================================================
   EINLEITUNG
   ========================================================== */

.rpgskills-intro{
    position:relative;
    margin-bottom:18px;
    padding:15px 17px 15px 52px;
    color:var(--eaucp-text-soft);
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.13),
            rgba(1,9,20,.34)
        );
    border:1px solid var(--eaucp-line-soft);
    font-size:10px;
    line-height:1.65;
}

.rpgskills-intro::before{
    content:"LVL";
    position:absolute;
    top:50%;
    left:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:25px;
    height:25px;
    color:var(--eaucp-accent-light);
    background:var(--eaucp-bg-deep);
    border:1px solid var(--eaucp-accent);
    font-size:7px;
    font-weight:800;
    letter-spacing:.5px;
    transform:translateY(-50%) rotate(45deg);
}

.rpgskills-intro::after{
    content:"LVL";
    position:absolute;
    top:50%;
    left:14px;
    display:flex;
    justify-content:center;
    align-items:center;
    width:25px;
    height:25px;
    color:var(--eaucp-accent-light);
    font-size:7px;
    font-weight:800;
    letter-spacing:.5px;
    transform:translateY(-50%);
}

/* ==========================================================
   SKILL-KATEGORIEN
   ========================================================== */

.rpgskills-types{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    align-items:start;
    gap:15px;
}

.rpgskills-type-card{
    position:relative;
    min-width:0;
    background:
        linear-gradient(
            145deg,
            rgba(1,9,20,.48),
            rgba(8,43,69,.42)
        );
    border:1px solid rgba(29,95,143,.24);
    overflow:hidden;
}

.rpgskills-type-card::before{
    content:"";
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    width:38px;
    height:2px;
    background:var(--eaucp-accent-light);
    box-shadow:38px 0 0 var(--eaucp-accent);
}

.rpgskills-type-head{
    position:relative;
    padding:15px 17px 13px 48px;
    color:var(--eaucp-text);
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.12),
            rgba(1,9,20,.22)
        );
    border-bottom:1px solid var(--eaucp-line-soft);
    font-size:12px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.rpgskills-type-head::before{
    content:"";
    position:absolute;
    top:50%;
    left:19px;
    width:11px;
    height:11px;
    background:var(--eaucp-accent-light);
    border:2px solid var(--eaucp-bg-deep);
    box-shadow:
        0 0 0 1px var(--eaucp-accent),
        0 0 10px rgba(117,208,255,.55);
    transform:translateY(-50%) rotate(45deg);
}

.rpgskills-type-table{
    width:100%;
    border:0;
    border-collapse:collapse;
    border-spacing:0;
}

.rpgskills-type-table td{
    padding:12px 5px;
    color:var(--eaucp-text-soft);
    background:rgba(2,13,24,.28);
    border:0;
    border-bottom:1px solid rgba(29,95,143,.17);
    font-size:10px;
    line-height:1.5;
    vertical-align:middle;
}

.rpgskills-type-table tr:last-child td{
    border-bottom:0;
}

.rpgskills-type-table tr:hover td{
    background:rgba(33,139,208,.07);
}

/* ==========================================================
   EINZELNE SKILLS
   ========================================================== */

.rpgskills-name{
    width:auto;
    padding-left:15px !important;
    color:var(--eaucp-text) !important;
    font-size:10px !important;
    font-weight:700;
    letter-spacing:.35px;
}

.rpgskills-level-point{
    width:19px;
    padding-right:2px !important;
    padding-left:2px !important;
    text-align:center;
}

.rpgskills-level-dot{
    display:inline-block;
    width:9px;
    height:9px;
    border-radius:50%;
    transform:rotate(45deg);
}

.rpgskills-level-point.is-active .rpgskills-level-dot{
    background:var(--eaucp-accent-light);
    border:1px solid var(--eaucp-accent-light);
    box-shadow:
        0 0 0 3px rgba(117,208,255,.08),
        0 0 9px rgba(117,208,255,.65);
}

.rpgskills-level-point.is-inactive .rpgskills-level-dot{
    background:transparent;
    border:1px solid rgba(143,169,188,.48);
    box-shadow:inset 0 0 4px rgba(0,0,0,.45);
}

.rpgskills-delete{
    width:34px;
    padding-right:12px !important;
    text-align:center;
}

.rpgskills-delete a,
.rpgskills-delete button,
.rpgskills-delete input{
    display:inline-flex;
    justify-content:center;
    align-items:center;
    min-width:24px;
    min-height:24px;
    margin:0;
    padding:4px 6px;
    color:#efb8c2;
    background:rgba(207,102,121,.08);
    border:1px solid rgba(207,102,121,.4);
    cursor:pointer;
    font-family:inherit;
    font-size:9px;
    line-height:1;
    text-decoration:none;
    transition:
        color .2s ease,
        background .2s ease,
        border-color .2s ease;
}

.rpgskills-delete a:hover,
.rpgskills-delete button:hover,
.rpgskills-delete input:hover{
    color:#ffffff;
    background:rgba(207,102,121,.28);
    border-color:rgba(207,102,121,.7);
}

/* ==========================================================
   SKILL HINZUFÜGEN
   ========================================================== */

.rpgskills-add{
    position:relative;
    margin-top:20px;
    background:
        linear-gradient(
            145deg,
            rgba(8,43,69,.72),
            rgba(1,9,20,.55)
        );
    border:1px solid var(--eaucp-line-soft);
    overflow:hidden;
}

.rpgskills-add::before{
    content:"";
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    width:45px;
    height:2px;
    background:var(--eaucp-accent-light);
    box-shadow:45px 0 0 var(--eaucp-accent);
}

.rpgskills-add-head{
    padding:16px 18px;
    color:var(--eaucp-text);
    background:
        linear-gradient(
            90deg,
            rgba(33,139,208,.12),
            transparent
        );
    border-bottom:1px solid var(--eaucp-line-soft);
    font-size:12px;
    font-weight:700;
    line-height:1.4;
    letter-spacing:.8px;
    text-transform:uppercase;
}

.rpgskills-add-body{
    padding:18px;
}

.rpgskills-add-grid{
    display:grid;
    grid-template-columns:minmax(0,1.5fr) minmax(150px,.75fr) minmax(150px,.75fr);
    gap:10px;
}

.rpgskills-add input[type="text"],
.rpgskills-add select{
    display:block;
    width:100%;
    max-width:none;
    min-height:40px;
    margin:0;
    padding:9px 11px;
    color:var(--eaucp-text);
    background:
        linear-gradient(
            145deg,
            rgba(1,9,20,.94),
            rgba(4,25,43,.94)
        );
    border:1px solid var(--eaucp-line);
    border-radius:0;
    outline:0;
    font-family:inherit;
    font-size:10px;
    line-height:1.5;
    box-shadow:inset 0 7px 15px rgba(0,0,0,.16);
    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}

.rpgskills-add input:focus,
.rpgskills-add select:focus{
    border-color:var(--eaucp-accent-light);
    box-shadow:
        inset 0 7px 15px rgba(0,0,0,.16),
        0 0 0 3px rgba(117,208,255,.08);
}

.rpgskills-add select option{
    color:var(--eaucp-text);
    background:var(--eaucp-bg-deep);
}

.rpgskills-secret{
    margin-top:11px;
    color:var(--eaucp-muted);
    font-size:9px;
    line-height:1.55;
}

.rpgskills-secret:empty{
    display:none;
}

.rpgskills-secret input[type="checkbox"]{
    width:16px;
    height:16px;
    margin:0 7px 0 0;
    accent-color:var(--eaucp-accent-light);
    vertical-align:middle;
    cursor:pointer;
}

.rpgskills-add-actions{
    display:flex;
    justify-content:flex-end;
    margin-top:14px;
}

.rpgskills-add-actions input[type="submit"]{
    min-width:185px;
}

/* ==========================================================
   USERCP-NAVIGATION
   ========================================================== */

.rpgskills-nav-row td{
    padding:0 !important;
}

.rpgskills-nav-link{
    position:relative;
    display:block;
    padding:9px 9px 9px 22px;
    color:var(--eaucp-text-soft,#c4d8e4);
    background:rgba(8,43,69,.28);
    border-bottom:1px solid rgba(29,95,143,.18);
    font-size:10px;
    line-height:1.5;
    text-decoration:none;
    transition:
        color .2s ease,
        padding-left .2s ease,
        background .2s ease;
}

.rpgskills-nav-link::before{
    content:"";
    position:absolute;
    top:50%;
    left:7px;
    width:6px;
    height:6px;
    background:transparent;
    border:1px solid var(--eaucp-accent,#218bd0);
    transform:translateY(-50%) rotate(45deg);
}

.rpgskills-nav-link:hover{
    padding-left:27px;
    color:var(--eaucp-accent-light,#75d0ff);
    background:rgba(33,139,208,.09);
}

.rpgskills-nav-link:hover::before{
    background:var(--eaucp-accent-light,#75d0ff);
    box-shadow:0 0 8px rgba(117,208,255,.65);
}

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

@media (max-width:850px){

    .rpgskills-types{
        grid-template-columns:1fr;
    }
}

@media (max-width:700px){

    .eaucp-skills-page .eaucp-body{
        padding:15px;
    }

    .rpgskills-panel-head{
        align-items:flex-start;
        flex-direction:column;
    }

    .rpgskills-panel-body{
        padding:15px;
    }

    .rpgskills-add-grid{
        grid-template-columns:1fr;
    }

    .rpgskills-add-actions{
        display:block;
    }

    .rpgskills-add-actions input[type="submit"]{
        width:100%;
        min-width:0;
    }
}

@media (max-width:480px){

    .rpgskills-type-table{
        min-width:480px;
    }

    .rpgskills-type-card{
        overflow-x:auto;
    }
}