/* ==========================================================
   MÜPHIK ROSTER
   ========================================================== */

:root{

    --bg:#050505;
    --panel:#101010;
    --panel2:#171717;

    --border:rgba(201,162,39,.20);

    --gold:#c9a227;
    --goldHover:#ddb33c;

    --text:#f2f2f2;
    --muted:#888;

}

/* ==========================================================
   PAGE
   ========================================================== */

.roster-page{

    width:100%;
    min-height:100vh;

    padding-top:120px;
    padding-left:50px;
    padding-right:50px;
    padding-bottom:60px;

}

.roster-header{

    text-align:center;
    margin-bottom:50px;

}

.roster-header h1{

    font-size:52px;
    color:var(--gold);

    letter-spacing:4px;
    margin-bottom:10px;

}

.roster-header p{

    color:#9b9b9b;
    font-size:18px;

}

/* ==========================================================
   2 COLUMN LAYOUT
   ========================================================== */

.roster-layout{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:35px;

    align-items:start;

}

/* ==========================================================
   LEFT PANEL
   ========================================================== */

.raid-side{

    background:rgba(255,255,255,.03);

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

    border-radius:18px;

    padding:35px;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 25px rgba(0,0,0,.35);

}

/* ==========================================================
   RIGHT PANEL
   ========================================================== */

.player-side{
    background:rgba(255,255,255,.03);

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

    border-radius:18px;

    padding:30px;

    position:sticky;
    top:110px;

    height:auto;
    min-height:calc(100vh - 150px);

    display:flex;
    flex-direction:column;

    backdrop-filter:blur(12px);

    box-shadow:
        0 0 25px rgba(0,0,0,.35);
}
/* ==========================================================
   TOOLBAR
   ========================================================== */

.player-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:25px;

}

.player-toolbar h2{

    color:var(--gold);

    font-size:24px;

}

#newPlayerBtn{

    background:var(--gold);

    color:#000;

    border:none;

    border-radius:8px;

    padding:12px 18px;

    cursor:pointer;

    font-weight:700;

    transition:.25s;

}

#newPlayerBtn:hover{

    background:var(--goldHover);

    transform:translateY(-2px);

}

/* ==========================================================
   PLAYER POOL
   ========================================================== */

.player-pool{
    flex:none;

    overflow:visible;

    display:flex;

    flex-direction:column;

    gap:15px;

    padding-right:0;
}

/* ==========================================================
   ROLE SECTION
   ========================================================== */

.role-section{

    margin-bottom:45px;

}

.role-section:last-child{

    margin-bottom:0;

}

.role-section h2{

    color:var(--gold);

    margin-bottom:18px;

    letter-spacing:2px;

    font-size:24px;

    border-left:4px solid var(--gold);

    padding-left:14px;

}

/* ==========================================================
   SLOT GRIDS
   ========================================================== */

.slot-grid{

    display:grid;

    gap:18px;

}

.tank-grid{

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

}

.healer-grid{

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

}

.reserve-grid{

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

}

.dps-grid{

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

}

/* ==========================================================
   RAID SLOT
   ========================================================== */

.raid-slot{

    height:120px;

    border:2px dashed rgba(201,162,39,.20);

    border-radius:14px;

    background:rgba(255,255,255,.02);

    display:flex;

    align-items:center;

    justify-content:center;

    text-align:center;

    color:#666;

    font-size:14px;

    transition:.25s;

    position:relative;

}

.raid-slot:hover{

    border-color:var(--gold);

    background:rgba(201,162,39,.05);

}

.reserve{

    border-color:rgba(100,100,100,.4);

}

/* ==========================================================
   SCROLLBAR
   ========================================================== */

.player-pool::-webkit-scrollbar{

    width:8px;

}

.player-pool::-webkit-scrollbar-track{

    background:#111;

}

.player-pool::-webkit-scrollbar-thumb{

    background:var(--gold);

    border-radius:20px;

}

/* ==========================================================
   PLAYER CARDS
   ========================================================== */

