/* styles.css - Optimiert für mobile Ansicht */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    margin: 0;

    font-family: 'Segoe UI', sans-serif;

    background-color: #040404;

    color: #e0e0e0;

    display: flex;

    flex-direction: column;

    align-items: center;

    background: radial-gradient(circle at 50% 50%, #121212 0%, #040404 100%);

    background-size: cover;

    background-attachment: fixed;

}



.navbar {

    background: linear-gradient(149deg, rgb(36,49,47) 0%, rgba(30,30,30,1) 53%);

    padding: 15px 0;

    display: flex;

    justify-content: center;

    align-items: center;

    box-shadow: 0 2px 5px rgba(0,0,0,0.5);

    position: sticky;

    top: 0;

    z-index: 1000;

    width: 100%;

}



.navbar-content {

    max-width: 1200px;

    width: 100%;

    display: flex;

    align-items: center;

    padding: 0 20px;

    position: relative;

}



.nav-links {

    list-style: none;

    display: flex;

    gap: 30px;

    margin: 0;

    padding: 0;

    position: absolute;

    left: 50%;

    transform: translateX(-50%);

    transition: all 0.3s ease; /* Animation für Ein-/Ausblenden */

}



.nav-links.active {

    display: flex;

}



.nav-links li a {

    font-family: 'Inter', sans-serif;

    font-size: clamp(16px, 3vw, 18px);

    color: #ffffff;

    text-decoration: none;

    transition: color 0.3s ease;

    padding: 10px 15px; /* Größere Klickbereiche */

}



.nav-links li a:hover {

    color: #00FFFF;

}



.chain-selector {

    margin-left: auto;

}



.chain-form {

    display: flex;

    align-items: center;

    gap: 10px;

}



.custom-dropdown {

    position: relative;

    width: 100px;

}



.dropdown-selected {

    padding: 8px 12px;

    background: #2a2a2a;

    color: #e0e0e0;

    border: 1px solid #444;

    border-radius: 5px;

    font-size: 18px;

    height: 40px;

    display: flex;

    align-items: center;

    cursor: pointer;

    position: relative;

}



.dropdown-selected img {

    margin-right: 8px;

}



.dropdown-arrow {

    position: absolute;

    right: 8px;

    font-size: 12px;

    color: #e0e0e0;

}



.dropdown-options {

    display: none;

    position: absolute;

    top: 100%;

    left: 0;

    width: 100%;

    background: #2a2a2a;

    border: 1px solid #444;

    border-radius: 5px;

    z-index: 1000;

}



.dropdown-option {

    padding: 8px 12px;

    display: flex;

    align-items: center;

    font-size: 18px;

    color: #e0e0e0;

    cursor: pointer;

}



.dropdown-option:hover {

    background: #333;

}



.dropdown-option img {

    margin-right: 8px;

}



.custom-dropdown:hover .dropdown-options {

    display: block;

}



.chain-selector button {

    padding: 8px 15px;

    background: linear-gradient(149deg, #00b300, #008000);

    color: #fff;

    border: none;

    border-radius: 5px;

    cursor: pointer;

    transition: all 0.3s;

    box-shadow: 0 0 10px rgba(0, 179, 0, 0.7);

    font-size: 18px;

    height: 40px;

    width: 120px;

}



.chain-selector button:hover {

    transform: scale(1.05);

    box-shadow: 0 0 15px rgba(0, 179, 0, 0.9);

}



.chain-selector button:active {

    transform: scale(0.95); /* Touch-Feedback */

}



.chain-icon {

    width: 18px;

    height: 18px;

    vertical-align: middle;

}



.controls {

    max-width: 1200px;

    width: 100%;

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 10px 20px;

    margin-top: 20px;

    flex-wrap: wrap; /* Ermöglicht Umbruch bei kleinen Bildschirmen */

    gap: 10px;

}



.time-selection {

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 5px;

    padding: 5px;

}



.time-selection a {

    display: inline-block;

    padding: 5px 15px;

    margin: 0 5px;

    max-height: 30px;

    background: transparent;

    color: #e0e0e0;

    text-decoration: none;

    border-radius: 5px;

    transition: all 0.3s;

    font-size: clamp(12px, 2.5vw, 14px);

    border: 1px solid #444;

}



.time-selection a.active {

    background: linear-gradient(149deg, #00b300, #008000);

    color: #ffffff;

    border: none;

    box-shadow: 0 0 5px rgba(0, 179, 0, 0.7);

}



.time-selection a:hover:not(.active) {

    background: #2a2a2a;

    transform: scale(1.05);

    box-shadow: 0 0 5px rgba(0, 179, 0, 0.3);

}



.filter-box {

    display: flex;

    align-items: center;

    border-radius: 5px;

    padding: 5px;

}



.filter-box select {

    padding: 5px 10px;

    background: transparent;

    color: #e0e0e0;

    border: 1px solid #444;

    border-radius: 5px;

    font-size: clamp(12px, 2.5vw, 14px);

    cursor: pointer;

    transition: all 0.3s;

    margin-right: 5px;

}



.filter-box select:hover {

    border-color: #00b300;

    box-shadow: 0 0 5px rgba(0, 179, 0, 0.3);

}



#sort-order-btn {

    padding: 5px 10px;

    background: transparent;

    color: #e0e0e0;

    border: 1px solid #444;

    border-radius: 5px;

    cursor: pointer;

    transition: all 0.3s;

    font-size: clamp(12px, 2.5vw, 14px);

}



#sort-order-btn:hover {

    border-color: #00b300;

    box-shadow: 0 0 5px rgba(0, 179, 0, 0.3);

}



