/* Desktop status identity: portrait beside the character name, full-width
   resources below. The mobile header already uses a horizontal portrait. */
@media (min-width: 768px) {
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-main {
        display: grid; grid-template-columns: 100px minmax(0, 1fr);
        column-gap: 13px; align-items: center;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-right,
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-head,
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-head .nums {
        display: contents;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-avatar {
        grid-column: 1; grid-row: 1; width: 100px; height: 100px;
        margin: 0; align-self: center;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-avatar[hidden] { display: none; }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-head .who {
        grid-column: 2; grid-row: 1; align-self: center;
        min-width: 0; margin: 0;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-head .who > b {
        font-size: 20px;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-align-row {
        display: block; margin-top: 5px; white-space: nowrap;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-align-ic { margin-left: 0; }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-head .nums .g {
        grid-column: 1 / -1; grid-row: 2; margin-top: 20px;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-bars {
        grid-column: 1 / -1; grid-row: 3;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-head .defense-grid {
        grid-column: 1 / -1; grid-row: 4;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-main:has(#st-avatar[hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-main:has(#st-avatar[hidden]) #st-head .who {
        grid-column: 1;
    }
}

@media (min-width: 1200px) {
    body[data-mhunt] #st-main {
        display: grid; grid-template-columns: 100px minmax(0, 1fr);
        column-gap: 13px; align-items: center;
    }
    body[data-mhunt] #st-right,
    body[data-mhunt] #st-head,
    body[data-mhunt] #st-head .nums { display: contents; }
    body[data-mhunt] #st-avatar {
        grid-column: 1; grid-row: 1; width: 100px; height: 100px;
        margin: 0; align-self: center;
    }
    body[data-mhunt] #st-avatar[hidden] { display: none; }
    body[data-mhunt] #st-head .who {
        grid-column: 2; grid-row: 1; align-self: center;
        min-width: 0; margin: 0;
    }
    body[data-mhunt] #st-head .who > b { font-size: 20px; }
    body[data-mhunt] #st-align-row { display: block; margin-top: 5px; white-space: nowrap; }
    body[data-mhunt] #st-align-ic { margin-left: 0; }
    body[data-mhunt] #st-head .nums .g {
        grid-column: 1 / -1; grid-row: 2; margin-top: 20px;
    }
    body[data-mhunt] #st-bars { grid-column: 1 / -1; grid-row: 3; }
    body[data-mhunt] #st-head .defense-grid { grid-column: 1 / -1; grid-row: 4; }
    body[data-mhunt] #st-main:has(#st-avatar[hidden]) {
        grid-template-columns: minmax(0, 1fr);
    }
    body[data-mhunt] #st-main:has(#st-avatar[hidden]) #st-head .who { grid-column: 1; }
}

@media (min-width: 768px) and (max-width: 1199px) {
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-main {
        grid-template-columns: 72px minmax(0, 1fr); column-gap: 10px;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-avatar {
        width: 72px; height: 72px;
    }
    body:is([data-mtown], [data-mhunt][data-mpage="char"]) #st-head .who > b {
        font-size: 18px;
    }
}