.player-card{
    width:100%;
    min-height:86px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.07),
            rgba(255,255,255,.02)
        );

    border:1px solid rgba(255,255,255,.08);
    border-left:5px solid var(--gold);

    border-radius:14px;

    padding:14px 16px;

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

    cursor:grab;
    user-select:none;

    position:relative;
    overflow:hidden;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

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

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(201,162,39,.14),
            transparent 42%
        );

    opacity:.75;
    pointer-events:none;
}

.player-card:hover{
    transform:translateY(-3px);
    border-color:rgba(201,162,39,.45);

    box-shadow:
        0 10px 25px rgba(0,0,0,.35),
        0 0 18px rgba(201,162,39,.12);
}

.player-card:active{
    cursor:grabbing;
    transform:scale(.98);
}

.player-card.dragging{
    opacity:.45;
    transform:scale(.96);
}

/* ==========================================================
   PLAYER CARD CONTENT
   ========================================================== */

.player-name-row{
    display:flex;
    align-items:center;
    gap:10px;

    position:relative;
    z-index:2;
}

.player-portrait{
    width:32px;
    height:32px;

    border-radius:8px;
    object-fit:cover;

    border:1px solid rgba(255,255,255,.15);

    flex-shrink:0;
}

.player-name-link{
    color:inherit;
    text-decoration:none;
}

.player-name-link:hover{
    color:var(--gold);
    text-decoration:underline;
}

.player-name{
    color:var(--text);
    font-size:17px;
    font-weight:800;

    letter-spacing:.4px;

    position:relative;
    z-index:2;
}

.player-mplus-badge{
    margin-left:auto;

    padding:3px 8px;
    border-radius:999px;

    background:rgba(212,175,55,.15);
    border:1px solid rgba(212,175,55,.4);

    color:var(--gold);
    font-size:12px;
    font-weight:800;

    position:relative;
    z-index:2;
    flex-shrink:0;
}

.player-meta{
    margin-top:6px;

    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;

    position:relative;
    z-index:2;
}

.player-class,
.player-role{
    font-size:12px;
    font-weight:700;

    padding:4px 8px;

    border-radius:999px;

    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.08);

    color:#cfcfcf;
}

.player-role{
    color:var(--gold);
}

/* ==========================================================
   PLAYER CARD DELETE BUTTON
   ========================================================== */

.delete-player{
    position:absolute;
    top:10px;
    right:10px;

    width:24px;
    height:24px;

    border:none;
    border-radius:50%;

    background:rgba(0,0,0,.45);
    color:#aaa;

    cursor:pointer;

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

    font-size:16px;
    line-height:1;

    z-index:5;

    transition:.25s;
}

.delete-player:hover{
    background:rgba(190,40,40,.85);
    color:#fff;
}

/* ==========================================================
   OCCUPIED RAID SLOT
   ========================================================== */

.raid-slot.occupied{
    border-style:solid;
    border-color:rgba(201,162,39,.38);

    background:
        linear-gradient(
            135deg,
            rgba(201,162,39,.08),
            rgba(255,255,255,.025)
        );

    align-items:stretch;
    justify-content:stretch;

    padding:0;
}

.raid-slot.occupied > span{
    display:none;
}

.raid-slot .player-card{
    height:100%;
    min-height:100%;

    border-radius:12px;
    border-top:none;
    border-right:none;
    border-bottom:none;

    box-shadow:none;
}

.raid-slot .player-card:hover{
    transform:none;

    box-shadow:
        inset 0 0 24px rgba(255,255,255,.03),
        0 0 18px rgba(201,162,39,.10);
}

/* ==========================================================
   DROP STATES
   ========================================================== */

