:root {
    --bg: #161a28;
    --panel: #242849cc;
    --accent: #19ff85;
    --accent2: #26ffe7;
    --btn: #262b37;
    --radius: 22px;
    --shadow: 0 0 36px #000a;
    --mobile-width: 460px;
}

html, body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Arial, sans-serif;
    background: radial-gradient(ellipse at center, var(--bg) 60%, #10111c 100%);
    min-height: 100vh;
    color: #e8f6ff;
}

.main-wrap {
    max-width: var(--mobile-width);
    margin: 0 auto;
    padding: 32px 8px 24px 8px;
}

.panel {
    background: var(--panel);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 26px 18px 22px 18px;
    margin-bottom: 22px;
    text-align: center;
}

h1 {
    font-size: 2.3em;
    letter-spacing: .01em;
    margin: 0 0 12px 0;
    font-weight: 900;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}

h2 {
    font-size: 1.24em;
    font-weight: 500;
    color: #e3f3ff;
    margin: 18px 0 8px 0;
}

.subtitle {
    color: #a3ffe6;
    font-size: 1.05em;
    margin-bottom: 18px;
}

.actions {
    margin: 28px 0 10px 0;
}

.actions .btn {
    display: inline-block;
    background: linear-gradient(90deg, var(--accent2), var(--accent));
    color: #161a28;
    font-weight: 700;
    padding: 13px 24px;
    font-size: 1.19em;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    margin: 6px 10px 6px 0;
    text-decoration: none;
    box-shadow: 0 0 20px #19ff8555;
    transition: transform 0.1s;
}
.actions .btn:active { transform: scale(0.97); }

.hold-block, .game-block {
    background: #202233cc;
    border-radius: var(--radius);
    padding: 20px 16px 14px 16px;
    margin-bottom: 20px;
    box-shadow: 0 0 16px #00ffd944;
}

.features-list {
    text-align: left;
    margin: 0 auto 14px auto;
    max-width: 370px;
}

.features-list li {
    margin-bottom: 9px;
    font-size: 1.03em;
    list-style: none;
    padding-left: 0.7em;
    position: relative;
}

.features-list li::before {
    content: "✓";
    color: var(--accent);
    font-weight: bold;
    position: absolute;
    left: -1.2em;
}

.howto-block {
    background: #22253d;
    border-radius: 18px;
    padding: 18px 15px 12px 15px;
    margin: 14px 0 16px 0;
    font-size: 1em;
}

#topPlayers {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-bottom: 12px;
}
.top-avatar-block {
    text-align: center;
}
.top-avatar-block img {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    border: 3px solid #FFD700;
    box-shadow: 0 0 8px #0008;
    margin-bottom: 5px;
}
.top-1 { border-color: #FFD700 !important; }
.top-2 { border-color: #B8B8FF !important; }
.top-3 { border-color: #ff9900 !important; }

.footer {
    color: #66b9ff;
    font-size: 0.95em;
    text-align: center;
    margin: 38px 0 0 0;
}

.telegram-ico {
    width: 1.15em;
    height: 1.15em;
    margin-right: 7px;
    vertical-align: -0.18em;
}

@media (max-width: 540px) {
    .main-wrap { max-width: 100vw; padding: 14px 0 18px 0; }
    .panel { padding: 16px 5px 13px 5px; }
    h1 { font-size: 1.52em; }
    h2 { font-size: 1.06em; }
    .hold-block, .game-block { padding: 12px 4vw 9px 4vw; }
    .howto-block { font-size: .97em; }
    #topPlayers { gap: 8px; }
}




.top3-wrapper {
    text-align: center;
    padding: 20px 0 0 0;
}

.top3-title {
    font-size: 1.3em;
    margin-bottom: 8px;
    font-weight: bold;
}

.top3-podiums {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 10px;
}

.podium {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #23283a;
    border-radius: 18px 18px 8px 8px;
    box-shadow: 0 4px 20px #0003;
    position: relative;
    padding: 18px 12px 8px 12px;
    min-width: 110px;
}

.podium .medal {
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 50%;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    margin-top: -12px;
}

.podium.first    { z-index:2; transform: scale(1.13) translateY(-10px);}
.podium.second   { z-index:1; transform: scale(1.01) translateY(16px);}
.podium.third    { z-index:1; transform: scale(0.97) translateY(24px);}

.medal.gold      { background: linear-gradient(145deg, #FFD700, #fffbe7 60%, #ffe57f 100%); color: #c49a1d;}
.medal.silver    { background: linear-gradient(145deg, #B8B8FF, #f4f4fa 60%, #c8c8fc 100%); color: #536aab;}
.medal.bronze    { background: linear-gradient(145deg, #ff9900, #ffe2b0 60%, #fbc076 100%); color: #ab6c00;}

.avatar {
    width: 60px; height: 60px;
    border-radius: 50%;
    border: 3px solid #23283a;
    box-shadow: 0 0 0 3px #fff4, 0 0 16px #0006;
    margin-bottom: 4px;
}

.username {
    margin: 0 0 5px 0;
    font-size: 1.03em;
    color: #fff;
    font-weight: 600;
    text-shadow: 0 1px 4px #0008;
}

.best-time {
    background: #2bedc0;
    color: #13343f;
    padding: 3px 18px;
    border-radius: 16px;
    font-size: 1.05em;
    margin-bottom: 4px;
    font-weight: bold;
    letter-spacing: 1px;
    box-shadow: 0 2px 16px #28e6be33;
}

.reward {
    font-size: 1.18em;
    font-weight: bold;
    margin-top: 1px;
    margin-bottom: 0;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px #000a;
}

.reward.gold { color: #FFD700; }
.reward.silver { color: #B8B8FF; }
.reward.bronze { color: #ff9900; }

.top3-total {
    margin-top: 7px;
    font-size: 1.03em;
    color: #bbb;
}