:root {
    color-scheme:dark;
    --bg:#101519;
    --panel:#1a2227;
    --line:#354047;
    --text:#edf1ee;
    --muted:#a4b0b3;
    --mint:#a6edcd;
    --gold:#e6bd76;
    font-family:Arial,Helvetica,sans-serif;
    font-synthesis:none
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--bg);
    color:var(--text)
}
button,a {
    -webkit-tap-highlight-color:transparent
}
button {
    font:inherit;
    cursor:pointer
}
button,a {
    touch-action:manipulation
}
button:disabled {
    cursor:default;
    opacity:.38
}
a {
    color:inherit
}
button:focus-visible,a:focus-visible {
    outline:3px solid #b9f5e0;
    outline-offset:4px
}
button {
    border:0
}
p,h1,h2 {
    margin:0
}
[hidden] {
    display:none!important
}
.sr-only {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    white-space:nowrap;
    border:0
}
.cavern {
    position:fixed;
    inset:0;
    overflow:hidden;
    pointer-events:none;
    z-index:-1;
    background:radial-gradient(ellipse at 50% 10%,#24343655,transparent 60%),#101519
}
.cave-scene {
    width:100%;
    height:100%;
    object-fit:cover
}
.glow {
    position:absolute;
    width:550px;
    height:550px;
    right:-40px;
    top:-40px;
    background:radial-gradient(circle,#d8a24d16,transparent 66%)
}
.ambient-gem {
    position:absolute;
    filter:drop-shadow(0 0 19px #529ed622);
    animation:glint 8s ease-in-out infinite
}
.gem-one {
    left:4%;
    bottom:12%;
    width:55px;
    transform:rotate(-23deg)
}
.gem-two {
    right:4%;
    bottom:15%;
    width:39px;
    transform:rotate(17deg);
    animation-delay:-3s
}
.gem-three {
    right:9%;
    bottom:4%;
    width:26px;
    transform:rotate(-12deg);
    animation-delay:-6s
}
.dust {
    position:absolute;
    width:3px;
    height:3px;
    background:#ddc193;
    opacity:0;
    animation:fall 17s linear infinite;
    left:18%;
    top:6%
}
.dust-two {
    left:84%;
    animation-delay:-6s;
    animation-duration:23s
}
.dust-three {
    left:60%;
    animation-delay:-10s;
    animation-duration:19s
}
.dust-four {
    left:34%;
    width:2px;
    height:2px;
    animation-delay:-4s;
    animation-duration:21s
}
.dust-five {
    left:73%;
    animation-delay:-18s;
    animation-duration:26s
}
.dust-six {
    left:46%;
    width:2px;
    height:2px;
    animation-delay:-13s;
    animation-duration:18s
}
@keyframes fall {
    0% {
        transform:translate(0,0);
        opacity:0
    }
    20%,70% {
        opacity:.4
    }
    100% {
        transform:translate(-35px,80vh);
        opacity:0
    }
}
@keyframes glint {
    0%,80%,100% {
        filter:brightness(1) drop-shadow(0 0 10px #529ed611)
    }
    88% {
        filter:brightness(1.5) drop-shadow(0 0 18px #80d5e844)
    }
}
.shell {
    height:100dvh;
    overflow:hidden;
    max-width:1536px;
    margin:0 auto;
    padding:26px 40px 32px;
    display:flex;
    flex-direction:column;
    gap:20px
}
.brand {
    display:flex;
    align-items:center;
    gap:12px;
    flex:none;
    height:57px
}
.wordmark {
    font-family:Impact,"Arial Black",Arial,sans-serif;
    font-weight:950;
    letter-spacing:.025em;
    color:#e7ebe3;
    text-shadow:0 2px 0 #697b76,0 5px 0 #283b36,0 7px 0 #060d10;
    transform:rotate(-3deg)
}
.brand .wordmark {
    font-size:46px
}
.brand img {
    width:48px;
    height:48px
}
.banner {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    background:#3b3023;
    border:1px solid #816943;
    border-radius:8px;
    padding:8px 12px 8px 16px;
    font-size:13px;
    line-height:1.5;
    flex:none;
    color:#ffe2b2
}
.icon-button {
    display:inline-grid;
    place-items:center;
    background:transparent;
    color:var(--text);
    width:32px;
    height:32px;
    border-radius:5px;
    font-size:19px;
    flex:none
}
.icon-button:hover:enabled {
    background:#ffffff0d
}
.loading {
    margin:auto;
    color:var(--muted)
}
.hero {
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    flex:1;
    padding:0 0 45px;
    text-align:center;
    position:relative
}
.shell[data-view=signed-out] .brand {
    visibility:hidden;
    height:10px
}
.hero-art {
    position:relative;
    width:240px;
    height:170px
}
.hero-pickaxes {
    position:absolute;
    width:195px;
    height:195px;
    top:-10px;
    left:23px;
    transform:rotate(-5deg);
    filter:drop-shadow(0 12px 8px #0006)
}
.artifact-halo {
    position:absolute;
    inset:-70px;
    background:radial-gradient(ellipse,#79c7ad19,transparent 66%)
}
.hero-diamond {
    position:absolute;
    width:44px;
    right:5px;
    bottom:12px;
    transform:rotate(15deg);
    animation:glint 7s infinite
}
.hero-relic {
    position:absolute;
    width:30px;
    left:0;
    top:58px;
    transform:rotate(-15deg)
}
.hero h1 {
    font-size:clamp(100px,12dvh,154px);
    line-height:1.2;
    margin-top:2px;
    margin-bottom:25px
}
.hero-description {
    max-width:730px;
    font-size:17px;
    color:#bfc8c7;
    line-height:1.7;
    text-wrap:balance
}
.hero-description strong {
    color:var(--mint);
    font-family:monospace;
    font-weight:600
}
.primary,.secondary,.quiet,.danger {
    font-size:13px;
    line-height:20px;
    font-weight:700;
    padding:10px 23px;
    border-radius:6px;
    transition:background .15s
}
.primary {
    background:var(--mint);
    color:#14392d;
    box-shadow:inset 0 1px #f0fff580,0 2px 0 #628b7c
}
.primary:hover:enabled,.connect:hover {
    background:#c2f8df
}
.secondary {
    background:#2c363c;
    color:#e6ebea;
    border:1px solid #475259
}
.secondary:hover:enabled {
    background:#3a474d
}
.quiet {
    background:transparent;
    color:#b4bec0;
    padding:10px 12px
}
.quiet:hover:enabled {
    background:#ffffff08;
    color:#f3c3bc
}
.danger {
    background:#edb1a7;
    color:#431e18
}
.connect {
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    gap:10px;
    min-width:228px;
    padding:16px 29px 16px 17px;
    margin-top:31px;
    font-size:17px;
    border-radius:7px
}
.connect svg {
    width:22px;
    height:22px
}
.consent {
    max-width:435px;
    color:var(--muted);
    font-size:12px;
    line-height:1.8;
    margin-top:21px;
    text-wrap:balance
}
.powered {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    margin-top:18px;
    color:var(--muted);
    font-size:12px;
    line-height:1.4;
    text-decoration:none;
    border-radius:6px
}
.powered:hover {
    text-decoration:underline
}
.powered:focus-visible,.refresh-note a:focus-visible {
    outline:2px solid #8aa696;
    outline-offset:3px
}
.powered img {
    display:block;
    width:auto;
    height:64px;
    max-width:100%
}
.controls {
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:24px;
    padding:24px 28px;
    background:radial-gradient(ellipse at 5% 0,#b88e3820,transparent 65%),linear-gradient(120deg,#20282b,#1b2328);
    border:1px solid #424a47;
    border-radius:10px;
    box-shadow:0 7px 22px #0002,inset 0 1px #ffffff04;
    flex:none
}
.channel {
    display:flex;
    align-items:center;
    gap:15px;
    min-width:220px
}
.avatar-wrap {
    position:relative;
    width:54px;
    height:54px;
    flex:none;
    border-radius:12px;
    background:#38483e;
    box-shadow:0 0 0 1px #a7bba238,0 0 24px #ddb35912;
    display:grid;
    place-items:center;
    color:#e1eccc;
    font-weight:bold;
    font-size:24px
}
.avatar-wrap>img {
    width:100%;
    height:100%;
    border-radius:12px;
    object-fit:cover
}
.channel-dot {
    position:absolute;
    width:12px;
    height:12px;
    border:3px solid #222c2b;
    background:var(--mint);
    border-radius:50%;
    right:-3px;
    bottom:0
}
.channel-identity {
    min-width:0
}
.channel h1 {
    font-size:19px;
    letter-spacing:-.3px;
    overflow-wrap:anywhere
}
.channel p {
    color:var(--muted);
    font-size:12px;
    margin-top:6px;
    overflow-wrap:anywhere
}
.bot-status {
    display:flex;
    align-items:center;
    gap:10px;
    flex:1;
    font-size:12px;
    line-height:1.6;
    color:#c0c9c9;
    min-width:200px
}
.bot-status strong {
    color:#e4eee8;
    font-weight:600
}
.status-dot {
    width:7px;
    height:7px;
    background:var(--mint);
    border-radius:50%;
    flex:none;
    box-shadow:0 0 12px #a6edcd30
}
.status-dot.pending {
    width:13px;
    height:13px;
    background:none;
    border:2px solid #728880;
    border-top-color:var(--mint);
    animation:spin 1s linear infinite;
    box-shadow:none
}
.status-dot.inactive {
    background:#829297
}
.status-dot.error {
    background:#f4bd8c
}
#bot-error {
    color:#f4bd8c;
    overflow-wrap:anywhere
}
#status-text {
    overflow-wrap:anywhere
}
@keyframes spin {
    to {
        transform:rotate(360deg)
    }
}
.actions {
    display:flex;
    align-items:center;
    gap:9px;
    margin-left:auto
}
.own-channel {
    margin-left:auto;
    font-size:12px;
    text-underline-offset:5px;
    color:#bed3cb
}
.own-channel span {
    margin-left:8px
}
.confirmation {
    flex-basis:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #435047;
    padding-top:15px;
    gap:20px;
    color:#d7deda;
    font-size:13px;
    line-height:1.5
}
.confirmation>div {
    display:flex;
    gap:8px;
    flex:none
}
.leaderboard {
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    max-height:650px;
    background:linear-gradient(110deg,#1b2327f5,#171f24f5);
    border:1px solid #344148;
    border-radius:10px;
    overflow:hidden;
    box-shadow:0 12px 45px #0002
}
.board-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:23px 27px 20px;
    flex:none
}
.eyebrow {
    font-size:9px;
    letter-spacing:2px;
    color:#9aaea5;
    font-weight:700;
    display:block;
    margin-bottom:7px
}
h2 {
    font-size:23px;
    font-weight:700;
    letter-spacing:-.6px
}
.miner-count {
    font-size:12px;
    color:var(--muted);
    font-variant-numeric:tabular-nums
}
.table-wrap {
    flex:1;
    min-height:0;
    container-type:size
}
table {
    width:100%;
    border-collapse:collapse;
    table-layout:fixed;
    text-align:right;
    font-size:13px;
    font-variant-numeric:tabular-nums
}
th {
    font-weight:400;
    height:53px;
    color:var(--muted);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    background:#111a1f66;
    font-size:11px
}
th:first-child,td:first-child {
    text-align:center;
    width:65px
}
th:nth-child(2),td:nth-child(2) {
    width:21%;
    text-align:left
}
th:last-child,td:last-child {
    width:12%;
    padding-right:27px
}
th button {
    color:var(--muted);
    background:none;
    width:100%;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:6px;
    font-size:11px;
    padding:12px 8px 12px 0;
    white-space:nowrap
}
th button:hover {
    color:#e8efed
}
th button img {
    width:18px;
    height:18px
}
th .sort-arrow {
    font-size:10px;
    width:8px;
    flex:none;
    opacity:0
}
th[aria-sort=descending],th[aria-sort=ascending] {
    background:#28393155;
    box-shadow:inset 0 -2px var(--mint)
}
th[aria-sort=descending] button,th[aria-sort=ascending] button {
    color:var(--mint)
}
th[aria-sort=descending] .sort-arrow,th[aria-sort=ascending] .sort-arrow {
    opacity:1
}
.item-relic .item-name {
    white-space:normal;
    max-width:39px;
    text-align:left;
    line-height:1.2
}
td {
    border-bottom:1px solid #303b416b;
    padding:3px 22px 3px 0;
    color:#bbc6c9
}
tbody tr:last-child td {
    border-bottom:0
}
@media(min-width:900px) {
    td {
        padding-top:0;
        padding-bottom:0
    }
    tbody tr {
        height:min(45px,calc((100cqh - var(--thead-h,53.4px) - 1px) / 10))
    }
}
tbody tr:hover {
    background:#ffffff03
}
td.miner {
    font-weight:600;
    color:#e1e8e6;
    font-size:13px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}
.miner-initial {
    display:inline-grid;
    place-items:center;
    width:25px;
    height:25px;
    margin-right:11px;
    background:#334046;
    border:1px solid #52626855;
    color:#becfcb;
    font-size:10px;
    border-radius:6px;
    font-weight:500;
    vertical-align:middle
}
.rank-number {
    display:inline-grid;
    place-items:center;
    width:26px;
    height:26px;
    font-size:12px;
    color:#a4b4ba
}
.rank-1 .rank-number {
    background:#d3aa6020;
    border:1px solid #b28c4855;
    color:#eac478;
    border-radius:6px
}
.rank-2 .rank-number {
    background:#c0d0da12;
    border:1px solid #a9bcc83b;
    color:#d3e3ea;
    border-radius:6px
}
.rank-3 .rank-number {
    background:#be8d6b18;
    border:1px solid #be8d6b44;
    color:#daa584;
    border-radius:6px
}
tr.rank-1 {
    background:linear-gradient(90deg,#bea35408,transparent)
}
.points {
    font-weight:700;
    color:var(--mint);
    background:#a6edcd03
}
.cell-gem {
    display:none
}
.board-footer {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 24px;
    border-top:1px solid var(--line);
    flex:none;
    gap:10px
}
.refresh-note {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:10px;
    color:#99abae
}
.refresh-note a {
    color:inherit;
    text-decoration:none;
    border-radius:3px
}
.refresh-note a:hover {
    text-decoration:underline
}
.refresh-note>span:first-child {
    height:5px;
    width:5px;
    background:#8aa696;
    border-radius:50%
}
.pagination {
    display:flex;
    align-items:center;
    gap:14px;
    font-size:11px;
    color:#c5cece
}
.pagination button {
    border:1px solid #3a464c;
    font-size:16px;
    width:30px;
    height:28px
}
.board-message {
    padding:30px;
    text-align:center;
    margin:auto;
    line-height:1.7;
    color:var(--muted);
    overflow-wrap:anywhere
}
.no-script {
    padding:20px;
    text-align:center
}
@media(min-width:900px) and (max-height:760px) {
    .shell {
        padding:15px 32px 18px;
        gap:13px
    }
    .brand {
        height:43px
    }
    .brand .wordmark {
        font-size:37px
    }
    .brand img {
        width:39px;
        height:39px
    }
    .controls {
        padding:16px 22px;
        gap:18px
    }
    .avatar-wrap {
        width:44px;
        height:44px
    }
    .board-heading {
        padding:14px 23px
    }
    .eyebrow {
        font-size:8px;
        margin-bottom:5px
    }
    h2 {
        font-size:21px
    }
    th {
        height:43px
    }
    td {
        font-size:12px
    }
    .miner-initial {
        width:21px;
        height:21px
    }
    .rank-number {
        height:22px;
        width:22px
    }
    .board-footer {
        padding:8px 20px
    }
    .hero-art {
        height:125px;
        width:200px
    }
    .hero-pickaxes {
        width:145px;
        height:145px;
        left:28px
    }
    .hero h1 {
        font-size:100px;
        margin-bottom:15px
    }
    .hero {
        padding-bottom:20px
    }
    .hero-description {
        font-size:15px
    }
    .connect {
        margin-top:23px
    }
    .consent {
        margin-top:16px
    }
    .confirmation {
        padding-top:10px
    }
    .confirmation button {
        padding:6px 17px
    }
}
@media(min-width:900px) and (max-width:1250px) {
    .shell {
        padding-left:24px;
        padding-right:24px
    }
    .controls {
        gap:16px;
        padding:18px
    }
    .channel {
        min-width:190px
    }
    .channel h1 {
        font-size:17px
    }
    .actions {
        gap:5px
    }
    .actions button {
        padding:9px 15px
    }
    .bot-status {
        min-width:180px
    }
    th:nth-child(2),td:nth-child(2) {
        width:18%
    }
    th:first-child,td:first-child {
        width:45px
    }
    th button {
        gap:3px;
        font-size:10px
    }
    th button img {
        width:15px;
        height:15px
    }
    td {
        padding-right:15px
    }
}
@media(max-width:899px) {
    .shell {
        height:auto;
        min-height:100dvh;
        overflow:visible;
        padding:20px 16px 24px;
        gap:20px
    }
    .brand {
        height:42px;
        gap:8px
    }
    .brand .wordmark {
        font-size:38px
    }
    .brand img {
        width:39px;
        height:39px
    }
    .cave-scene {
        object-position:58% center
    }
    .gem-one {
        left:0;
        width:30px
    }
    .gem-two {
        right:0;
        width:26px
    }
    .gem-three {
        display:none
    }
    .glow {
        right:-260px
    }
    .shell[data-view=signed-out] {
        min-height:100dvh
    }
    .shell[data-view=signed-out] .brand {
        height:0
    }
    .hero {
        padding:25px 0 65px
    }
    .hero-art {
        width:220px;
        height:165px
    }
    .hero-pickaxes {
        width:185px;
        height:185px;
        left:17px
    }
    .hero h1 {
        font-size:112px;
        margin-bottom:25px
    }
    .hero-description {
        font-size:16px;
        line-height:1.8;
        max-width:420px
    }
    .consent {
        max-width:315px;
        font-size:12px
    }
    .connect {
        margin-top:28px
    }
    .controls {
        padding:20px;
        gap:20px;
        border-radius:9px
    }
    .channel {
        min-width:0;
        width:100%
    }
    .channel h1 {
        font-size:20px
    }
    .bot-status {
        width:100%;
        flex:none;
        font-size:12px;
        min-width:0
    }
    .actions {
        width:100%;
        margin:0;
        gap:8px
    }
    .actions .primary,.actions .secondary {
        flex:1
    }
    .actions .quiet {
        padding:10px
    }
    .own-channel {
        margin-left:0
    }
    .confirmation {
        flex-direction:column;
        align-items:flex-start;
        gap:14px;
        font-size:12px
    }
    .confirmation>div {
        width:100%
    }
    .confirmation button {
        flex:1
    }
    .leaderboard {
        flex:none;
        max-height:none;
        overflow:visible
    }
    .board-heading {
        padding:22px 18px
    }
    .eyebrow {
        font-size:8px
    }
    h2 {
        font-size:23px
    }
    .miner-count {
        font-size:11px
    }
    .table-wrap {
        flex:none
    }
    table,thead,tbody {
        display:block;
        width:100%;
        height:auto
    }
    thead tr {
        display:grid;
        grid-template-columns:repeat(4,minmax(0,1fr));
        padding:8px 10px;
        background:#111a1f66;
        border-block:1px solid var(--line);
        gap:5px
    }
    th {
        height:auto;
        background:none;
        border:0;
        border-radius:4px
    }
    th:first-child,th:nth-child(2) {
        position:absolute;
        width:1px;
        height:1px;
        padding:0;
        overflow:hidden;
        clip:rect(0,0,0,0)
    }
    th:last-child {
        width:auto;
        padding:0
    }
    th button {
        padding:8px 3px;
        justify-content:center;
        gap:4px;
        font-size:9px;
        min-height:35px
    }
    th button img {
        width:16px;
        height:16px
    }
    th .sort-arrow {
        width:6px;
        font-size:9px
    }
    .item-relic .item-name {
        max-width:30px
    }
    tbody tr {
        display:grid;
        grid-template-columns:repeat(7,minmax(0,1fr));
        padding:14px 12px 12px;
        row-gap:13px;
        border-bottom:1px solid #344148
    }
    tbody tr:last-child {
        border-bottom:0
    }
    td {
        display:block;
        width:auto!important;
        border:0;
        padding:0;
        text-align:center;
        font-size:10px;
        overflow-wrap:anywhere
    }
    td:first-child {
        grid-column:1;
        grid-row:1;
        text-align:left;
        padding-left:1px;
        align-self:center
    }
    td.miner {
        grid-column:2/6;
        grid-row:1;
        align-self:center;
        font-size:12px;
        max-width:100%
    }
    .miner-initial {
        display:none
    }
    td.points {
        grid-column:6/8;
        grid-row:1;
        padding:0;
        text-align:right;
        align-self:center;
        font-size:12px;
        background:none
    }
    .cell-gem {
        display:block;
        width:17px;
        height:17px;
        margin:0 auto 6px
    }
    .rank-number {
        width:23px;
        height:23px;
        font-size:11px
    }
    .board-footer {
        padding:12px 13px;
        gap:8px
    }
    .powered img {
        height:48px
    }
    .refresh-note {
        font-size:9px;
        max-width:160px;
        line-height:1.5;
        gap:6px
    }
    .pagination {
        gap:8px;
        font-size:10px
    }
    .pagination button {
        width:28px;
        height:29px
    }
    .board-message {
        font-size:13px;
        padding:32px 20px
    }
    .banner {
        font-size:12px;
        gap:8px
    }
    .loading {
        padding:120px 0;
        text-align:center
    }
}
@media(prefers-reduced-motion:reduce) {
    *,*::before,*::after {
        animation:none!important;
        transition:none!important;
        scroll-behavior:auto!important
    }
}
@media(min-width:900px) {
    .controls:has(.confirmation:not([hidden])) .bot-status,.controls:has(.confirmation:not([hidden])) .actions {
        display:none
    }
    .confirmation {
        flex:1;
        border:0;
        padding-top:0
    }
}
@media(min-width:900px) and (max-height:760px) {
    th button {
        padding-top:6px;
        padding-bottom:6px
    }
    th {
        height:38px
    }
    td {
        padding-top:2px;
        padding-bottom:2px
    }
    .table-wrap {
        --thead-h:41.4px
    }
    .rank-number {
        height:20px;
        width:20px
    }
    .confirmation {
        padding-top:0
    }
}