.raid-slot.drag-over{
    border-color:var(--gold);

    background:
        radial-gradient(
            circle at center,
            rgba(201,162,39,.14),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset 0 0 30px rgba(201,162,39,.10),
        0 0 24px rgba(201,162,39,.18);
}

.player-pool.drag-over{
    background:rgba(201,162,39,.04);

    outline:1px dashed rgba(201,162,39,.35);
    outline-offset:-6px;

    border-radius:14px;
}

/* ==========================================================
   CLASS COLORS
   ========================================================== */

.player-card.warrior{
    border-left-color:#c79c6e;
}

.player-card.paladin{
    border-left-color:#f58cba;
}

.player-card.hunter{
    border-left-color:#abd473;
}

.player-card.rogue{
    border-left-color:#fff569;
}

.player-card.priest{
    border-left-color:#ffffff;
}

.player-card.death-knight{
    border-left-color:#c41f3b;
}

.player-card.shaman{
    border-left-color:#0070de;
}

.player-card.mage{
    border-left-color:#69ccf0;
}

.player-card.warlock{
    border-left-color:#9482c9;
}

.player-card.monk{
    border-left-color:#00ff96;
}

.player-card.druid{
    border-left-color:#ff7d0a;
}

.player-card.demon-hunter{
    border-left-color:#a330c9;
}

.player-card.evoker{
    border-left-color:#33937f;
}

/* ==========================================================
   CLASS GLOW ACCENTS
   ========================================================== */

.player-card.warrior::before{
    background:radial-gradient(circle at top right, rgba(199,156,110,.18), transparent 44%);
}

.player-card.paladin::before{
    background:radial-gradient(circle at top right, rgba(245,140,186,.18), transparent 44%);
}

.player-card.hunter::before{
    background:radial-gradient(circle at top right, rgba(171,212,115,.18), transparent 44%);
}

.player-card.rogue::before{
    background:radial-gradient(circle at top right, rgba(255,245,105,.18), transparent 44%);
}

.player-card.priest::before{
    background:radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 44%);
}

.player-card.death-knight::before{
    background:radial-gradient(circle at top right, rgba(196,31,59,.20), transparent 44%);
}

.player-card.shaman::before{
    background:radial-gradient(circle at top right, rgba(0,112,222,.20), transparent 44%);
}

.player-card.mage::before{
    background:radial-gradient(circle at top right, rgba(105,204,240,.20), transparent 44%);
}

.player-card.warlock::before{
    background:radial-gradient(circle at top right, rgba(148,130,201,.20), transparent 44%);
}

.player-card.monk::before{
    background:radial-gradient(circle at top right, rgba(0,255,150,.16), transparent 44%);
}

.player-card.druid::before{
    background:radial-gradient(circle at top right, rgba(255,125,10,.20), transparent 44%);
}

.player-card.demon-hunter::before{
    background:radial-gradient(circle at top right, rgba(163,48,201,.20), transparent 44%);
}

.player-card.evoker::before{
    background:radial-gradient(circle at top right, rgba(51,147,127,.20), transparent 44%);
}

/* ==========================================================
   MODAL BACKDROP
   ========================================================== */

.modal{
    position:fixed;
    inset:0;

    background:
        radial-gradient(
            circle at center,
            rgba(201,162,39,.08),
            rgba(0,0,0,.82)
        );

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

    z-index:999;

    padding:25px;
}

.modal.active{
    display:flex;
}

/* ==========================================================
   MODAL CONTENT
   ========================================================== */

.modal-content{
    width:100%;
    max-width:460px;

    background:
        linear-gradient(
            145deg,
            rgba(23,23,23,.96),
            rgba(8,8,8,.96)
        );

    border:1px solid rgba(201,162,39,.28);
    border-radius:20px;

    padding:34px;

    box-shadow:
        0 30px 80px rgba(0,0,0,.65),
        0 0 35px rgba(201,162,39,.10);

    backdrop-filter:blur(18px);

    position:relative;
    overflow:hidden;

    animation:modalIn .25s ease;
}

.modal-content::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        radial-gradient(
            circle at top right,
            rgba(201,162,39,.16),
            transparent 42%
        );

    pointer-events:none;
}

.modal-content h2{
    color:var(--gold);

    font-size:28px;
    letter-spacing:1.5px;

    margin-bottom:28px;

    position:relative;
    z-index:2;
}

/* ==========================================================
   FORM
   ========================================================== */

#playerForm{
    position:relative;
    z-index:2;

    display:flex;
    flex-direction:column;
    gap:14px;
}

#playerForm label{
    color:#d4d4d4;

    font-size:13px;
    font-weight:700;

    letter-spacing:.8px;
    text-transform:uppercase;

    margin-top:4px;
}

#playerForm input,
#playerForm select,
#playerForm textarea{
    width:100%;

    background:rgba(255,255,255,.045);

    border:1px solid rgba(255,255,255,.10);
    border-radius:10px;

    color:var(--text);

    padding:13px 14px;

    font-size:15px;
    font-family:inherit;

    outline:none;
    resize:vertical;

    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}