#sort-order-btn:active {

    transform: scale(0.95); /* Touch-Feedback */

}



.search-container {

    position: relative;

    display: flex;

    align-items: center;

    border-radius: 5px;

    padding: 5px;

    width: 100%;

    max-width: 300px; /* Anpassung für mobile Geräte */

}



.search-icon {

    position: absolute;

    left: 10px;

    color: #e0e0e0;

}



#search-input {

    padding: 5px 10px 5px 30px;

    background: transparent;

    color: #e0e0e0;

    border: 1px solid #444;

    border-radius: 5px;

    font-size: clamp(12px, 2.5vw, 14px);

    width: 100%;

    transition: all 0.3s;

}



#search-input:focus {

    outline: none;

    border-color: #00b300;

    box-shadow: 0 0 5px rgba(0, 179, 0, 0.3);

}



#top-traders {

    max-width: 1200px;

    width: 100%;

    margin: 50px auto 20px auto;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 20px;

}



.top-row {

    display: flex;

    justify-content: center;

    width: 100%;

}



.top-1, .top-2, .top-3 {

    position: relative;

    background: linear-gradient(149deg, rgb(36,49,47) 0%, rgba(30,30,30,1) 53%);

}



.rank-circle {

    position: absolute;

    top: 10px;

    left: 10px;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background-color: #121212;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    font-weight: bold;

}



.top-1 {

    padding: 20px;

    border-radius: 20px;

    box-shadow: inset 0 2px 5px rgba(0, 179, 0, 0.73);

    width: 100%;

    max-width: 600px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    border: 2px solid #00b300;

}



.top-1.first-place {

    animation: glow 2s infinite alternate;

}



@keyframes glow {

    from {

        box-shadow: inset 0 2px 5px rgba(0, 179, 0, 0.73);

    }

    to {

        box-shadow: inset 0 2px 10px rgba(0, 255, 0, 1);

    }

}



.top-2-3 {

    display: flex;

    justify-content: center;

    gap: 20px;

    width: 100%;

}



.top-2, .top-3 {

    padding: 20px;

    border-radius: 20px;

    box-shadow: inset 0 2px 5px rgba(0, 179, 0, 0.73);

    width: 100%;

    max-width: 600px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;

    border: 2px solid #00b300;

}



@media (max-width: 1199px) {

    .top-row {

        flex-direction: column;

        align-items: center;

    }

    .top-2-3 {

        flex-direction: column;

        align-items: center;

    }

    .top-1, .top-2, .top-3 {

        width: 100%;

        max-width: 600px;

    }

}



@media (max-width: 600px) {

    .top-1, .top-2, .top-3 {

        max-width: 500px;

    }

    .top-profile-img {

        width: 80px;

        height: 80px;

    }

    .top-crown {

        width: 80px;

        height: 80px;

        top: -45px;

        right: -10px;

    }

    .top-wallet-name {

        font-size: clamp(18px, 4vw, 20px);

    }

    .top-stats {

        font-size: clamp(12px, 2.5vw, 13px);

        gap: 10px;

        flex-wrap: wrap;

        justify-content: space-around;

    }

}



.top-profile-container {

    position: relative;

    margin-right: 20px;

}



