/* css/genshin-ranking.css */

.character-container {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-touch-callout: none;
}
#scrollable-ranking-container {
    max-height: calc(100vh - 360px); /* Adjusted height further for controls */
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.gu-mirror {
    position: fixed !important;
    margin: 0 !important;
    z-index: 9999 !important;
    opacity: 0.8;
}
.custom-context-menu, #character-info-popup {
    position: fixed;
    z-index: 10000;
    display: none;
    background-color: var(--context-menu-bg, #eee);
    border: 1px solid var(--context-menu-border, #ccc);
    border-radius: 4px;
    padding: 5px 0;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    min-width: 150px;
}
.custom-context-menu li {
    padding: 8px 15px;
    cursor: pointer;
    list-style: none;
    color: var(--text-color);
}
.custom-context-menu li:hover {
    background-color: var(--context-menu-hover-bg, #0d6efd);
    color: var(--context-menu-hover-color, #fff);
}
 .custom-context-menu li i {
     margin-right: 8px;
 }
#character-info-popup {
    padding: 10px 15px;
    min-width: 180px;
}
#character-info-popup p { margin-bottom: 0.3rem; font-size: 0.9rem; }
#character-info-popup p strong { display: inline-block; min-width: 60px; }
 /* Variables defined in styles.css take precedence if :root is redefined here, better to keep in styles.css */
 /* :root { ... } */
 /* body.dark-theme { ... } */

.scroll-top-button {
    position: fixed; bottom: 20px; right: 20px; z-index: 1030; display: none; opacity: 0; visibility: hidden; transition: opacity 0.3s ease-in-out, visibility 0s linear 0.3s;
 }
 .scroll-top-button.visible {
    display: block; opacity: 0.7; visibility: visible; transition: opacity 0.3s ease-in-out, visibility 0s linear 0s;
 }
 .scroll-top-button:hover { opacity: 1; }
.tier-controls-buttons {
    position: absolute; right: 5px; top: 50%; transform: translateY(-50%); display: flex; gap: 6px; opacity: 1; pointer-events: auto; transition: none;
}
.tier-controls-buttons button {
    padding: 0.4em 0.7em; font-size: 1em; line-height: 1; min-width: 34px; min-height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; pointer-events: auto; background: rgba(150,150,150,.7); border: 1px solid var(--button-border); color: var(--button-text);
}
body.dark-theme .tier-controls-buttons button {
     background: rgba(70,70,70,.7); color: var(--genshin-tier-label-text-dark, #f8f9fa); border-color: var(--button-border);
}
.tier-controls-buttons button i { font-size: 1.1em; }
#hidden-tier-color-input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; overflow: hidden; left: -100px; }
#tier-controls .form-label { white-space: nowrap; }
#tier-controls .form-control,
#tier-controls .form-select,
#tier-controls .form-range { flex-shrink: 0; }
#tier-controls .row > div { display: flex; align-items: center; }
#tier-controls .form-range { width: 100px !important; }
#tier-controls hr { margin-top: 0.75rem; margin-bottom: 0.75rem; }