#playerForm input:focus,
#playerForm select:focus,
#playerForm textarea:focus{
    border-color:rgba(201,162,39,.65);

    background:rgba(255,255,255,.065);

    box-shadow:
        0 0 0 3px rgba(201,162,39,.10),
        0 0 18px rgba(201,162,39,.10);
}

#playerForm select{
    cursor:pointer;
}

#playerForm option{
    background:#111;
    color:#f2f2f2;
}

#playerForm input[type="file"]{
    padding:10px 12px;
    cursor:pointer;
}

/* ==========================================================
   MODAL PORTRAIT / M+ ROW
   ========================================================== */

.modal-portrait-row{
    display:flex;
    align-items:center;
    gap:14px;

    padding:12px 14px;
    margin-bottom:6px;

    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.08);
    border-radius:12px;
}

.modal-portrait-img{
    width:56px;
    height:56px;

    border-radius:10px;
    object-fit:cover;

    border:1px solid rgba(255,255,255,.15);

    flex-shrink:0;
}

.modal-portrait-meta{
    display:flex;
    flex-direction:column;
    gap:2px;
}

.modal-mplus-label{
    color:#8d8d8d;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.6px;
}

#modalMplusScore{
    color:var(--gold);
    font-size:18px;
}

.modal-mplus-status{
    color:#8a8a8a;
    font-size:11px;
}

/* ==========================================================
   ACHIEVEMENT PICKER
   ========================================================== */

.achievement-picker{
    position:relative;

    display:flex;
    flex-direction:column;
    gap:8px;

    margin-bottom:14px;
}

.achievement-picker input[type="text"]{
    width:100%;
}

.achievement-status{
    color:#8a8a8a;
    font-size:11px;
    min-height:14px;
}

.achievement-results{
    position:absolute;
    top:calc(100% + 2px);
    left:0;
    right:0;
    z-index:20;

    max-height:220px;
    overflow-y:auto;

    background:#161616;
    border:1px solid rgba(255,255,255,.12);
    border-radius:10px;

    box-shadow:0 12px 28px rgba(0,0,0,.5);
}

