/* WebEngine supplies the character abbreviation on .profiles_player_card. */
.profiles_player_card {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 360px;
    width: 100%;
    padding: 24px;
    border: 1px solid rgba(180, 62, 71, .55);
    border-radius: 10px;
    background-color: #111219;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    overflow: hidden;
}

.profiles_player_card:is(.DW, .SM, .GM, .SW, .DSW) { background-image: url('../img/profiles/wiz.jpg'); }
.profiles_player_card:is(.DK, .BK, .BM, .DGK, .IGK) { background-image: url('../img/profiles/knight.jpg'); }
.profiles_player_card:is(.ELF, .ME, .HE, .NE, .RYE) { background-image: url('../img/profiles/elf.jpg'); }
.profiles_player_card:is(.MG, .DM, .MK, .DPK) { background-image: url('../img/profiles/mg.jpg'); }
.profiles_player_card:is(.DL, .LE, .EL, .FCE) { background-image: url('../img/profiles/dl.jpg'); }
.profiles_player_card:is(.SUM, .BS, .DSM, .DS, .ESUM) { background-image: url('../img/profiles/sum.jpg'); }
.profiles_player_card:is(.RF, .FM, .FB, .BF) { background-image: url('../img/profiles/rf.jpg'); }
.profiles_player_card:is(.GL, .ML, .SL, .AL) { background-image: url('../img/profiles/gl.jpg'); }
.profiles_player_card:is(.RW, .RSM, .GRM, .MRW, .IRW) { background-image: url('../img/profiles/rw.jpg'); }
.profiles_player_card:is(.SLR, .SLRR, .MSLR, .SLTR, .RS) { background-image: url('../img/profiles/sl.jpg'); }
.profiles_player_card:is(.GC, .GB, .MGB, .HGC, .MGC) { background-image: url('../img/profiles/gc.jpg'); }
.profiles_player_card:is(.LIW, .LIM, .SHW, .LUW, .GLW) { background-image: url('../img/profiles/liw.jpg'); }
.profiles_player_card:is(.LEM, .WAM, .ARM, .MYM, .BAM) { background-image: url('../img/profiles/lem.jpg'); }
.profiles_player_card:is(.IK, .MIK, .IM, .MYK, .PPK) { background-image: url('../img/profiles/ik.jpg'); }
.profiles_player_card:is(.ALC, .ALMN, .ALMTR, .ALFC, .CRE) { background-image: url('../img/profiles/alc.jpg'); }
/* No cru.jpg exists in this template; use the knight art until one is supplied. */
.profiles_player_card:is(.CRU, .ICRU, .MPAL, .SPAL, .TCOM) { background-image: url('../img/profiles/knight.jpg'); }

.profiles_player_content {
    width: min(54%, 390px);
    min-width: 0;
    padding: 18px;
    border-radius: 8px;
    background: rgba(7, 8, 13, .76);
    color: #e7ebf0;
}