.top-profile-img {

    width: 100px;

    height: 100px;

    border-radius: 50%;

    border: 2px solid #00b300;

    position: relative;

    z-index: 1;

}



.top-crown {

    position: absolute;

    top: -57px;

    right: -15px;

    left: auto;

    width: 100px;

    height: 100px;

    transform: rotate(15deg);

    z-index: 2;

}



.top-wallet-info {

    flex: 1;

    display: flex;

    flex-direction: column;

}



.top-wallet-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 20px;

}



.top-wallet-name-container {

    display: flex;

    align-items: center;

    gap: 5px;

}



.top-wallet-name {

    font-size: 24px;

    font-weight: bold;

    color: #e0e0e0;

}



.top-buttons {

    display: flex;

    gap: 10px;

}



.top-stats {

    display: flex;

    gap: 20px;

    font-size: 14px;

    background-color: #121212;

    padding: 10px;

    border-radius: 10px;

    justify-content: center;

}



.top-stats div {

    text-align: center;

}



.top-stats .label {

    color: #999;

}



.top-stats .value {

    color: #e0e0e0;

    font-weight: bold;

}



.tooltip {

    position: relative;

    display: inline-block;

}



.tooltip .tooltiptext {

    visibility: hidden;

    width: 140px;

    background-color: black;

    color: #fff;

    text-align: center;

    border-radius: 6px;

    padding: 5px 0;

    position: absolute;

    z-index: 1;

    bottom: 125%;

    left: 50%;

    margin-left: -70px;

    opacity: 0;

    transition: opacity 0.3s;

}



.tooltip:hover .tooltiptext {

    visibility: visible;

    opacity: 1;

}



.visualize-btn, .copy-btn {

    display: inline-block;

    color: #fff;

    text-decoration: none;

    padding: 6px 12px;

    border: none;

    cursor: pointer;

    font-size: clamp(10px, 2.5vw, 12px);

    transition: transform 0.3s, box-shadow 0.3s;
background: linear-gradient(149deg, rgb(36, 49, 47) 0%, rgb(46, 46, 46) 53%);
border-radius: 5px;

}



.visualize-btn:hover, .copy-btn:hover {

    transform: scale(1.05);

}



.visualize-btn:active, .copy-btn:active {

    transform: scale(0.95); /* Touch-Feedback */

}

.visualize-btn, .copy-btn2 {

    display: inline-block;

    color: #fff;

    text-decoration: none;

    padding: 6px 12px;

    border: none;

    cursor: pointer;

    font-size: clamp(10px, 2.5vw, 12px);

    transition: transform 0.3s, box-shadow 0.3s;

}



.visualize-btn:hover, .copy-btn2:hover {

    transform: scale(1.05);

}



.visualize-btn:active, .copy-btn2:active {

    transform: scale(0.95); /* Touch-Feedback */

}



.leaderboard-box {

    margin: 20px auto;

    max-width: 1200px;

    width: 100%;

    background: #080808;

    border: 1px solid #121212;

    border-radius: 8px;

    box-shadow: 0 2px 5px rgba(0,0,0,0.5);

    padding: 5px;

    overflow-x: auto;

    -webkit-overflow-scrolling: touch;

}



.leaderboard-table {

    width: 100%;

    min-width: 600px; /* Reduzierte Mindestbreite */

    border-collapse: separate;

    border-spacing: 0 1px;

    white-space: nowrap;

}



.leaderboard-table th {

    color: #666;

    font-weight: normal;

    text-align: center;

    padding: 8px;

}



.leaderboard-table th:first-child {

    text-align: center;

}



.leaderboard-table tr {

    background: transparent;

}



.leaderboard-table tr + tr td {

    border-top: 1px solid #121212;

}



.leaderboard-table td {

    padding: 10px 15px; /* Reduziertes Padding für Mobil */

    text-align: center;

    vertical-align: middle;

}



.leaderboard-table tr:hover {

    background-color: #333;

    cursor: pointer;

}



@media (hover: none) {

    .leaderboard-table tr:hover {

        background-color: transparent; /* Kein Hover auf Touch-Geräten */

    }

}



.leaderboard-table thead tr:hover {

    background-color: transparent;

    cursor: default;

}



.leaderboard-table .roi {

    text-align: center;

    width: 15%; /* Prozentuale Breite */

}



.leaderboard-table .transactions {

    text-align: center;

    width: 10%; /* Prozentuale Breite */

}