.achievement-result-item{
    padding:9px 14px;

    font-size:13px;
    color:#e4e4e4;

    cursor:pointer;

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

.achievement-result-item:last-child{
    border-bottom:none;
}

.achievement-result-item:hover{
    background:rgba(212,175,55,.12);
    color:var(--gold);
}

.achievement-result-empty{
    padding:10px 14px;
    color:#8a8a8a;
    font-size:12px;
}

.achievement-chips{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.achievement-chips-empty{
    color:#8a8a8a;
    font-size:12px;
}

.achievement-chip{
    display:inline-flex;
    align-items:center;
    gap:6px;

    padding:5px 6px 5px 12px;
    border-radius:999px;

    background:rgba(212,175,55,.12);
    border:1px solid rgba(212,175,55,.35);

    color:#e9e9e9;
    font-size:12px;
}

.achievement-chip-remove{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    width:18px;
    height:18px;
    border-radius:50%;
    border:none;

    background:rgba(255,255,255,.08);
    color:#e4e4e4;

    font-size:13px;
    line-height:1;
    cursor:pointer;
}

.achievement-chip-remove:hover{
    background:rgba(224,106,106,.35);
    color:#fff;
}

/* ==========================================================
   MODAL BUTTONS
   ========================================================== */

.modal-hint{
    margin-top:14px;

    padding:10px 12px;
    border-radius:8px;

    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);

    color:#9a9a9a;
    font-size:12px;
    line-height:1.5;
}

.modal-hint strong{
    color:var(--gold);
}

.modal-buttons{
    display:flex;
    gap:12px;

    margin-top:22px;
}

.modal-buttons button{
    flex:1;

    border:none;
    border-radius:10px;

    padding:13px 18px;

    cursor:pointer;

    font-weight:800;
    letter-spacing:.4px;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.modal-buttons button[type="submit"]{
    background:var(--gold);
    color:#000;
}

.modal-buttons button[type="submit"]:hover{
    background:var(--goldHover);
    transform:translateY(-2px);
}

.modal-buttons .secondary{
    background:rgba(255,255,255,.05);
    color:#bdbdbd;

    border:1px solid rgba(255,255,255,.10);
}

.modal-buttons .secondary:hover{
    background:rgba(255,255,255,.09);
    color:#fff;

    border-color:rgba(255,255,255,.18);

    transform:translateY(-2px);
}

/* ==========================================================
   MODAL ANIMATION
   ========================================================== */

@keyframes modalIn{
    from{
        opacity:0;
        transform:translateY(18px) scale(.97);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}
/* ==========================================================
   RESPONSIVE DESIGN
   ========================================================== */

@media (max-width:1400px){

    .roster-page{
        padding-left:35px;
        padding-right:35px;
    }

    .roster-layout{
        grid-template-columns:1.7fr 1fr;
        gap:28px;
    }

    .dps-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .healer-grid,
    .reserve-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width:1100px){

    .roster-page{
        padding-top:105px;
        padding-left:25px;
        padding-right:25px;
    }

    .roster-header{
        margin-bottom:35px;
    }

    .roster-header h1{
        font-size:42px;
    }

    .roster-layout{
        grid-template-columns:1fr;
    }

    .player-side{
        position:relative;
        top:auto;

        height:auto;
        max-height:none;

        order:-1;
    }

    .player-pool{
        max-height:none;
    }

    .tank-grid,
    .healer-grid,
    .reserve-grid{
        grid-template-columns:repeat(3,1fr);
    }

    .dps-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

/* ==========================================================
   SMALL TABLET
   ========================================================== */

@media (max-width:820px){

    .roster-page{
        padding-left:18px;
        padding-right:18px;
        padding-bottom:40px;
    }

    .roster-header h1{
        font-size:34px;
        letter-spacing:2px;
    }

    .roster-header p{
        font-size:16px;
    }

    .raid-side,
    .player-side{
        padding:24px;
        border-radius:16px;
    }

    .player-toolbar{
        flex-direction:column;
        align-items:stretch;
        gap:14px;
    }

    .player-toolbar h2{
        text-align:center;
    }

    #newPlayerBtn{
        width:100%;
    }

    .tank-grid,
    .healer-grid,
    .reserve-grid,
    .dps-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .raid-slot{
        height:110px;
    }

}

/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width:560px){

    .roster-page{
        padding-top:95px;
        padding-left:14px;
        padding-right:14px;
    }

    .roster-header{
        margin-bottom:28px;
    }

    .roster-header h1{
        font-size:30px;
    }

    .roster-header p{
        font-size:14px;
    }

    .raid-side,
    .player-side{
        padding:18px;
        border-radius:14px;
    }

    .role-section{
        margin-bottom:34px;
    }

    .role-section h2{
        font-size:20px;
        letter-spacing:1px;
    }

    .tank-grid,
    .healer-grid,
    .reserve-grid,
    .dps-grid{
        grid-template-columns:1fr;
    }

    .raid-slot{
        height:96px;
    }

    .player-card{
        min-height:78px;
        padding:12px 14px;
    }

    .player-name{
        font-size:16px;
    }

    .player-meta{
        gap:6px;
    }

    .player-class,
    .player-role{
        font-size:11px;
    }

    .modal{
        padding:14px;
    }

    .modal-content{
        padding:24px;
        border-radius:16px;
    }

    .modal-content h2{
        font-size:23px;
        margin-bottom:22px;
    }

    .modal-buttons{
        flex-direction:column;
    }

}

/* ==========================================================
   VERY SMALL MOBILE
   ========================================================== */

@media (max-width:380px){

    .roster-header h1{
        font-size:26px;
    }

    .raid-side,
    .player-side{
        padding:14px;
    }

    .raid-slot{
        height:88px;
    }

    #playerForm input,
    #playerForm select{
        padding:12px;
        font-size:14px;
    }

}

/* ==========================================================
   PREMIUM BACKGROUND DETAILS
   ========================================================== */

.roster-page{
    position:relative;
    overflow:hidden;
}

.roster-page::before{
    content:"";

    position:fixed;
    inset:0;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(201,162,39,.08),
            transparent 28%
        ),
        radial-gradient(
            circle at 85% 15%,
            rgba(120,70,180,.08),
            transparent 30%
        ),
        radial-gradient(
            circle at 50% 95%,
            rgba(201,162,39,.05),
            transparent 34%
        );

    pointer-events:none;
    z-index:-2;
}