.profiles_player_table { width: 100%; }
.profiles_player_table .cname { text-align: center; font-size: 1.5rem; font-weight: 700; color: #fff; }
.profiles_player_table .cclass { text-align: center; color: #b7c0cb; }
.profiles_player_table_info { margin-top: 12px; }
.profiles_player_table_info td { padding: 4px 6px; overflow-wrap: anywhere; }
.profiles_player_table_info td:first-child { text-align: right; }
.profiles_player_table .isonline { color: #78df8f; }
.profiles_player_table .isoffline { color: #ef7b87; }

@media (max-width: 640px) {
    .profiles_player_card { min-height: 380px; padding: 12px; align-items: flex-end; }
    .profiles_player_content { width: 100%; padding: 12px; }
}

/* Character equipment and personal inventory. */
.profile-inventory {
    display: grid;
    justify-items: center;
    gap: 14px;
    width: 100%;
    margin: 24px auto 0;
}
.profile-inventory > h2 {
    margin: 0;
    color: #f3f4f6;
    font-family: "Cinzel Decorative", Georgia, serif;
    font-size: clamp(17px, 2vw, 22px);
    text-align: center;
}
.profile-inventory__frame {
    width: min(100%, 380px);
    padding: 12px;
    border: 2px solid #574036;
    border-radius: 7px;
    background: linear-gradient(145deg, #281917, #090b0e 48%, #1b1918);
    box-shadow: inset 0 0 0 2px #100c0a, 0 12px 28px #0008;
}
.profile-inventory__frame h3 {
    margin: 4px 0 9px;
    color: #e4d2c1;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .07em;
    text-align: center;
    text-transform: uppercase;
}
.profile-inventory__equipment {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(7, minmax(0, 1fr));
    gap: 2px;
    width: 100%;
    aspect-ratio: 8 / 7;
    margin-bottom: 15px;
}
.profile-inventory__equipment-slot {
    display: grid;
    place-items: center;
    min-width: 0;
    min-height: 0;
    border: 1px solid #554943;
    background: radial-gradient(circle at center, #222324, #0a0d0f 74%);
    overflow: hidden;
}
.profile-inventory__equipment-slot--8 { grid-area: 1 / 1 / span 2 / span 2; }
.profile-inventory__equipment-slot--2 { grid-area: 1 / 4 / span 2 / span 2; }
.profile-inventory__equipment-slot--7 { grid-area: 1 / 6 / span 2 / span 3; }
.profile-inventory__equipment-slot--0 { grid-area: 3 / 1 / span 3 / span 2; }
.profile-inventory__equipment-slot--9 { grid-area: 3 / 3 / span 1 / span 1; }
.profile-inventory__equipment-slot--3 { grid-area: 3 / 4 / span 3 / span 2; }
.profile-inventory__equipment-slot--1 { grid-area: 3 / 7 / span 3 / span 2; }
.profile-inventory__equipment-slot--5 { grid-area: 6 / 1 / span 2 / span 2; }
.profile-inventory__equipment-slot--10 { grid-area: 6 / 3 / span 1 / span 1; }
.profile-inventory__equipment-slot--4 { grid-area: 6 / 4 / span 2 / span 2; }
.profile-inventory__equipment-slot--11 { grid-area: 6 / 6 / span 1 / span 1; }
.profile-inventory__equipment-slot--6 { grid-area: 6 / 7 / span 2 / span 2; }
.profile-inventory__empty-label {
    padding: 2px;
    color: #827875;
    font-size: clamp(7px, 1vw, 10px);
    line-height: 1.1;
    text-align: center;
    overflow-wrap: anywhere;
}
.profile-inventory__item {
    z-index: 1;
    display: grid;
    place-items: center;
    border: 1px solid #b07051;
    background: linear-gradient(145deg, #573026, #251719);
    box-shadow: inset 0 0 7px #d4865038;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.profile-inventory__item:focus-visible { outline: 2px solid #f3c08d; outline-offset: -2px; }
.profile-inventory__item span {
    color: #f0d9c6;
    font-size: clamp(8px, 1vw, 10px);
    line-height: 1.1;
    text-align: center;
}
.profile-inventory__item img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; pointer-events: none; }
.profile-inventory__grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    grid-template-rows: repeat(8, minmax(0, 1fr));
    width: 100%;
    aspect-ratio: 1;
    border: 2px solid #625144;
    background-color: #0d1012;
    background-image: linear-gradient(to right, #5a56504d 1px, transparent 1px), linear-gradient(to bottom, #5a56504d 1px, transparent 1px);
    background-size: 12.5% 12.5%;
}
.profile-inventory__grid[hidden] { display: none; }
.profile-inventory__pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    padding-top: 10px;
    color: #e8d4c4;
    font-size: 12px;
}
.profile-inventory__pagination button {
    width: 32px;
    height: 28px;
    border: 1px solid #7f5445;
    border-radius: 3px;
    background: #1c1215;
    color: #f3d7bf;
    cursor: pointer;
}
.profile-inventory__pagination button:hover,
.profile-inventory__pagination button:focus-visible { background: #6c2830; }
.profile-inventory__notice { margin: 0; color: #c5b4af; text-align: center; }
.profile-inventory__selected { min-height: 2.5em; margin: 10px 0 0; color: #e8d4c4; font-size: 12px; text-align: center; overflow-wrap: anywhere; }

/* Same detailed item tooltip used by the warehouse, above every panel. */
.profile-item-tooltip {
    position: fixed;
    z-index: 999999;
    display: none;
    pointer-events: none;
    box-sizing: border-box;
    width: max-content;
    max-width: calc(100vw - 8px);
    padding: 7px 0;
    background: rgba(8, 7, 12, .94);
    color: #fff;
    font: 12px/1.35 Arial, sans-serif;
    text-align: center;
    white-space: nowrap;
}
.profile-item-tooltip > div { box-sizing: border-box; text-align: center; }
.profile-item-tooltip .warehouse-tooltip__title,
.profile-item-tooltip .warehouse-tooltip__line,
.profile-item-tooltip .warehouse-tooltip__section { padding: 0 4px; }
.profile-item-tooltip .warehouse-tooltip__title { margin-bottom: 7px; font-weight: 700; }
.profile-item-tooltip .warehouse-tooltip__line { line-height: 1.36; }
.profile-item-tooltip .warehouse-tooltip__class {
    display: block;
    width: 100%;
    margin: 4px 0;
    padding: 1px 5px;
    background: #a60000;
    color: #fff;
}
.profile-item-tooltip .warehouse-tooltip__section { margin-top: 12px; margin-bottom: 5px; }
.profile-item-tooltip .warehouse-tooltip__ancient-title { color: #ffd559; }
.profile-item-tooltip .warehouse-tooltip__band { width: 100%; padding: 1px 5px; }
.profile-item-tooltip .warehouse-tooltip__spacer { height: 6px; }
@media (max-width: 640px) {
    .profile-item-tooltip { white-space: normal; overflow-wrap: anywhere; }
}