@font-face {
    font-family: 'miao';
    src: url('../fonts/汉仪乐喵.ttf') format('truetype');
}

@font-face {
    font-family: 'FOT-Yuruka';
    src: url('../fonts/FOT-Yuruka Std.ttf') format('truetype');
}

body {
    margin: 0;
    min-height: 100vh;
    display: grid;
    place-content: center;
    grid-template-columns: auto auto;
    background: #f4d967;
}

.character-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 10px;
}

.character-card {
    position: relative;
    margin: 0 10px;
}

.character-card:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }

.character {
    --s: min(80vw, 500px);
    width: var(--s);
    aspect-ratio: 1;
    object-fit: contain;
    object-position: center;
    padding: calc(var(--s) / 6) calc(var(--s) / 10) 0;
    box-sizing: border-box;
    transition: .6s;
    cursor: pointer;
}

.character:hover { padding: 0; }

.character-name {
    text-align: center;
    margin-top: 8px;
    font-size: 24px;
    font-weight: bold;
    color: rgb(255, 255, 255);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    padding: 5px 10px;
    background: rgba(255, 255, 255, 0.3);
    font-family: 'miao', serif;
}

.button-name {
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    color: rgba(134, 251, 255, 0.88);
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    background: rgba(255, 247, 195, 0.8);
    font-family: 'FOT-Yuruka', serif;
    cursor: pointer;
    transition: background-color .3s, opacity .3s;
}

.button-name:hover { background: rgb(255, 244, 175); }
.button-name:disabled { cursor: not-allowed; opacity: .45; }

#utility-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 7px;
}

.import-button input { display: none; }

#container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    position: absolute;
    top: 20px;
    left: 20px;
}

.rank-box {
    position: relative;
    width: 15vw;
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 10px;
    transition: .9s;
    animation: fadeInBackground 1s ease-in-out;
}

.player-image {
    position: absolute;
    width: 40px;
    aspect-ratio: 1 / 1;
    left: 2%;
    bottom: 34px;
    z-index: 2;
    transition: .9s;
}

.player-name {
    position: absolute;
    margin: 0;
    color: white;
    font-size: 15px;
    font-style: italic;
    text-align: center;
    z-index: 5;
    left: 2%;
    bottom: 5px;
    transition: .9s;
    font-family: 'miao', serif;
    text-shadow: 0 2px 4px rgb(253, 82, 209);
}

.ranking {
    margin: 10px 0 0;
    padding-left: 2%;
    color: white;
    font-size: 15px;
    font-family: 'FOT-Yuruka', serif;
}

@keyframes fadeInBackground {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 900px) {
    body { display: block; padding-top: 92px; }
    .character-container { margin: 0; }
    .character { --s: min(50vw, 500px); }
    .rank-box { width: 24vw; }
}

@media (max-width: 600px) {
    #container { top: 12px; left: 12px; }
    #utility-controls { top: 12px; right: 12px; gap: 4px; }
    .button-name { padding: 7px 8px; font-size: 12px; }
    .rank-box { width: 28vw; margin-bottom: 5px; }
    .player-image { width: 30px; bottom: 26px; }
    .player-name, .ranking { font-size: 11px; }
    .character-card { margin: 0; }
    .character { --s: 50vw; padding: 12vw 5vw 0; }
    .character-name { margin-top: 0; border-radius: 0; font-size: 16px; }
}