.copy-icon {

    color: #e0e0e0;

    font-size: 16px;

    margin-left: 10px;

    cursor: pointer;

    vertical-align: middle;

    transition: color 0.3s ease;

}



.copy-icon:hover {

    color: #00b300;

}



.copy-icon:active {

    transform: scale(0.95); /* Touch-Feedback */

}



.wallet-address-box {

    background: #2a2a2a;

    border-radius: 8px;

    padding: 8px 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

    margin-bottom: 10px;

    width: 100%;

    max-width: 600px;

    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);

}



.wallet-address {

    font-size: clamp(12px, 2.5vw, 14px);

    color: #ffffff;

    word-break: break-all;

    flex: 1;

}



.wallet-address-box .copy-btn {

    background: transparent;

    border: none;

    color: #e0e0e0;

    font-size: 16px;

    cursor: pointer;

    transition: color 0.3s ease;

}



.wallet-address-box .copy-btn:hover {

    color: #00b300;

}



.wallet-address-box .copy-btn:active {

    transform: scale(0.95); /* Touch-Feedback */

}



.leaderboard-table .rank {

    width: 10%; /* Prozentuale Breite */

    text-align: center;

    position: relative;

    padding-right: 20px;

}



.leaderboard-table .rank-circle {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background-color: #121212;

    color: #fff;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 16px;

    font-weight: bold;

}



.leaderboard-table .profile-img {

    width: 50px;

    height: 50px;

    border-radius: 10px;

    vertical-align: middle;

    cursor: pointer;

}



.leaderboard-table .wallet-name {

    font-weight: bold;

    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);

}



.leaderboard-table .wallet-link {

    color: #e0e0e0;

    text-decoration: none;

}



.leaderboard-table .social-links {

    text-align: center;

}



.leaderboard-table .social-links a {

    color: #ffffff;

    text-decoration: none;

    font-size: clamp(14px, 2.5vw, 16px);

    margin: 0 5px;

    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);

}



.leaderboard-table .social-links .twitter-btn, .leaderboard-table .social-links .telegram-btn {

    display: inline-block;

    color: white;

    text-decoration: none;

    padding: 6px 12px;

    border-radius: 5px;

    border: none;

    cursor: pointer;

    font-size: clamp(10px, 2.5vw, 12px);

    transition: transform 0.3s, box-shadow 0.3s;

    box-shadow: 0 4px 8px rgba(0,0,0,0.3);

}



.leaderboard-table .social-links .twitter-btn:hover, .leaderboard-table .social-links .telegram-btn:hover {

    transform: scale(1.05);

    box-shadow: 0 0 10px #004e43;

}



.leaderboard-table .social-links .twitter-btn:active, .leaderboard-table .social-links .telegram-btn:active {

    transform: scale(0.95); /* Touch-Feedback */

}



.fa-twitter:before, .fa-telegram:before {

    color: white;

}



.leaderboard-table .trader-cell {

    text-align: center;

}



.leaderboard-table .trader-inner {

    display: flex;

    align-items: center;

    gap: 10px;

}



.leaderboard-table .trader-image {

    flex: 1;

    display: flex;

    justify-content: flex-end;

}



.leaderboard-table .trader-details {

    flex: 1;

    display: flex;

    flex-direction: column;

    align-items: flex-start;

}



.leaderboard-table .wallet-name-row {

    display: flex;

    align-items: center;

    gap: 5px;

}



.leaderboard-table .social-row {

    display: flex;

    gap: 10px;

    margin-top: 5px;

    color: white;

}



.leaderboard-table .actions {

    text-align: center;

}



.button, .copytrade-btn, .spy-btn, .gmgn-btn, .axiom-btn, .photon-btn {

    display: inline-block;

    background: linear-gradient(149deg, rgb(36,49,47) 0%, rgb(46, 46, 46) 53%);

    color: #fff;

    text-decoration: none;

    padding: 6px 12px;

    border-radius: 5px;

    border: none;

    cursor: pointer;

    font-size: clamp(10px, 2.5vw, 12px);

    transition: transform 0.3s, box-shadow 0.3s;

    box-shadow: 0 4px 8px rgba(0,0,0,0.3);

}



.button:hover, .copytrade-btn:hover, .spy-btn:hover, .gmgn-btn:hover, .axiom-btn:hover, .photon-btn:hover {

    transform: scale(1.05);

}