.roster-page::after{
    content:"";

    position:fixed;
    inset:0;

    background:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:60px 60px;

    mask-image:linear-gradient(
        to bottom,
        rgba(0,0,0,.45),
        transparent 75%
    );

    pointer-events:none;
    z-index:-1;
}

/* ==========================================================
   PANEL HOVER DEPTH
   ========================================================== */

.raid-side,
.player-side{
    transition:
        border-color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

.raid-side:hover,
.player-side:hover{
    border-color:rgba(201,162,39,.32);

    box-shadow:
        0 0 30px rgba(0,0,0,.45),
        0 0 28px rgba(201,162,39,.08);
}

/* ==========================================================
   SECTION DETAIL LINES
   ========================================================== */

.role-section h2{
    position:relative;
}

.role-section h2::after{
    content:"";

    position:absolute;
    left:0;
    bottom:-8px;

    width:100%;
    height:1px;

    background:
        linear-gradient(
            90deg,
            rgba(201,162,39,.45),
            transparent
        );
}

/* ==========================================================
   EMPTY SLOT DETAILS
   ========================================================== */

.raid-slot span{
    position:relative;
    z-index:2;

    pointer-events:none;

    transition:
        color .25s ease,
        transform .25s ease;
}

.raid-slot::before{
    content:"";

    position:absolute;
    inset:8px;

    border-radius:10px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.035),
            transparent
        );

    opacity:0;

    transition:.25s;
}

.raid-slot:hover::before{
    opacity:1;
}

.raid-slot:hover span{
    color:#9c9c9c;
    transform:translateY(-2px);
}

/* ==========================================================
   VALID / INVALID DROP FEEDBACK
   ========================================================== */

.raid-slot.valid-drop{
    border-color:rgba(75,210,120,.85);

    background:
        radial-gradient(
            circle at center,
            rgba(75,210,120,.14),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset 0 0 26px rgba(75,210,120,.10),
        0 0 22px rgba(75,210,120,.16);
}

.raid-slot.invalid-drop{
    border-color:rgba(210,70,70,.85);

    background:
        radial-gradient(
            circle at center,
            rgba(210,70,70,.13),
            rgba(255,255,255,.025)
        );

    box-shadow:
        inset 0 0 26px rgba(210,70,70,.10),
        0 0 22px rgba(210,70,70,.14);
}

/* ==========================================================
   PLAYER POOL EMPTY STATE
   ========================================================== */

.player-pool:empty::before{
    content:"Noch keine Spieler angelegt.";

    min-height:160px;

    border:1px dashed rgba(201,162,39,.22);
    border-radius:14px;

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

    color:#666;
    font-size:14px;

    background:rgba(255,255,255,.025);
}

.player-pool:empty::after{
    content:"Klicke auf „+ Spieler erstellen“, um deinen Kader aufzubauen.";

    margin-top:-118px;

    min-height:160px;

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

    padding-top:42px;

    color:#8d8d8d;
    font-size:12px;

    pointer-events:none;
}

/* ==========================================================
   CARD ENTRANCE ANIMATION
   ========================================================== */

.player-card{
    animation:cardIn .22s ease;
}

@keyframes cardIn{
    from{
        opacity:0;
        transform:translateY(10px) scale(.98);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
    }
}

/* ==========================================================
   SLOT FILLED ANIMATION
   ========================================================== */

.raid-slot.occupied{
    animation:slotFilled .22s ease;
}

@keyframes slotFilled{
    from{
        transform:scale(.98);
        box-shadow:
            0 0 0 rgba(201,162,39,0);
    }

    to{
        transform:scale(1);
        box-shadow:
            0 0 18px rgba(201,162,39,.10);
    }
}

/* ==========================================================
   BUTTON MICRO INTERACTIONS
   ========================================================== */

#newPlayerBtn,
.modal-buttons button{
    position:relative;
    overflow:hidden;
}

#newPlayerBtn::after,
.modal-buttons button[type="submit"]::after{
    content:"";

    position:absolute;
    top:0;
    left:-120%;

    width:80%;
    height:100%;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.35),
            transparent
        );

    transform:skewX(-18deg);

    transition:left .55s ease;
}

#newPlayerBtn:hover::after,
.modal-buttons button[type="submit"]:hover::after{
    left:130%;
}

/* ==========================================================
   FOCUS ACCESSIBILITY
   ========================================================== */

#newPlayerBtn:focus-visible,
.modal-buttons button:focus-visible,
#playerForm input:focus-visible,
#playerForm select:focus-visible,
.delete-player:focus-visible{
    outline:2px solid var(--gold);
    outline-offset:3px;
}

/* ==========================================================
   SELECTION
   ========================================================== */

::selection{
    background:rgba(201,162,39,.35);
    color:#fff;
}

/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
    }

}

/* ==========================================================
   PLAYER CARD EDIT STATE
   ========================================================== */

.player-card{
    padding-top:18px;
}

.edit-player{
    position:absolute;
    top:10px;
    right:10px;

    width:26px;
    height:26px;

    border:none;
    border-radius:50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255,255,255,.22),
            rgba(0,0,0,.55)
        );

    color:#d8d8d8;

    cursor:pointer;

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

    font-size:12px;
    line-height:1;

    z-index:8;

    opacity:0;
    transform:translateY(-4px) scale(.88);

    box-shadow:
        0 4px 12px rgba(0,0,0,.38),
        inset 0 0 0 1px rgba(255,255,255,.10);

    transition:
        opacity .18s ease,
        transform .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease;
}

.player-card:hover .edit-player,
.player-card:focus-within .edit-player{
    opacity:1;
    transform:translateY(0) scale(1);
}

.edit-player:hover{
    background:var(--gold);
    color:#000;

    box-shadow:
        0 0 16px rgba(201,162,39,.28),
        inset 0 0 0 1px rgba(255,255,255,.18);
}

/* Delete button moves left so edit owns the top-right corner */

.delete-player{
    top:10px;
    right:42px;

    opacity:0;
    transform:translateY(-4px) scale(.88);

    transition:
        opacity .18s ease,
        transform .18s ease,
        background .18s ease,
        color .18s ease;
}

.player-card:hover .delete-player,
.player-card:focus-within .delete-player{
    opacity:1;
    transform:translateY(0) scale(1);
}

/* Optional: tiny edit mode glow while modal edits existing player */

.player-card.is-editing{
    border-color:rgba(201,162,39,.65);

    box-shadow:
        0 0 0 1px rgba(201,162,39,.28),
        0 0 22px rgba(201,162,39,.16);
}

/* Spec display */

.player-spec{
    font-size:12px;
    font-weight:700;

    padding:4px 8px;

    border-radius:999px;

    background:rgba(201,162,39,.10);
    border:1px solid rgba(201,162,39,.18);

    color:#d9c06a;
}
/* ==========================================================
   RAID BUFF OVERVIEW
   ========================================================== */

.buff-overview{
    margin-bottom:22px;

    background:rgba(255,255,255,.025);

    border:1px solid rgba(201,162,39,.16);
    border-radius:14px;

    padding:16px;
}

.buff-overview-header{
    display:flex;
    align-items:center;
    justify-content:space-between;

    margin-bottom:14px;
}

.buff-overview-header h3{
    color:var(--gold);

    font-size:16px;
    letter-spacing:1px;
    text-transform:uppercase;
}

.buff-counter{
    color:#8d8d8d;

    font-size:12px;
    font-weight:700;
}

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

.buff-item{
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;

    min-height:42px;

    padding:9px 10px;

    border-radius:10px;

    background:rgba(255,255,255,.035);
    border:1px solid rgba(255,255,255,.07);

    transition:.2s;
}

.buff-item.covered{
    border-color:rgba(75,210,120,.28);
    background:rgba(75,210,120,.055);
}

.buff-item.missing{
    border-color:rgba(210,70,70,.30);
    background:rgba(210,70,70,.055);
}

.buff-status{
    width:20px;
    height:20px;

    border-radius:50%;

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

    font-size:12px;
    font-weight:900;
}