.button:active, .copytrade-btn:active, .spy-btn:active, .gmgn-btn:active, .axiom-btn:active, .photon-btn:active {

    transform: scale(0.95); /* Touch-Feedback */

}



.buy-count {

    color: #ff0000;

}



.sell-count {

    color: #00ff00;

}



.profit-positive, .roi-positive {

    color: #00ff00;

    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);

}



.profit-negative, .roi-negative {

    color: #ff0000;

    text-shadow: 0 0 8px rgba(0, 0, 0, 0.7);

}



.login-notice {

    background: linear-gradient(149deg, rgb(36,49,47) 0%, rgba(30,30,30,1) 53%);

    padding: 20px;

    border-radius: 8px;

    box-shadow: 0 0 10px rgba(0, 179, 0, 0.7);

    margin: 20px auto;

    max-width: 600px;

    text-align: center;

    font-size: clamp(12px, 2.5vw, 14px);

}



.login-notice .privacy-note {

    font-size: clamp(10px, 2vw, 12px);

    color: #888;

    margin-top: 10px;

}



.connect-button {

    display: inline-block;

    background: linear-gradient(149deg, #00b300, #008000);

    color: #fff;

    text-decoration: none;

    padding: 10px 20px;

    border-radius: 30px;

    margin: 5px;

    transition: transform 0.3s, box-shadow 0.3s;

    box-shadow: 0 0 10px rgba(0, 179, 0, 0.7);

    cursor: pointer;

    border: none;

}



.connect-button:hover {

    transform: scale(1.05);

    box-shadow: 0 0 15px rgba(0, 179, 0, 0.9);

}



.connect-button:active {

    transform: scale(0.95); /* Touch-Feedback */

}



footer {

    position: relative;

    height: auto;

    width: 100%;

    text-align: center;

    color: #e0e0e0;

    font-size: clamp(12px, 2.5vw, 14px);

    z-index: 100;

    margin: 25px auto 20px auto;

    padding: 10px;

}



footer a {

    color: #78F8EC;

    text-decoration: none;

    margin: 0 10px;

    padding: 5px 10px; /* Größere Klickbereiche */

}



footer a:hover {

    text-decoration: underline;

}



footer a:active {

    transform: scale(0.95); /* Touch-Feedback */

}



.hamburger {

    display: none;

    font-size: 24px;

    color: #ffffff;

    background: none;

    border: none;

    cursor: pointer;

    padding: 10px;

}



.main-container {

    width: 100%;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.wallet-row {

    background: rgba(30,30,30,1);

    border-radius: 5px;

}



.wallet-row td:first-child {

    border-top-left-radius: 5px;

    border-bottom-left-radius: 5px;

}



.wallet-row td:last-child {

    border-top-right-radius: 5px;

    border-bottom-right-radius: 5px;

}



@media (max-width: 1000px) {

    .hamburger {

        display: block;

        font-size: 30px;

        position: absolute;

        left: 20px;

        top: 50%;

        transform: translateY(-50%);

    }

    .nav-links {

        display: none;

        flex-direction: column;

        position: fixed;

        top: 60px;

        left: 0;

        width: 100%;

        background: #121212;

        padding: 20px 0;

        gap: 20px;

        z-index: 1000;

        align-items: center;

        justify-content: center;

        margin: 0;

        transform: none;

        transition: opacity 0.3s ease, transform 0.3s ease;

        opacity: 0;

        transform: translateY(-10px);

    }

    .nav-links.active {

        display: flex;

        opacity: 1;

        transform: translateY(0);

    }

    .nav-links li a {

        font-size: clamp(18px, 4vw, 20px);

        text-align: center;

        padding: 15px;

    }

    .chain-selector {

        margin-left: auto;

    }

    .chain-form {

        justify-content: flex-end;

    }

    .main-container {

        max-width: 700px;

        padding: 0 10px;

    }

}



@media (max-width: 600px) {

    .controls {

        flex-direction: column;

        align-items: stretch;

        gap: 15px;

    }

    .search-container {

        max-width: 100%;

    }

    .leaderboard-table {

        min-width: 600px;

    }

    .leaderboard-table td {

        padding: 8px 10px; /* Noch kleinere Padding für Mobil */

        font-size: clamp(12px, 2.5vw, 13px);

    }

}



.top-stats .profit-positive {

    color: #00ff00;

}



.top-stats .profit-negative {

    color: #ff0000;

}



.top-stats .buy-count {

    color: #ff0000;

}



.top-stats .sell-count {

    color: #00ff00;

}