.buff-item.covered .buff-status{
    background:rgba(75,210,120,.18);
    color:#66e092;
}

.buff-item.missing .buff-status{
    background:rgba(210,70,70,.18);
    color:#e06a6a;
}

.buff-info{
    min-width:0;
}

.buff-name{
    color:#e4e4e4;

    font-size:13px;
    font-weight:800;

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

.buff-source{
    margin-top:3px;

    color:#8a8a8a;

    font-size:11px;

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

.buff-tag{
    padding:4px 7px;

    border-radius:999px;

    background:rgba(0,0,0,.35);
    border:1px solid rgba(255,255,255,.08);

    color:#bdbdbd;

    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.4px;
}

.buff-item.covered .buff-tag{
    color:#74d796;
    border-color:rgba(75,210,120,.24);
}

.buff-item.missing .buff-tag{
    color:#e06a6a;
    border-color:rgba(210,70,70,.24);
}

/* ==========================================================
   COOLDOWN OVERVIEW EXTRAS
   ========================================================== */

.buff-category-heading{
    margin:10px 0 2px;

    color:#8d8d8d;

    font-size:10px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:1px;
}

.buff-category-heading:first-child{
    margin-top:0;
}

.buff-cooldown-value{
    color:#8a8a8a;

    font-size:11px;
    font-weight:600;
}

/* Compact on mobile */

@media (max-width:560px){

    .buff-item{
        grid-template-columns:auto 1fr;
    }

    .buff-
    .buff-tag{
        grid-column:1 / -1;
        justify-self:start;
        margin-top:4px;
    }

}
==========================
   API / BUSY STATE
   ========================================================== */

.roster-busy .player-card{    pointer-events:none;
    opacity:.55;
}

}

.roster-busy .raid-slot,
.roster-busy .player-pool{
    cursor:wait;
}

.roster-error{
    margin-bottom:16px;

    padding:12px 14px;

    border-radius:10px;

    background:rgba(210,70,70,.10);
    border:1px solid rgba(210,70,70,.35);

    color:#e58989;

    font-size:13px;
    font-weight:700;
}
/* ==========================================================
   TRIAL TAG
   ========================================================== */

.player-trial{
    padding:4px 8px;

    border-radius:999px;

    background:rgba(201,162,39,.14);
    border:1px solid rgba(201,162,39,.28);

    color:var(--gold);

    font-size:10px;
    font-weight:900;

    text-transform:uppercase;
    letter-spacing:.6px;
}

.player-card.is-trial{
    border-style:solid;
}

.player-card.is-trial::after{
    content:"TRIAL";

    position:absolute;
    bottom:10px;
    right:10px;

    padding:3px 7px;

    border-radius:999px;

    background:rgba(201,162,39,.14);
    border:1px solid rgba(201,162,39,.26);

    color:var(--gold);

    font-size:9px;
    font-weight:900;
    letter-spacing:.7px;

    z-index:4;
}

/* ==========================================================
   CHECKBOX FIELD
   ========================================================== */

.checkbox-label{
    display:flex;
    align-items:center;
    gap:10px;

    margin-top:8px;

    cursor:pointer;

    color:#d4d4d4;

    font-size:13px;
    font-weight:700;

    letter-spacing:.8px;
    text-transform:uppercase;
}

.checkbox-label input{
    width:18px !important;
    height:18px;

    accent-color:var(--gold);

    cursor:pointer;
}

.checkbox-label span{
    color:#d4d4d4;
}

/* ==========================================================
   ADMIN / GUEST STATE
   ========================================================== */

.is-roster-guest .edit-player,
.is-roster-guest .delete-player,
.is-roster-guest #resetRosterBtn{
    display:none !important;
}

.is-roster-guest .player-card{
    cursor:default;
}

.is-roster-guest .player-card:hover{
    transform:none;
}

.is-roster-guest #newPlayerBtn{
    opacity:.45;
    cursor:not-allowed;
}

#rosterLoginBtn,
#rosterLogoutBtn,
#resetRosterBtn{
    white-space:nowrap;
}

.player-toolbar{
    gap:10px;
    flex-wrap:wrap;
}