:root {
    font-family: system-ui,system-ui,-apple-system,Microsoft YaHei,sans-serif;
    color: #edf0e8;
    background: #0b1419;
    font-synthesis: none;
    font-size: 14px;
    --gold: #f3c365;
    --muted: #8fa6aa;
    --panel: #17272e;
    --line: #2b3d43;
    --green: #8dbca0
}

* {
    box-sizing: border-box
}

body {
    margin: 0
}

button,input {
    font: inherit
}

button {
    cursor: pointer;
    touch-action: manipulation;
    color: inherit;
    border: 0
}

button:disabled {
    cursor: default;
    opacity: .38
}

button:focus-visible,input:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px
}

button:active:not(:disabled) {
    transform: translateY(1px)
}

a {
    color: var(--gold)
}

.boot {
    padding: 40px
}

.shell {
    width: min(100%,480px);
    height: 100dvh;
    min-height: 0;
    margin: auto;
    display: flex;
    flex-direction: column;
    position: relative;
    background: #111e25;
    overflow: hidden;
    box-shadow: 0 0 130px #0009
}

.masthead {
    height: 73px;
    flex-shrink: 0;
    padding: 15px 20px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--line);
    background: #142229
}

.brand {
    display: flex;
    align-items: center;
    gap: 9px
}

.brand-mark {
    width: 31px;
    height: 36px;
    color: var(--gold)
}

.brand strong {
    display: block;
    font-size: 17px;
    letter-spacing: 1px
}

.eyebrow {
    font-family: system-ui,sans-serif;
    font-size: 9px;
    letter-spacing: 2.1px;
    color: var(--muted);
    text-transform: uppercase;
    margin-top: 3px
}

.header-right {
    display: flex;
    align-items: center;
    gap: 9px
}

.tag {
    font-size: 10px;
    color: #b6cbbb;
    padding: 4px 7px;
    border: 1px solid #486455;
    border-radius: 5px;
    white-space: nowrap
}

.icon-button {
    background: transparent;
    color: #a8bdc0;
    font-size: 20px;
    padding: 6px
}

.balance-strip {
    display: flex;
    justify-content: space-between;
    padding: 11px 20px 12px;
    background: #142229;
    flex-shrink: 0
}

.caption {
    font-size: 10px;
    color: var(--muted);
    letter-spacing: .4px
}

.coin-line {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 2px
}

.number {
    font-family: system-ui,sans-serif;
    font-size: 28px;
    letter-spacing: -1px;
    font-weight: 600;
    line-height: 1.1
}

.unit {
    font-size: 11px;
    color: var(--gold)
}

.pending {
    max-width: 46%;
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px
}

.pending strong {
    color: #debf89;
    font-weight: 500;
    font-size: 13px
}

.mine-wrap {
    position: relative;
    flex: 1;
    min-height: 170px;
    background: #132229;
    overflow: hidden
}

.game-canvas {
    height: 100%;
    width: 100%;
    touch-action: none
}

.game-canvas canvas {
    display: block
}

.mine-top {
    position: absolute;
    top: 13px;
    left: 15px;
    right: 15px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none
}

.depth-badge {
    background: #101c23d9;
    border: 1px solid #69857d40;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 11px;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.depth-badge b {
    font-family: system-ui;
    font-size: 16px;
    margin-right: 4px
}

.live-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #8ec5a4;
    margin-right: 5px
}

.bag-chip {
    background: #101c23db;
    border: 1px solid #66847b42;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    pointer-events: auto
}

.bag-chip.full {
    color: #f08f7a
}

.scene-hint {
    position: absolute;
    bottom: 12px;
    left: 20px;
    right: 20px;
    text-align: center;
    font-size: 11px;
    color: #d3dacf;
    pointer-events: none;
    text-shadow: 0 2px 5px #000
}

.controls {
    flex-shrink: 0;
    padding: 12px 20px 11px;
    border-top: 1px solid #405049;
    background: linear-gradient(145deg,#1b3034,#15262d);
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between
}

.dpad {
    display: grid;
    grid-template-columns: 39px 39px 39px;
    grid-template-rows: 34px 34px 34px;
    gap: 3px;
    touch-action: none
}

.dpad button {
    border: 1px solid #3a5055;
    border-radius: 8px;
    background: #243d43;
    color: #d6ded2;
    font-size: 18px;
    box-shadow: 0 2px #0b1a20;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none
}

.dpad button:active {
    background: #456054
}

.dpad .north {
    grid-column: 2
}

.dpad .west {
    grid-column: 1;
    grid-row: 2
}

.dpad .center {
    grid-column: 2;
    grid-row: 2;
    display: grid;
    place-items: center;
    color: #7e9995;
    font-size: 16px
}

.dpad .east {
    grid-column: 3;
    grid-row: 2
}

.dpad .south {
    grid-column: 2;
    grid-row: 3
}

.action-column {
    flex: 1;
    max-width: 240px;
    display: grid;
    gap: 8px
}

.primary {
    padding: 12px 15px;
    background: var(--gold);
    border-radius: 9px;
    color: #27302b;
    font-weight: 700;
    border: 1px solid #ffd68c;
    box-shadow: 0 3px #9f7e3a;
    min-height: 43px
}

.secondary {
    padding: 10px 12px;
    border: 1px solid #455952;
    background: #233a3c;
    border-radius: 9px;
    color: #d1ddcf;
    font-size: 12px;
    min-height: 38px
}

.secondary small {
    color: var(--muted);
    font-size: 10px;
    margin-left: 5px
}

.control-note {
    font-size: 9px;
    text-align: center;
    color: #8ba49d;
    letter-spacing: .4px
}

.nav {
    height: 62px;
    flex-shrink: 0;
    display: flex;
    padding: 7px 11px max(7px,env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: #101d24;
    justify-content: space-around
}

.nav button {
    background: none;
    display: flex;
    flex-direction: column;
    gap: 5px;
    align-items: center;
    color: #7f999f;
    font-size: 10px;
    min-width: 55px;
    padding: 3px
}

.nav button.active {
    color: var(--gold)
}

.nav svg {
    width: 19px;
    height: 19px
}

.statusline {
    position: absolute;
    right: 15px;
    top: 65px;
    z-index: 2;
    font-size: 8px;
    color: #748e8e;
    pointer-events: none
}

.sprite {
    display: inline-block;
    background-image: url(/assets/mining-atlas.v1.webp);
    background-size: 400% 400%;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    vertical-align: middle
}

.sprite.s0 {
    background-position: 0 0
}

.sprite.s1 {
    background-position: 33.333% 0
}

.sprite.s2 {
    background-position: 66.667% 0
}

.sprite.s3 {
    background-position: 100% 0
}

.sprite.s4 {
    background-position: 0 33.333%
}

.sprite.s5 {
    background-position: 33.333% 33.333%
}

.sprite.s6 {
    background-position: 66.667% 33.333%
}

.sprite.s7 {
    background-position: 100% 33.333%
}

.sprite.s8 {
    background-position: 0 66.667%
}

.sprite.s9 {
    background-position: 33.333% 66.667%
}

.sprite.s10 {
    background-position: 66.667% 66.667%
}

.sprite.s11 {
    background-position: 100% 66.667%
}

.sprite.s12 {
    background-position: 0 100%
}

.sprite.s13 {
    background-position: 33.333% 100%
}

.sprite.s14 {
    background-position: 66.667% 100%
}

.sprite.s15 {
    background-position: 100% 100%
}

.scrim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #040c13b5;
    z-index: 20;
    display: flex;
    align-items: flex-end;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px)
}

.sheet {
    width: 100%;
    max-height: 89%;
    overflow: auto;
    background: #16272e;
    border: 1px solid #4c615b;
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    padding: 23px 22px max(24px,env(safe-area-inset-bottom));
    box-shadow: 0 -12px 90px #0005;
    scrollbar-width: thin;
    scrollbar-color: #51645e transparent
}

.sheet-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 17px
}

.sheet h2 {
    font-size: 21px;
    margin: 0;
    letter-spacing: .5px
}

.sheet h3 {
    font-size: 14px;
    margin: 21px 0 10px;
    color: #d9e1d5
}

.sheet p {
    font-size: 12px;
    line-height: 1.8;
    color: #a9bfbd
}

.sheet .close {
    background: #263b40;
    border: 1px solid #3f5557;
    border-radius: 50%;
    height: 29px;
    width: 29px;
    font-size: 20px;
    line-height: 20px
}

.sheet .primary {
    width: 100%;
    margin-top: 13px
}

.muted {
    color: var(--muted);
    font-size: 11px;
    line-height: 1.7
}

.kicker {
    font-family: system-ui;
    font-size: 10px;
    letter-spacing: 2px;
    color: var(--gold);
    margin: 5px 0 9px
}

.intro {
    align-items: center;
    padding: 22px
}

.intro .sheet {
    border-radius: 20px;
    border-bottom: 1px solid #4c615b;
    text-align: center;
    max-height: 94%;
    padding: 25px 23px
}

.intro-art {
    height: 140px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(ellipse,#66714250 0,transparent 68%)
}

.intro-art .sprite {
    height: 145px;
    width: 145px
}

.intro .sheet h2 {
    font-size: 27px;
    line-height: 1.4
}

.intro-steps {
    display: flex;
    justify-content: center;
    gap: 7px;
    color: #dec392;
    font-size: 11px;
    padding: 12px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: 17px
}

.notice {
    padding: 10px 12px;
    border: 1px solid #415651;
    border-radius: 9px;
    background: #203539;
    color: #b6cbbf;
    font-size: 11px;
    line-height: 1.7;
    margin: 12px 0
}

.notice.warning {
    border-color: #675047;
    background: #392f2c;
    color: #e6b19e
}

.grid-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 12px 0
}

.stat {
    padding: 13px;
    background: #20343b;
    border: 1px solid #30474c;
    border-radius: 10px
}

.stat b {
    font-family: system-ui;
    display: block;
    font-size: 23px;
    color: #eacb8c;
    margin: 6px 0
}

.row {
    display: flex;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid var(--line);
    padding: 12px 0
}

.row:last-child {
    border: 0
}

.row .details {
    flex: 1;
    min-width: 0
}

.row strong {
    font-size: 12px;
    font-weight: 500
}

.row small {
    display: block;
    color: var(--muted);
    font-size: 10px;
    margin-top: 5px;
    line-height: 1.5
}

.mini {
    padding: 7px 10px;
    font-size: 11px;
    background: #30464b;
    border: 1px solid #536663;
    border-radius: 6px;
    white-space: nowrap
}

.mini.gold {
    color: var(--gold)
}

.mini.danger {
    color: #f0aa94
}

.row-actions {
    display: flex;
    gap: 5px
}

.pill-tabs {
    display: flex;
    background: #102128;
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: 9px;
    margin-bottom: 15px;
    gap: 4px
}

.pill-tabs button {
    flex: 1;
    padding: 8px 3px;
    background: transparent;
    border-radius: 5px;
    font-size: 11px;
    color: var(--muted)
}

.pill-tabs button.selected {
    background: #344945;
    color: #e5ce9c
}

.empty {
    padding: 28px 0;
    text-align: center
}

.empty .sprite {
    height: 78px;
    width: 78px;
    opacity: .75
}

.empty h3 {
    margin: 10px
}

.equipment {
    border: 1px solid #4e6659;
    border-radius: 10px;
    padding: 12px 14px;
    background: #273f3f;
    margin-bottom: 14px;
    font-size: 12px;
    line-height: 1.7
}

.equipment small {
    display: block;
    color: #abc1b6
}

.toast {
    position: absolute;
    z-index: 40;
    bottom: 209px;
    left: 24px;
    right: 24px;
    padding: 11px 16px;
    background: #eddbb7;
    color: #263934;
    border: 1px solid #f6dfb2;
    box-shadow: 0 7px 20px #0005;
    border-radius: 10px;
    text-align: center;
    font-size: 12px;
    line-height: 1.5;
    animation: appear .15s ease-out;
    pointer-events: none
}

.toast.alert {
    background: #793f34;
    color: #ffe6cb;
    border-color: #ac7057
}

.offline {
    position: absolute;
    z-index: 60;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    place-items: center;
    background: #08141dde;
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    padding: 30px;
    text-align: center
}

.offline h2 {
    font-size: 22px
}

.offline p {
    color: #a8bdb9;
    line-height: 1.8
}

.form-field {
    margin: 15px 0
}

.form-field label {
    display: block;
    font-size: 11px;
    color: var(--muted);
    margin-bottom: 7px
}

.form-field input {
    background: #0e1e26;
    border: 1px solid #3b5155;
    color: #edf0e8;
    border-radius: 8px;
    padding: 12px;
    width: 100%;
    font-size: 13px;
    min-width: 0
}

.settings-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 15px 0;
    font-size: 12px
}

.switch {
    padding: 7px 12px;
    border-radius: 20px;
    background: #30464b;
    color: #a0b6b7;
    min-width: 70px
}

.switch.on {
    background: #587454;
    color: #eef3dc
}

.rank-num {
    font-family: system-ui;
    font-size: 19px;
    width: 30px;
    color: #dabe84
}

.linkish {
    color: var(--gold);
    background: none;
    padding: 6px 0;
    font-size: 11px
}

.reward-art {
    margin: 20px auto 5px;
    width: 100px;
    height: 100px;
    display: block;
    animation: pop .4s ease
}

.reward-value {
    font-family: system-ui;
    font-size: 45px;
    color: var(--gold);
    text-align: center
}

.surface-actions {
    display: flex;
    gap: 7px
}

.surface-actions .secondary {
    flex: 1;
    padding: 8px;
    font-size: 11px
}

.version-note {
    text-align: center;
    color: #5f797e;
    font-size: 9px;
    margin-top: 20px;
    line-height: 1.7
}

.danger-title {
    color: #f2ab8e
}

.desktop-label {
    display: none
}

.tap-mode .controls {
    min-height: 126px
}

.tap-mode .action-column {
    max-width: none
}

.tap-mode .dpad,.rotate-warning {
    display: none
}

.saved-error {
    color: #f3a68c!important
}

@keyframes appear {
    0% {
        opacity: 0;
        transform: translateY(5px)
    }

    to {
        opacity: 1;
        transform: none
    }
}

@keyframes pop {
    0% {
        transform: scale(.7) rotate(-8deg);
        opacity: .3
    }

    to {
        transform: scale(1)
    }
}

@media(min-width: 700px) {
    body {
        background:radial-gradient(ellipse at 50% 35%,#294039 0,#101c23 40%,#080e13 85%)
    }

    .shell {
        margin: 24px auto;
        height: calc(100dvh - 48px);
        max-height: 1000px;
        border: 1px solid #3a4c48;
        border-radius: 23px
    }

    .desktop-label {
        position: fixed;
        display: block;
        left: calc(50% + 280px);
        top: 48%;
        font-size: 11px;
        letter-spacing: 2px;
        line-height: 2;
        color: #82978e
    }

    .desktop-label b {
        display: block;
        color: #c5d2bf;
        font-size: 13px;
        font-weight: 500
    }

    .toast {
        bottom: 220px
    }
}

@media(max-height: 700px) {
    .masthead {
        height:61px;
        padding-top: 9px
    }

    .balance-strip {
        padding-top: 7px;
        padding-bottom: 8px
    }

    .controls {
        padding-top: 8px;
        padding-bottom: 8px
    }

    .dpad {
        grid-template-rows: 29px 29px 29px;
        grid-template-columns: 34px 34px 34px
    }

    .nav {
        height: 56px
    }

    .intro-art {
        height: 110px
    }

    .intro-art .sprite {
        width: 115px;
        height: 115px
    }

    .intro .sheet h2 {
        font-size: 24px
    }

    .intro .sheet {
        padding: 18px
    }

    .toast {
        bottom: 185px
    }
}

@media(orientation: landscape)and (max-width:900px)and (max-height:520px) {
    .rotate-warning {
        display:grid;
        position: fixed;
        z-index: 100;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: #102028;
        place-content: center;
        text-align: center;
        padding: 30px;
        gap: 15px
    }

    .rotate-warning strong {
        color: var(--gold);
        font-size: 24px
    }

    .shell {
        visibility: hidden
    }
}

.caption,.scene-hint,.control-note,.nav button,.tag,.row small,.linkish,.mini,.pill-tabs button,.form-field label,.version-note {
    font-size: 12px
}

.sheet p,.notice,.settings-row,.equipment,.row strong {
    font-size: 14px
}

.sheet h3,.form-field input {
    font-size: 16px
}

.surface-actions .secondary {
    font-size: 12px;
    min-height: 44px
}

.dpad {
    grid-template-columns: 42px 42px 42px;
    grid-template-rows: 38px 38px 38px
}

.dpad button {
    touch-action: none
}

.control-note {
    font-size: 11px;
    line-height: 1.5
}

.sheet .close {
    width: 38px;
    height: 38px;
    flex-shrink: 0
}

.mini {
    min-height: 36px
}

.share-link {
    width: 100%;
    margin-top: 8px;
    min-width: 0;
    padding: 12px;
    border: 1px solid #49625f;
    background: #0e1e26;
    border-radius: 8px;
    color: #c7d4cf;
    font-size: 14px
}

.working {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 55;
    display: grid;
    place-items: center;
    background: #09182188;
    color: #f5d38d;
    font-size: 16px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px)
}

.withdraw-record {
    display: grid;
    gap: 8px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line)
}

.withdraw-record small {
    color: var(--muted);
    font-size: 12px
}

.withdraw-record code {
    overflow-wrap: anywhere;
    font-size: 12px;
    color: #b9ccbf
}

.status {
    font-size: 13px;
    color: #e9c97c
}

.status.succeeded {
    color: #9bceaf
}

.status.failed {
    color: #e3a893
}

.stat b {
    overflow-wrap: anywhere
}

.row a {
    font-size: 12px;
    display: block;
    margin-top: 6px
}

#secondary-action {
    touch-action: none;
    user-select: none;
    -webkit-user-select: none
}

.intro .sheet p {
    font-size: 13px
}

@media(max-width: 374px) {
    .controls {
        gap:10px;
        padding-left: 12px;
        padding-right: 12px
    }

    .dpad {
        grid-template-columns: 36px 36px 36px
    }

    .brand strong {
        font-size: 16px
    }

    .caption {
        font-size: 11px
    }
}

.treasure-reveal {
    text-align: center;
    min-height: 242px
}

.treasure-stage {
    height: 155px;
    position: relative;
    display: grid;
    place-items: center;
    isolation: isolate
}

.treasure-halo {
    position: absolute;
    width: 215px;
    height: 180px;
    background: radial-gradient(ellipse,#f8cc703b,transparent 68%);
    opacity: .55
}

.treasure-chest {
    width: 108px;
    height: 108px;
    position: absolute;
    bottom: 15px
}

.opening .treasure-chest {
    animation: chest-rattle .18s ease-in-out 4
}

.treasure-coin {
    position: absolute;
    width: 74px;
    height: 74px;
    bottom: 73px;
    opacity: 0;
    transform: translateY(30px) scale(.3)
}

.revealed .treasure-chest {
    filter: brightness(1.3);
    transform: scale(.9);
    opacity: .7
}

.revealed .treasure-coin {
    animation: treasure-rise .55s cubic-bezier(.2,.8,.25,1.2) both
}

.revealed .treasure-halo {
    animation: treasure-glow .8s ease-out both
}

.treasure-spark {
    position: absolute;
    left: calc(50% + (var(--n) - 3.5)*24px);
    top: calc(30px + var(--row)*28px);
    font-size: 17px;
    color: #ffdc83;
    opacity: 0
}

.revealed .treasure-spark {
    animation: sparkle-out .8s ease-out both;
    animation-delay: calc(var(--n)*35ms)
}

.treasure-reveal .reward-value {
    animation: pop .3s ease-out
}

.reward-caption {
    min-height: 24px;
    text-align: center
}

.treasure-reveal .linkish {
    min-height: 40px;
    padding: 8px 20px
}

.celebration {
    position: sticky;
    bottom: 8px;
    margin-top: 16px;
    isolation: isolate;
    padding: 12px 14px;
    text-align: center;
    background: #344c3ef5;
    border: 1px solid #c9b678;
    border-radius: 10px;
    color: #ffe4a3;
    font-size: 15px;
    pointer-events: none;
    animation: appear .2s ease-out
}

.celebration i {
    position: absolute;
    left: calc(8% + var(--n)*9%);
    bottom: 15px;
    font-style: normal;
    opacity: 0;
    animation: coin-burst 1.15s ease-out both;
    animation-delay: calc(var(--n)*30ms)
}

.celebration .sprite {
    width: 19px;
    height: 19px
}

.celebration>span {
    position: relative;
    z-index: 2
}

.danger-title {
    animation: appear .4s ease-out
}

@keyframes chest-rattle {
    0%,to {
        transform: rotate(-3deg)
    }

    50% {
        transform: rotate(3deg) translateY(-2px)
    }
}

@keyframes treasure-rise {
    0% {
        opacity: 0;
        transform: translateY(35px) scale(.3)
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1)
    }
}

@keyframes treasure-glow {
    0% {
        opacity: .3;
        transform: scale(.8)
    }

    to {
        opacity: 1;
        transform: scale(1.25)
    }
}

@keyframes sparkle-out {
    0% {
        opacity: 0;
        transform: translateY(15px) scale(.2)
    }

    30% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateY(-22px) scale(1.1)
    }
}

@keyframes coin-burst {
    0% {
        opacity: 0;
        transform: translateY(5px) rotate(0)
    }

    20% {
        opacity: 1
    }

    to {
        opacity: 0;
        transform: translateY(-90px) rotate(160deg)
    }
}

@media(prefers-reduced-motion:reduce) {
    .treasure-reveal *,.celebration,.celebration *,.reward-art,.toast,.danger-title {
        animation: none!important
    }

    .revealed .treasure-coin {
        opacity: 1;
        transform: none
    }

    .revealed .treasure-halo {
        opacity: 1
    }

    .celebration i {
        display: none
    }
}

.controls,.controls *,.game-canvas,.game-canvas * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
    touch-action: none
}

.controls {
    -webkit-tap-highlight-color: transparent
}

.jump-button {
    width: 100%;
    min-height: 40px;
    border: 1px solid #739f8b;
    border-radius: 9px;
    background: #345949;
    color: #eff5d9;
    font-size: 14px;
    font-weight: 600;
    touch-action: none
}

.jump-button.held,.jump-button:active {
    background: #4a795e;
    box-shadow: inset 0 2px 5px #112a25
}

.dpad.held {
    filter: brightness(1.12)
}

.gear-art {
    display: inline-block;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background-image: url(/assets/equipment-atlas.v1.webp);
    background-size: 400% 200%;
    vertical-align: middle
}

.gear-0 {
    background-position: 0 0
}

.gear-1 {
    background-position: 33.333% 0
}

.gear-2 {
    background-position: 66.667% 0
}

.gear-3 {
    background-position: 100% 0
}

.gear-4 {
    background-position: 0 100%
}

.gear-5 {
    background-position: 33.333% 100%
}

.gear-6 {
    background-position: 66.667% 100%
}

.gear-7 {
    background-position: 100% 100%
}

.sheet {
    background: linear-gradient(145deg,#203239,#14252d 55%)
}

.sheet-head {
    gap: 12px
}

.sheet h2 {
    font-size: 22px
}

.sheet .muted {
    font-size: 12px;
    line-height: 1.7
}

.sheet .kicker {
    font-size: 10px;
    letter-spacing: 1.5px
}

.mine-heading {
    display: grid;
    gap: 7px
}

.drill-chip {
    display: flex;
    gap: 5px;
    align-items: center;
    max-width: 125px;
    pointer-events: auto;
    text-align: left;
    background: #102128e6;
    border: 1px solid #69857d40;
    border-radius: 9px;
    padding: 3px 7px 3px 2px
}

.drill-chip .gear-art {
    width: 31px;
    height: 31px
}

.drill-chip>span:last-child {
    font-size: 10px;
    letter-spacing: .5px;
    color: #d7dac7;
    line-height: 1.3
}

.drill-chip small {
    display: block;
    color: var(--gold);
    font-size: 11px;
    letter-spacing: 0
}

.bag-chip {
    min-width: 88px;
    padding: 8px 10px
}

.bag-meter {
    display: block;
    background: #40534e;
    height: 3px;
    border-radius: 3px;
    margin-top: 6px;
    overflow: hidden
}

.bag-meter>i {
    display: block;
    height: 100%;
    background: #c9be78;
    transition: width .2s ease
}

.bag-chip.full .bag-meter>i {
    background: #f08f7a
}

.scene-hint {
    background: #0e1b23c9;
    border: 1px solid #56696050;
    border-radius: 8px;
    padding: 7px 10px;
    bottom: 9px;
    left: 12px;
    right: 12px;
    font-size: 11px;
    line-height: 1.45
}

.danger-active .scene-hint {
    background: #702f2bf2;
    color: #ffe2c4;
    border-color: #d17860;
    font-weight: 700
}

.danger-active {
    box-shadow: inset 0 0 30px #b3433155
}

.nav button {
    position: relative;
    min-height: 43px
}

.nav button.active:before {
    content: "";
    position: absolute;
    top: -7px;
    width: 23px;
    height: 2px;
    border-radius: 2px;
    background: var(--gold)
}

.haul-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px 9px;
    padding: 14px;
    background: #233d3e;
    border: 1px solid #486658;
    border-radius: 13px;
    margin-bottom: 15px
}

.haul-summary>div:first-child {
    display: flex;
    align-items: center;
    gap: 7px
}

.haul-summary>div:nth-child(2) {
    text-align: right;
    align-self: center
}

.haul-summary span {
    display: block;
    color: #aec0b2;
    font-size: 12px
}

.haul-summary b {
    display: block;
    color: #f3d18e;
    font-family: system-ui,sans-serif;
    font-size: 24px;
    font-weight: 600;
    margin-top: 4px;
    line-height: 1.2
}

.haul-summary small {
    font: 12px system-ui,sans-serif;
    color: #b4c6bc
}

.capacity-track {
    height: 5px;
    background: #14292d;
    border-radius: 6px;
    grid-column: 1/-1;
    overflow: hidden
}

.capacity-track i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg,#90b69a,#dcc784);
    border-radius: inherit
}

.is-full .capacity-track i {
    background: #ea957b
}

.bag-filters {
    display: flex;
    gap: 5px;
    margin: 0 -2px 13px
}

.bag-filters button {
    flex: 1;
    min-width: 0;
    background: #10232b;
    border: 1px solid #344a4e;
    border-radius: 8px;
    color: #9fb4b3;
    padding: 8px 2px;
    font-size: 12px;
    min-height: 44px
}

.bag-filters small {
    display: block;
    margin-top: 3px;
    font: 11px system-ui;
    opacity: .7
}

.bag-filters .selected {
    background: #3a5046;
    color: #ffe0a1;
    border-color: #947e50
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(5,minmax(0,1fr));
    gap: 7px;
    max-height: 244px;
    overflow-y: auto;
    padding: 3px;
    scrollbar-width: thin;
    scrollbar-color: #576b62 transparent
}

.inventory-slot {
    min-width: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0f222b;
    border: 1px solid #31474e;
    border-radius: 10px;
    padding: 4px 1px 8px;
    min-height: 70px
}

.inventory-slot .sprite {
    width: 43px;
    height: 43px;
    max-width: 100%
}

.inventory-slot>span:last-of-type {
    font: 11px system-ui,system-ui;
    color: #d9cfad;
    line-height: 1.3
}

.inventory-slot>i {
    height: 2px;
    position: absolute;
    bottom: 2px;
    left: 25%;
    right: 25%;
    background: var(--rarity);
    opacity: .85
}

.inventory-slot.selected {
    background: #34473d;
    border-color: #f1cc81;
    box-shadow: 0 0 0 1px #f1cc8140
}

.item-inspector {
    border: 1px solid #506159;
    border-radius: 12px;
    background: linear-gradient(130deg,#2d423f,#213238);
    padding: 13px;
    margin-top: 14px
}

.item-heading {
    display: flex;
    align-items: center;
    gap: 10px
}

.item-heading>.sprite {
    width: 51px;
    height: 51px
}

.item-heading strong {
    display: block;
    font-size: 15px
}

.item-heading span {
    display: block;
    color: var(--rarity);
    font-size: 12px;
    margin-top: 6px
}

.item-inspector p {
    margin: 10px 0 0;
    font-size: 13px
}

.item-inspector p b {
    color: #f3d18e;
    font-weight: 500
}

.item-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px
}

.item-actions:empty {
    display: none
}

.item-actions .primary {
    margin: 0;
    flex: 1;
    font-size: 13px;
    padding: 10px
}

.item-actions .secondary {
    flex: 1;
    font-size: 13px;
    min-height: 43px
}

.shop-loadout {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid #4f655b;
    border-radius: 12px;
    padding: 11px;
    background: #29413e;
    margin-bottom: 14px
}

.shop-loadout>div {
    flex: 1;
    min-width: 0
}

.shop-loadout strong {
    display: block;
    font-size: 14px;
    line-height: 1.45
}

.shop-loadout small {
    display: block;
    font-size: 11px;
    color: #aabfb3;
    margin-top: 5px
}

.shop-loadout .kicker {
    display: block;
    margin: 0 0 5px
}

.shop-loadout>.gear-art {
    width: 51px;
    height: 51px
}

.wallet-mini {
    display: flex;
    flex-direction: column;
    align-items: center;
    font: 13px system-ui;
    color: var(--gold);
    max-width: 84px;
    overflow-wrap: anywhere
}

.wallet-mini .sprite {
    width: 26px;
    height: 26px
}

.gear-card {
    border: 1px solid #3a5052;
    border-radius: 13px;
    margin: 11px 0;
    background: #192d34;
    padding: 13px;
    overflow: hidden
}

.gear-card.equipped {
    border-color: #547466;
    background: #213b39
}

.gear-card.next-upgrade {
    border-color: #a79159;
    background: linear-gradient(130deg,#3e4232,#1c3035)
}

.gear-card-top {
    display: flex;
    align-items: center;
    gap: 13px
}

.gear-illustration {
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    position: relative;
    display: grid;
    place-items: center;
    background: radial-gradient(ellipse,#d7b86b23,transparent 70%)
}

.gear-illustration>.gear-art,.gear-illustration>.sprite {
    width: 84px;
    height: 84px;
    filter: drop-shadow(0 5px 5px #0004)
}

.gear-illustration>span:last-child:not(.sprite):not(.gear-art):not(.expansion-art) {
    position: absolute;
    bottom: -2px;
    font: 10px system-ui;
    letter-spacing: 1px;
    color: var(--rarity,#d0c596);
    padding: 2px 5px;
    background: #0f222ac9;
    border: 1px solid #54665c;
    border-radius: 4px
}

.gear-info {
    min-width: 0;
    flex: 1
}

.gear-state {
    font-size: 10px;
    letter-spacing: 1px;
    color: #a9bdb5
}

.next-upgrade .gear-state {
    color: #e6c981
}

.gear-info h3 {
    font-size: 16px;
    line-height: 1.4;
    margin: 5px 0 9px;
    color: #eee4cb
}

.gear-info p {
    font-size: 12px;
    line-height: 1.6;
    margin: 0
}

.gear-metrics {
    display: flex;
    gap: 18px
}

.gear-metrics span {
    font-size: 11px;
    color: #9ab3b0
}

.gear-metrics b {
    display: block;
    font: 19px system-ui;
    color: #d5d9bb;
    margin-top: 5px
}

.upgrade-comparison {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin-top: 12px;
    padding: 9px 10px;
    border-radius: 7px;
    background: #0e222a73;
    color: #9bb7b0;
    font-size: 10px;
    align-items: center;
    letter-spacing: .2px
}

.upgrade-comparison strong {
    font: 15px system-ui;
    color: #efd093;
    white-space: nowrap
}

.gear-card-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid #3e504b;
    margin-top: 12px;
    padding-top: 12px
}

.gear-price {
    display: grid;
    gap: 5px;
    min-width: 0
}

.gear-price b {
    font: 19px system-ui;
    color: #e7c77c
}

.gear-price small {
    font: 11px system-ui;
    color: #adba9e
}

.gear-price>span {
    font-size: 11px;
    color: #a8bdb4
}

.gear-card .mini {
    min-height: 42px;
    min-width: 70px;
    font-size: 13px;
    background: #3f5547;
    border-color: #73866a
}

.gear-card button:disabled {
    opacity: .5
}

.gear-card .muted {
    margin-bottom: 0
}

.merchant-intro {
    display: flex;
    gap: 14px;
    align-items: center;
    padding: 4px 0 14px
}

.merchant-portrait {
    width: 93px;
    height: 93px;
    filter: drop-shadow(0 5px 8px #0004)
}

.merchant-intro>div {
    flex: 1
}

.merchant-intro p {
    margin: 0;
    font-size: 14px;
    color: #d1d4bb
}

.sale-total {
    text-align: center;
    padding: 14px 10px 5px;
    border: 1px solid #56624d;
    border-radius: 13px;
    background: radial-gradient(ellipse at top,#5f573044,transparent 80%),#1c3033
}

.sale-total .reward-value {
    font-size: 42px
}

.sale-total p {
    margin: 6px 0 10px;
    font-size: 13px
}

.sale-breakdown {
    border: 1px solid #3c5454;
    border-radius: 10px;
    margin-top: 12px;
    padding: 0 12px
}

.sale-breakdown summary {
    cursor: pointer;
    padding: 13px 0;
    font-size: 13px;
    color: #c6d3c7
}

.sale-breakdown summary>span {
    float: right;
    font-size: 12px;
    color: #a5bcb5
}

.sale-line {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 8px 0;
    border-top: 1px solid #2e4549
}

.sale-line>.sprite {
    width: 33px;
    height: 33px
}

.sale-line>span:not(.sprite) {
    flex: 1;
    font-size: 12px
}

.sale-line small {
    color: #94afaa;
    margin-left: 6px
}

.sale-line b {
    font: 14px system-ui;
    color: #edce8d
}

.volume-control {
    display: flex;
    align-items: center;
    gap: 11px;
    margin: -5px 0 22px;
    padding: 0 1px;
    font-size: 12px;
    color: #a0b7b2
}

.volume-control input {
    min-width: 0;
    flex: 1;
    accent-color: #e9bf6d;
    height: 28px;
    cursor: pointer
}

.volume-control output {
    width: 36px;
    text-align: right;
    font: 12px system-ui;
    color: #d6c48c
}

.volume-control input:disabled {
    opacity: .35
}

.audio-help {
    border-top: 1px solid var(--line);
    padding-top: 14px
}

.settings-row:has(+.volume-control) {
    margin-bottom: 10px
}

.treasure-chest.gear-art {
    width: 128px;
    height: 128px;
    bottom: 0
}

.revealed .treasure-chest {
    opacity: 1;
    filter: none
}

@media(max-width: 374px) {
    .sheet {
        padding-left:15px;
        padding-right: 15px
    }

    .gear-illustration {
        width: 76px;
        height: 80px
    }

    .gear-illustration>.gear-art,.gear-illustration>.sprite {
        width: 74px;
        height: 74px
    }

    .gear-card-top {
        gap: 10px
    }

    .gear-metrics {
        gap: 14px
    }

    .inventory-grid {
        gap: 5px
    }

    .bag-filters {
        gap: 4px
    }

    .shop-loadout {
        gap: 7px
    }

    .shop-loadout>.gear-art {
        width: 43px;
        height: 43px
    }

    .haul-summary b {
        font-size: 22px
    }
}

@media(max-height: 760px) {
    .masthead {
        height:60px;
        padding-top: 9px
    }

    .balance-strip {
        padding-top: 8px;
        padding-bottom: 9px
    }

    .controls {
        padding: 9px 14px
    }

    .action-column {
        gap: 6px
    }

    .control-note {
        font-size: 10px
    }

    .nav {
        height: 58px
    }

    .mine-top {
        top: 9px
    }

    .scene-hint {
        font-size: 10px;
        padding: 5px 8px
    }

    .jump-button {
        min-height: 37px
    }

    .inventory-grid {
        max-height: 210px
    }
}

@media(prefers-reduced-motion:reduce) {
    .bag-meter>i {
        transition: none
    }
}

.masthead {
    height: 55px;
    padding: 9px 15px 7px
}

.brand-mark {
    width: 25px;
    height: 29px
}

.brand strong {
    font-size: 16px
}

.eyebrow {
    font-size: 8px;
    letter-spacing: 1.8px;
    margin-top: 2px
}

.tag {
    font-size: 10px
}

.balance-strip {
    padding: 6px 16px 8px;
    min-height: 45px;
    align-items: center
}

.balance-strip>div:first-child {
    display: flex;
    align-items: center;
    gap: 8px
}

.balance-strip .caption {
    font-size: 10px;
    letter-spacing: 0
}

.coin-line {
    margin: 0;
    gap: 4px
}

.coin-line .sprite {
    width: 23px;
    height: 23px
}

.number {
    font-size: 21px;
    letter-spacing: -.4px
}

.unit {
    display: none
}

.pending {
    gap: 3px;
    max-width: 44%
}

.pending strong {
    font-size: 12px
}

.pending .caption {
    font-size: 10px
}

.controls {
    padding: 8px 18px;
    gap: 24px;
    min-height: 0
}

.action-column {
    max-width: 210px;
    gap: 8px
}

.jump-button {
    min-height: 44px
}

.context-action {
    min-height: 44px;
    font-size: 13px;
    padding: 9px 10px
}

.context-action[hidden] {
    display: none
}

.dpad {
    grid-template-columns: 40px 40px 40px;
    grid-template-rows: 32px 32px 32px;
    gap: 3px
}

.control-note {
    font-size: 10px;
    line-height: 1.45
}

.nav {
    height: 60px
}

.nav button {
    font-size: 11px
}

.mine-top {
    top: 10px;
    left: 12px;
    right: 12px
}

.drill-chip,.bag-chip {
    pointer-events: none
}

.drill-chip {
    max-width: 104px
}

.bag-chip {
    min-width: 78px
}

.scene-hint {
    font-size: 10px
}

.tap-mode .controls {
    min-height: 0
}

.tap-mode .action-column {
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 8px
}

.tap-mode .control-note {
    grid-column: 1/-1
}

.tap-mode .jump-button:only-child {
    grid-column: 1/-1
}

.toast {
    bottom: 190px
}

.free-return {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    padding: 13px;
    border: 1px solid #4f6a65;
    border-radius: 10px;
    background: #1d353a
}

.free-return>div {
    flex: 1
}

.free-return strong {
    display: block;
    font-size: 14px;
    color: #c8dfcd
}

.free-return small {
    display: block;
    font-size: 11px;
    line-height: 1.6;
    color: #9db8b4;
    margin-top: 6px
}

.free-return .secondary {
    min-height: 44px;
    max-width: 96px
}

.recall-status {
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 55px;
    padding: 12px;
    border: 1px solid #73ad9b;
    border-radius: 10px;
    background: #183e38f2;
    text-align: center;
    pointer-events: none;
    color: #ddf1d9
}

.recall-status strong {
    font-size: 14px
}

.recall-status>span {
    display: block;
    font-size: 11px;
    color: #b1d0bf;
    margin-top: 5px
}

.recall-status>i {
    display: block;
    margin-top: 8px;
    height: 4px;
    background: #10272a;
    border-radius: 4px;
    overflow: hidden
}

.recall-status>i>i {
    display: block;
    height: 100%;
    background: #c4d796
}

.recall-status[hidden] {
    display: none
}

#discovery {
    position: absolute;
    top: 84px;
    left: 12px;
    right: 12px;
    pointer-events: none;
    z-index: 8
}

.discovery-card {
    display: flex;
    gap: 11px;
    align-items: center;
    background: linear-gradient(120deg,#40523aef,#1b343bf5);
    border: 1px solid var(--rarity);
    border-radius: 13px;
    box-shadow: 0 7px 25px #0006;
    padding: 13px;
    animation: appear .25s ease-out
}

.discovery-card>.sprite {
    width: 63px;
    height: 63px
}

.discovery-card>div {
    flex: 1;
    min-width: 0
}

.discovery-card span {
    font-size: 10px;
    letter-spacing: 1.7px;
    color: #e4ca87
}

.discovery-card strong {
    display: block;
    font-size: 15px;
    line-height: 1.5;
    color: #fff0cc;
    margin: 4px 0
}

.discovery-card small {
    font-size: 11px;
    line-height: 1.6;
    color: #c3d5c3
}

.discovery-card strong,.discovery-card small {
    overflow-wrap: anywhere
}

@media(max-width: 374px) {
    .balance-strip {
        padding-left:12px;
        padding-right: 12px
    }

    .balance-strip>div:first-child {
        gap: 5px
    }

    .balance-strip .caption {
        font-size: 9px
    }

    .number {
        font-size: 19px
    }

    .coin-line .sprite {
        width: 19px;
        height: 19px
    }

    .controls {
        gap: 15px;
        padding: 7px 12px
    }

    .dpad {
        grid-template-columns: 36px 36px 36px
    }

    .masthead {
        padding-left: 12px;
        padding-right: 12px
    }

    .discovery-card {
        padding: 10px
    }

    .discovery-card>.sprite {
        width: 48px;
        height: 48px
    }

    .discovery-card strong {
        font-size: 14px
    }
}

@media(prefers-reduced-motion:reduce) {
    .discovery-card {
        animation: none
    }
}

.controls {
    gap: 18px
}

.dpad {
    grid-template-columns: 44px 44px 44px;
    grid-template-rows: 40px 40px 40px;
    gap: 3px;
    flex-shrink: 0
}

.dpad button {
    transition: background .08s,box-shadow .08s,transform .08s
}

.dpad button.held {
    background: #a0b98a;
    color: #152c28;
    box-shadow: inset 0 2px 3px #30463766,0 0 13px #b2d59a22;
    transform: scale(.96)
}

.dpad.held {
    filter: none
}

.dpad .center {
    opacity: .45
}

.action-column {
    min-width: 0
}

.control-note {
    font-size: 10px
}

.drill-chip {
    transition: border-color .25s;
    background: linear-gradient(135deg,#293f39ed,#102128ed)
}

.drill-chip .gear-art {
    filter: drop-shadow(0 2px 3px #0005)
}

.drill-comparison {
    padding: 11px 10px;
    background: #10232980;
    border-radius: 9px;
    margin-top: 9px
}

.drill-comparison>span {
    font-size: 12px;
    color: #b7cabd
}

.drill-comparison>div {
    position: relative;
    height: 25px;
    margin-top: 7px;
    background: #11272b;
    border-radius: 5px;
    overflow: hidden
}

.drill-comparison i {
    position: absolute;
    inset: 0 auto 0 0;
    background: #51675a
}

.drill-comparison .after i {
    background: #967b48
}

.drill-comparison b {
    position: relative;
    display: block;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: 500;
    color: #f4ead1
}

.drill-comparison small {
    display: block;
    font-size: 11px;
    line-height: 1.6;
    margin-top: 8px;
    color: #90aaa6
}

@media(max-width: 374px) {
    .controls {
        gap:12px;
        padding-left: 10px;
        padding-right: 10px
    }

    .dpad {
        grid-template-columns: 40px 40px 40px;
        grid-template-rows: 39px 39px 39px
    }

    .action-column {
        flex: 1
    }

    .control-note {
        font-size: 9px
    }
}

@media(prefers-reduced-motion:reduce) {
    .dpad button,.drill-chip {
        transition: none
    }
}

.ui-icon {
    width: 22px;
    height: 22px;
    display: inline-block;
    vertical-align: middle;
    flex: 0 0 auto
}

.icon-button .ui-icon {
    width: 23px;
    height: 23px
}

.nav {
    height: 66px;
    padding-top: 5px;
    gap: 3px
}

.nav button {
    flex: 1;
    min-width: 0;
    gap: 3px;
    font-size: 12px;
    border-radius: 10px;
    padding: 6px 2px
}

.nav svg {
    width: 23px;
    height: 23px
}

.nav button.active {
    background: #f3c36514;
    color: #f6d48b
}

.nav button[data-panel=withdraw] {
    color: #e1ba81
}

.jump-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px
}

.bag-filters button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px
}

.bag-filters .ui-icon {
    width: 16px;
    height: 16px
}

.pill-tabs button {
    display: flex;
    gap: 5px;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    min-height: 43px
}

.pill-tabs .ui-icon {
    width: 18px;
    height: 18px
}

.danger-action {
    background: #e69569;
    border-color: #fac598
}

.bomb-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin: 16px 0
}

.bomb-specs span {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #e2bd91;
    padding: 7px;
    background: #ac754c19;
    border: 1px solid #a2754b40;
    border-radius: 7px
}

.bomb-specs .ui-icon {
    width: 17px;
    height: 17px
}

.bomb-card .gear-illustration {
    background: radial-gradient(circle,#bc684142,transparent 72%)
}

.sheet:has(.invite-hero),.sheet:has(.wallet-hero) {
    padding: 20px 18px 26px;
    background: linear-gradient(160deg,#1c3037,#13262e 45%)
}

.sheet:has(.invite-hero) .sheet-head,.sheet:has(.wallet-hero) .sheet-head {
    margin-bottom: 18px
}

.sheet .close {
    width: 36px;
    height: 36px;
    flex-shrink: 0
}

.sheet .notice,.sheet .muted {
    font-size: 12px
}

.section-heading {
    display: flex;
    align-items: center;
    gap: 8px!important;
    font-size: 16px!important;
    margin: 24px 0 14px!important
}

.section-heading .ui-icon {
    color: #e7c080
}

.panel-loading {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 12px 0;
    font-size: 13px;
    color: #b4cac8
}

.panel-loading .ui-icon {
    width: 18px;
    height: 18px
}

.invite-hero {
    position: relative;
    isolation: isolate;
    min-height: 236px;
    overflow: hidden;
    padding: 20px 18px;
    border: 1px solid #ad895052;
    border-radius: 16px;
    background: radial-gradient(ellipse at 96% 5%,#d5a45258,transparent 65%),linear-gradient(125deg,#3e5142,#243c3b 65%,#243944)
}

.hero-kicker {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #e9d7a4;
    letter-spacing: .7px
}

.hero-kicker .ui-icon {
    width: 17px;
    height: 17px
}

.invite-hero h3 {
    position: relative;
    z-index: 2;
    color: #fff0c9;
    font-size: 24px;
    line-height: 1.5;
    letter-spacing: .2px;
    margin: 16px 0!important;
    width: 80%
}

.hero-miner {
    position: absolute;
    right: -16px;
    bottom: -20px;
    width: 157px;
    height: 157px;
    z-index: 0;
    filter: drop-shadow(0 6px 10px #0005)
}

.hero-coins {
    position: absolute;
    right: 72px;
    bottom: 15px;
    width: 69px;
    height: 69px;
    transform: rotate(-13deg)
}

.reward-pill {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid #dfc78960;
    border-radius: 10px;
    background: #172f30e8;
    max-width: 74%
}

.reward-pill>.ui-icon {
    width: 25px;
    height: 25px;
    color: #eed098
}

.reward-pill>span {
    font-size: 12px;
    color: #becdad
}

.reward-pill strong {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: baseline;
    margin-top: 3px;
    font-size: 26px;
    line-height: 1.15;
    color: #ffe0a3
}

.reward-pill small {
    font-size: 12px;
    font-weight: 400
}

.invite-stats {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    padding: 19px 0;
    border-bottom: 1px solid #5169604d;
    margin-bottom: 20px;
    text-align: center
}

.invite-stats>div+div {
    border-left: 1px solid #4f685950
}

.invite-stats b {
    display: block;
    color: #e8d2a2;
    font-size: 23px;
    overflow-wrap: anywhere
}

.invite-stats span {
    display: block;
    color: #9fb6b3;
    font-size: 12px;
    margin-top: 5px
}

.invite-path {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 6px;
    margin: 0 0 21px;
    text-align: center
}

.invite-path>div {
    position: relative
}

.invite-path>div:not(:last-child):after {
    content: "";
    height: 1px;
    position: absolute;
    left: 73%;
    right: -25%;
    top: 22px;
    background: #62735b80
}

.step-icon {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 45px;
    height: 45px;
    background: #c4be6820;
    border: 1px solid #a9b17240;
    border-radius: 13px;
    color: #dbcc9f
}

.step-icon b {
    position: absolute;
    bottom: -3px;
    right: -5px;
    font-size: 10px;
    display: grid;
    place-items: center;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #d7bd7c;
    color: #21362e
}

.invite-path strong {
    display: block;
    font-size: 13px;
    color: #e0ded0;
    margin-top: 11px
}

.invite-path small {
    display: block;
    font-size: 12px;
    line-height: 1.4;
    color: #90aaa6;
    margin-top: 5px
}

.share-card {
    padding: 16px;
    border: 1px solid #63827963;
    border-radius: 13px;
    background: #29433e80
}

.share-card label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #c8d9c7;
    font-size: 14px
}

.share-card label .ui-icon {
    width: 19px;
    height: 19px
}

.share-link {
    font-size: 12px;
    width: 100%;
    min-width: 0;
    padding: 12px;
    margin-top: 12px;
    color: #bcd1c9;
    background: #132b2e;
    border: 1px solid #476158;
    border-radius: 8px
}

.share-actions {
    display: flex;
    gap: 8px;
    margin-top: 11px
}

.share-actions .primary {
    margin: 0!important;
    flex: 1;
    min-width: 0
}

.share-actions button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    font-size: 14px;
    white-space: nowrap
}

.share-actions .ui-icon {
    width: 18px;
    height: 18px
}

.share-card>small {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #abc0ae;
    margin-top: 12px
}

.friend-card {
    padding: 14px;
    border: 1px solid #385258;
    border-radius: 11px;
    background: #1c333a;
    margin-bottom: 10px
}

.friend-card-top {
    display: flex;
    gap: 9px;
    align-items: center
}

.miner-avatar {
    display: grid;
    place-items: center;
    width: 35px;
    height: 35px;
    border-radius: 10px;
    color: #d1c592;
    background: #b4ac6030
}

.friend-card-top>div {
    flex: 1;
    min-width: 0
}

.friend-card-top strong {
    display: block;
    font-size: 13px;
    overflow-wrap: anywhere
}

.friend-card-top small {
    display: block;
    font-size: 12px;
    color: #9eb6b3;
    margin-top: 4px
}

.friend-status {
    display: flex;
    align-items: center;
    gap: 3px;
    color: #c6b58c;
    font-size: 12px
}

.friend-status.complete {
    color: #abd6b9
}

.friend-status .ui-icon {
    width: 15px;
    height: 15px
}

.progress-track {
    height: 7px;
    overflow: hidden;
    background: #0d222a;
    border-radius: 8px;
    margin-top: 14px
}

.progress-track>i {
    display: block;
    height: 100%;
    min-width: 0;
    background: linear-gradient(90deg,#bb934f,#ebcf82);
    border-radius: 8px
}

.progress-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 8px;
    color: #9ab0ae;
    font-size: 12px
}

.progress-caption b {
    font-weight: 500;
    color: #d1ceaf
}

.illustrated-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 15px 12px 23px
}

.illustrated-empty>.sprite {
    width: 80px;
    height: 80px;
    filter: drop-shadow(0 4px 9px #0004)
}

.illustrated-empty>strong {
    font-size: 15px;
    color: #d2ddd1;
    margin-top: 10px
}

.illustrated-empty>p {
    font-size: 13px;
    margin: 7px 0 0!important;
    max-width: 270px
}

.rule-details {
    border-top: 1px solid #47605980;
    padding: 17px 0 3px
}

.rule-details summary {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: #b5ccbd;
    cursor: pointer;
    list-style: none
}

.rule-details summary:after {
    content: "+";
    margin-left: auto;
    color: #ddc88d;
    font-size: 20px
}

.rule-details[open] summary:after {
    content: "−"
}

.rule-details summary .ui-icon {
    width: 17px;
    height: 17px
}

.rule-details p {
    font-size: 13px;
    line-height: 1.85
}

.wallet-hero {
    position: relative;
    overflow: hidden;
    border: 1px solid #aa935a6b;
    border-radius: 15px;
    padding: 18px;
    background: radial-gradient(ellipse at 100% 0,#a9975445,transparent 60%),linear-gradient(135deg,#314348,#1c323b)
}

.wallet-hero-top {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #bbc9c3;
    margin-bottom: 25px
}

.wallet-hero-top>span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px
}

.wallet-hero-top>b {
    display: flex;
    gap: 4px;
    align-items: center;
    font-size: 13px;
    color: #eed598;
    font-weight: 600
}

.wallet-hero-top .ui-icon {
    width: 19px;
    height: 19px
}

.wallet-label {
    font-size: 12px;
    color: #a8c0b9
}

.trx-value {
    font-size: 31px;
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -1px;
    margin: 8px 0 18px;
    color: #ffe4ac;
    overflow-wrap: anywhere;
    font-variant-numeric: tabular-nums
}

.trx-value small {
    font-size: 15px;
    letter-spacing: 0;
    margin-left: 8px;
    color: #d3c49a
}

.wallet-coins {
    display: flex;
    align-items: center;
    gap: 5px;
    border-top: 1px solid #bfd1a82b;
    padding-top: 14px;
    font-size: 13px;
    color: #c3d6c5;
    flex-wrap: wrap
}

.wallet-coins .ui-icon {
    width: 18px;
    height: 18px;
    color: #e2c888
}

.wallet-coins>span {
    margin-left: auto;
    color: #9eb4b1;
    font-size: 12px
}

.withdraw-goal {
    padding: 18px 1px 7px
}

.withdraw-goal>div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 7px;
    font-size: 13px
}

.withdraw-goal strong {
    font-weight: 500;
    color: #dce0d0
}

.withdraw-goal>div>span {
    color: #d4bd8a
}

.withdraw-goal p {
    font-size: 12px!important;
    margin: 8px 0!important
}

.withdraw-route {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
    padding: 15px 0 19px;
    border-bottom: 1px solid #415b59;
    margin-bottom: 18px
}

.withdraw-route>span {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    color: #c0d0c3;
    min-width: 55px
}

.withdraw-route>span>.ui-icon {
    box-sizing: content-box;
    padding: 9px;
    border-radius: 11px;
    background: #3651497a;
    color: #d6c596
}

.withdraw-route>.ui-icon {
    width: 18px;
    height: 18px;
    color: #678980
}

.withdraw-form {
    padding: 0
}

.withdraw-form .form-field {
    margin: 16px 0
}

.withdraw-form label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    color: #d6dfd2;
    margin-bottom: 10px
}

.withdraw-form label .ui-icon {
    width: 18px;
    height: 18px;
    color: #a5bfb0
}

.withdraw-form input {
    font-size: 16px!important;
    background: #102730;
    color: #eef0df;
    border: 1px solid #4d686b;
    border-radius: 9px;
    width: 100%;
    padding: 13px 12px;
    min-height: 48px
}

.amount-input {
    position: relative;
    display: flex;
    align-items: center
}

.amount-input input {
    padding-right: 76px
}

.amount-input>button {
    position: absolute;
    right: 8px;
    font-size: 13px;
    border-radius: 6px;
    color: #ebd190;
    background: #56674669;
    padding: 7px 12px;
    min-height: 34px
}

.exchange-rate {
    font-size: 12px!important;
    color: #92afac!important;
    margin: 7px 0 12px!important
}

.quote-output {
    background: #e0bb5812;
    border: 1px solid #b4995140;
    padding: 13px;
    border-radius: 10px
}

.quote-output>span {
    font-size: 12px;
    color: #bbbf9e
}

.quote-output #conversion {
    font-size: 23px;
    line-height: 1.4;
    color: #f3d48f;
    margin: 5px 0;
    font-weight: 600;
    letter-spacing: -.4px;
    overflow-wrap: anywhere
}

.quote-output>small {
    font-size: 12px;
    color: #b4c0ad;
    line-height: 1.6
}

.withdraw-form .primary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 49px;
    font-size: 15px
}

.withdraw-form p {
    font-size: 12px
}

.submit-note {
    display: flex;
    gap: 6px;
    align-items: flex-start;
    line-height: 1.7
}

.submit-note .ui-icon {
    width: 15px;
    height: 15px;
    margin-top: 3px
}

.withdraw-record {
    padding: 15px;
    border: 1px solid #3d565d;
    border-radius: 11px;
    margin: 11px 0;
    background: #1c323a
}

.withdraw-record-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px
}

.record-icon {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #d1b36318;
    color: #e7c37d
}

.record-icon.succeeded {
    color: #9fddbc;
    background: #4b977423
}

.record-icon.failed {
    color: #e4a690;
    background: #ac62581c
}

.withdraw-record-top>div {
    flex: 1
}

.withdraw-record-top strong {
    font-size: 21px;
    color: #e7d3ab
}

.withdraw-record-top strong small {
    display: inline;
    font-size: 12px
}

.withdraw-record-top small {
    font-size: 12px
}

.withdraw-record>small {
    font-size: 12px;
    margin: 8px 0
}

.withdraw-record code {
    display: block;
    padding: 8px;
    background: #10252c;
    border-radius: 5px;
    font-size: 11px;
    overflow-wrap: anywhere;
    color: #a6c0bc
}

.wallet-empty>.ui-icon {
    width: 48px;
    height: 48px;
    padding: 11px;
    box-sizing: content-box;
    background: #799b8120;
    color: #b4cfa7;
    border-radius: 20px
}

.station-card {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 17px 13px;
    margin: 10px 0;
    text-align: left;
    border: 1px solid #48605c;
    border-radius: 13px;
    background: linear-gradient(110deg,#28433d,#1b3038)
}

.station-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    color: #f0d39a;
    background: #dcc27918;
    border: 1px solid #c0a46930
}

.station-withdraw {
    color: #9bd4c2;
    background: #55967820
}

.station-ranking {
    color: #ddabeb;
    background: #9976af20
}

.station-settings {
    color: #a7c8e0;
    background: #728aab20
}

.station-card>.details {
    flex: 1;
    min-width: 0
}

.station-card strong {
    font-size: 16px;
    font-weight: 600;
    color: #ebeadb
}

.station-card small {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    color: #adc0b8;
    margin-top: 5px
}

.station-card>.ui-icon {
    width: 18px;
    height: 18px;
    color: #acbb91
}

.station-card:active {
    background: #365449
}

@media(max-width: 374px) {
    .sheet:has(.invite-hero),.sheet:has(.wallet-hero) {
        padding-left:14px;
        padding-right: 14px
    }

    .invite-hero {
        padding: 17px 14px;
        min-height: 227px
    }

    .invite-hero h3 {
        font-size: 22px
    }

    .hero-miner {
        right: -24px;
        width: 141px;
        height: 141px
    }

    .hero-coins {
        right: 58px;
        width: 57px;
        height: 57px
    }

    .share-card {
        padding: 13px
    }

    .share-actions {
        gap: 6px
    }

    .share-actions button {
        font-size: 13px;
        padding-left: 10px;
        padding-right: 10px
    }

    .trx-value {
        font-size: 27px
    }

    .bag-filters button {
        font-size: 11px;
        gap: 3px;
        padding-left: 5px;
        padding-right: 5px
    }

    .bag-filters .ui-icon {
        width: 14px;
        height: 14px
    }

    .friend-status,.nav button {
        font-size: 11px
    }
}

.camp-signs {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none;
    overflow: hidden;
    contain: layout paint;
    z-index: 1
}

.camp-sign {
    position: absolute;
    transform: translate(-50%,-50%);
    white-space: nowrap;
    font: 700 13px/1.35 system-ui,-apple-system,Microsoft YaHei,sans-serif;
    letter-spacing: .2px;
    color: #ffedbd;
    background: #172b2e;
    border: 1px solid #b99b5d80;
    border-radius: 4px;
    padding: 5px 9px;
    box-shadow: 0 2px 3px #07111466;
    text-shadow: none;
    -webkit-font-smoothing: antialiased
}

.camp-sign.camp-sign-muted {
    font-size: 11px;
    font-weight: 600;
    color: #dce5dc;
    background: #152a30;
    border-color: #66817d70;
    padding: 4px 9px
}

.intro-view {
    align-items: center;
    justify-content: center;
    padding: 14px;
    background: #051015dc
}

.sheet.intro-card {
    padding: 0;
    max-height: 96%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #ae914f9c;
    border-radius: 20px;
    background: #162b31;
    box-shadow: 0 20px 70px #0009
}

.intro-body {
    overflow: auto;
    min-height: 0;
    overscroll-behavior: contain;
    scrollbar-width: thin
}

.intro-hero {
    position: relative;
    aspect-ratio: 3/2;
    background: #142931;
    overflow: hidden;
    flex-shrink: 0
}

.intro-hero img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 45%
}

.intro-hero:after {
    content: "";
    position: absolute;
    top: 65%;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(transparent,#162b31);
    pointer-events: none
}

.intro-hero-bar {
    position: absolute;
    top: 12px;
    left: 14px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px
}

.intro-hero-bar>span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #ffedc0;
    padding: 7px 8px;
    border: 1px solid #d2b77850;
    border-radius: 5px;
    background: #10262ddb
}

.intro-hero-bar>button {
    min-height: 34px;
    padding: 7px 9px;
    border: 1px solid #9bb2a16b;
    border-radius: 6px;
    background: #10262de8;
    color: #f5e6c9;
    font-size: 12px
}

.intro-content {
    padding: 3px 20px 17px
}

.intro-card h2 {
    font-size: 26px;
    line-height: 1.3;
    letter-spacing: -.3px;
    color: #ffecd0;
    margin: 0 0 16px;
    font-weight: 750
}

.intro-reward {
    display: flex;
    gap: 11px;
    align-items: center;
    padding: 13px 12px;
    border: 1px solid #cfad585c;
    border-radius: 12px;
    background: linear-gradient(110deg,#a7802524,#26423d60)
}

.intro-trx {
    display: grid;
    place-items: center;
    width: 43px;
    height: 43px;
    flex-shrink: 0;
    color: #ff7772;
    border: 1px solid #ed8a694f;
    border-radius: 11px;
    background: #3d302a
}

.intro-trx>.ui-icon {
    width: 28px;
    height: 28px;
    stroke-width: 1.6
}

.intro-reward>div {
    min-width: 0
}

.intro-reward span:not(.intro-trx) {
    display: block;
    font-size: 13px;
    line-height: 1.4;
    color: #ced2b3;
    margin-bottom: 3px
}

.intro-reward strong {
    display: block;
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -.2px;
    color: #ffe2a0
}

.intro-card .intro-copy {
    font-size: 16px;
    line-height: 1.7;
    color: #cad7cc;
    margin: 16px 0
}

.intro-route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    padding: 15px 0;
    border-top: 1px solid #476058;
    border-bottom: 1px solid #476058
}

.intro-route>div {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 9px;
    flex: 1;
    text-align: center;
    color: #e8d3a0;
    font-size: 13px;
    line-height: 1.4
}

.intro-route>div>.ui-icon {
    height: 25px;
    width: 25px
}

.intro-route>.intro-route-arrow {
    height: 15px;
    width: 15px;
    color: #6f8f81;
    flex-shrink: 0
}

.intro-card .intro-danger {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-size: 13px;
    line-height: 1.6;
    color: #d7b99b;
    margin: 14px 0
}

.intro-danger>.ui-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
    color: #eabf7d
}

.intro-help {
    border-top: 1px solid #3c5552;
    color: #abc3b9
}

.intro-help summary {
    font-size: 13px;
    line-height: 1.5;
    padding: 12px 0 0;
    cursor: pointer
}

.intro-help p {
    font-size: 14px;
    line-height: 1.7
}

.intro-footer {
    padding: 12px 20px 19px;
    border-top: 1px solid #466052;
    background: #14282f;
    flex-shrink: 0;
    box-shadow: 0 -10px 20px #11262b35
}

.intro-footer p {
    font-size: 12px;
    line-height: 1.6;
    color: #a9beb0;
    margin: 0 0 11px
}

.intro-card .intro-start {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin: 0;
    width: 100%;
    min-height: 49px;
    font-size: 16px;
    background: linear-gradient(#f8d487,#eabb62);
    border-color: #ffe2a2;
    box-shadow: 0 3px #957238
}

.intro-start>.ui-icon {
    width: 21px;
    height: 21px
}

.intro-start>.ui-icon:last-child {
    margin-left: auto
}

.intro-start>span {
    flex: 1
}

.intro-start:focus-visible {
    outline-offset: -5px
}

.intro-card .intro-help p:last-child {
    margin-bottom: 0
}

@media(max-width: 370px) {
    .intro-view {
        padding:10px
    }

    .intro-content {
        padding-left: 16px;
        padding-right: 16px
    }

    .intro-card h2 {
        font-size: 24px
    }

    .intro-reward strong {
        font-size: 18px
    }

    .intro-route>div {
        font-size: 12px
    }

    .intro-footer {
        padding-left: 16px;
        padding-right: 16px
    }
}

@media(max-height: 680px) {
    .intro-hero {
        aspect-ratio:3/2
    }

    .intro-view {
        padding: 8px
    }

    .intro-card h2 {
        font-size: 23px
    }
}

.travel-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
    width: 100%
}

.travel-actions button {
    min-height: 48px;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px;
    border-radius: 10px;
    font: inherit;
    font-size: 12px;
    font-weight: 600
}

.travel-actions button span {
    display: grid;
    gap: 2px;
    text-align: left
}

.travel-actions button small {
    font-size: 10px;
    font-weight: 400;
    opacity: .8
}

.travel-actions .icon {
    width: 19px;
    height: 19px;
    flex-shrink: 0
}

.return-button {
    border: 1px solid #69ae9e;
    background: linear-gradient(145deg,#294d48,#193630);
    color: #c6f8e7;
    touch-action: manipulation
}

.return-button:disabled {
    opacity: .5
}

.return-button.returning {
    opacity: 1;
    border-color: #a4e8c7;
    box-shadow: 0 0 12px #70ddba22
}

.tap-mode .action-column {
    display: flex;
    max-width: none
}

.tap-mode .travel-actions {
    max-width: 300px
}

.recall-status strong {
    display: flex;
    align-items: center;
    gap: 7px
}

.recall-status strong .icon {
    width: 18px;
    height: 18px
}

.language-select {
    font: inherit;
    font-size: 14px;
    min-height: 42px;
    min-width: 135px;
    padding: 9px 32px 9px 12px;
    border: 1px solid #657966;
    border-radius: 9px;
    color: #f4e9c9;
    background: #213933;
    color-scheme: dark;
    cursor: pointer
}

.language-select:focus-visible {
    outline: 2px solid #efc878;
    outline-offset: 3px
}

.language-select option {
    background: #162930;
    color: #f6f1e5
}

.intro-hero-bar .language-select {
    min-width: 110px;
    font-size: 12px;
    min-height: 36px;
    background: #0c201ee8;
    max-width: 48%
}

.ledger-hero {
    position: relative;
    padding: 22px 20px 16px;
    border: 1px solid #70613e;
    border-radius: 16px;
    background: radial-gradient(ellipse at 95% 0,#c59b4238,transparent 65%),linear-gradient(145deg,#28362c,#152b2b);
    overflow: hidden
}

.ledger-hero .kicker {
    display: flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 1.4px;
    color: #d8c695
}

.ledger-hero>strong {
    display: block;
    margin: 14px 0 10px;
    font-size: 34px;
    line-height: 1.15;
    color: #ffe5a3;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere
}

.ledger-hero>strong small {
    font-size: 12px;
    font-weight: 400;
    margin-left: 7px;
    color: #cfc5a8
}

.ledger-estimate {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #bfe3d4;
    font-size: 14px
}

.ledger-estimate .icon {
    width: 18px;
    height: 18px
}

.ledger-hero p {
    font-size: 11px!important;
    line-height: 1.65;
    margin: 10px 0 0;
    color: #a9b7a8
}

.ledger-metrics {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin: 12px 0 24px
}

.ledger-metric {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 13px 11px;
    background: #1a2d32;
    border: 1px solid #3e535344;
    border-radius: 12px;
    min-width: 0
}

.ledger-metric.wide {
    grid-column: 1/-1;
    background: #1b3435;
    align-items: center
}

.metric-icon {
    color: #d5ba7b;
    flex-shrink: 0;
    padding-top: 2px
}

.metric-icon .icon {
    width: 19px;
    height: 19px
}

.ledger-metric>div {
    min-width: 0
}

.ledger-metric span:not(.metric-icon) {
    display: block;
    font-size: 11px;
    color: #b9c5bf;
    line-height: 1.45
}

.ledger-metric strong {
    display: block;
    font-size: 21px;
    line-height: 1.3;
    margin: 5px 0;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere
}

.ledger-metric strong small {
    font-size: 11px;
    display: inline;
    color: #dfddc9
}

.ledger-metric small {
    display: block;
    font-size: 10px;
    color: #a2b2ac;
    line-height: 1.5
}

.ledger-metric.wide strong {
    font-size: 25px
}

.ledger-heading {
    gap: 8px
}

.ledger-heading>.icon {
    width: 19px;
    height: 19px;
    color: #dabf85
}

.ledger-heading h3 {
    flex: 1;
    margin: 0
}

.ledger-heading>small {
    font-size: 10px;
    color: #99ada4
}

.ledger-record {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 0;
    border-bottom: 1px solid #46605742
}

.ledger-record .record-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    flex-shrink: 0;
    background: #b8943821;
    color: #dfc184
}

.ledger-record .record-icon.income {
    background: #76c3981a;
    color: #a5d9b9
}

.ledger-record .record-icon.completed {
    background: #6abac51a;
    color: #a1dce3
}

.ledger-record .record-icon .icon {
    width: 18px;
    height: 18px
}

.ledger-record .details {
    flex: 1;
    min-width: 0
}

.ledger-record .details strong {
    display: block;
    font-size: 13px
}

.ledger-record .details small {
    display: block;
    font-size: 10px;
    line-height: 1.5;
    color: #93a99f;
    margin-top: 4px
}

.record-amount {
    text-align: right;
    flex-shrink: 0;
    max-width: 43%;
    overflow-wrap: anywhere
}

.record-amount strong {
    font-size: 15px;
    font-variant-numeric: tabular-nums
}

.record-amount small {
    display: block;
    color: #9fb4a8;
    font-size: 10px;
    line-height: 1.4;
    margin-top: 3px
}

.record-amount strong small {
    display: inline
}

.record-amount.positive strong {
    color: #a7ddad
}

.ranking-hero {
    text-align: center;
    padding: 18px 16px 20px;
    border: 1px solid #8a743a66;
    border-radius: 15px;
    background: radial-gradient(ellipse at 50% 0,#b68b3733,transparent 80%),#1c302e
}

.ranking-hero>.icon {
    width: 44px;
    height: 44px;
    display: block;
    margin: 0 auto 12px;
    color: #f0cb72
}

.ranking-hero .kicker {
    font-size: 9px;
    color: #baad80;
    letter-spacing: 1.7px
}

.ranking-hero h3 {
    margin: 9px 0;
    color: #f5dfaa;
    font-size: 19px
}

.ranking-hero p {
    color: #b0c0b3;
    font-size: 12px!important;
    line-height: 1.7;
    margin: 0
}

.own-rank {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 14px 12px;
    border: 1px solid #5d8b7166;
    background: #233c34;
    border-radius: 12px;
    margin: 14px 0 18px
}

.own-rank>.icon {
    color: #c9bc7e;
    width: 22px;
    height: 22px
}

.own-rank>div {
    flex: 1;
    min-width: 0
}

.own-rank small {
    display: block;
    font-size: 9px;
    letter-spacing: .5px;
    color: #a9beb0
}

.own-rank strong {
    display: block;
    font-size: 12px;
    margin-top: 4px;
    overflow-wrap: anywhere
}

.own-rank>b {
    font-size: 16px;
    text-align: right;
    overflow-wrap: anywhere;
    max-width: 35%;
    color: #f4d78b
}

.ranking-row {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #42605555
}

.rank-medal {
    display: grid;
    place-items: center;
    position: relative;
    width: 33px;
    height: 37px;
    color: #a7b7ae;
    flex-shrink: 0
}

.rank-medal .icon {
    position: absolute;
    top: 0;
    width: 32px;
    height: 36px;
    opacity: .22
}

.rank-medal b {
    font-size: 16px
}

.place-1 {
    color: #ffda80
}

.place-2 {
    color: #d6e5eb
}

.place-3 {
    color: #dca985
}

.ranking-row .details {
    flex: 1;
    min-width: 0
}

.ranking-row .details strong {
    font-size: 13px;
    display: block;
    overflow-wrap: anywhere
}

.ranking-row .details small {
    display: block;
    font-size: 9px;
    margin-top: 4px;
    color: #93a69d;
    letter-spacing: 1px
}

.ranking-row .details a {
    font-size: 11px;
    color: #c0d7c4
}

.rank-value {
    text-align: right;
    font-variant-numeric: tabular-nums
}

.rank-value strong {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: #e8d7ad
}

.rank-value small {
    font-size: 9px;
    letter-spacing: 1px;
    color: #9caca1
}

.ranking-preview {
    margin-top: 20px
}

.ranking-preview .section-heading {
    display: flex;
    align-items: center;
    gap: 8px
}

.ranking-preview h3 {
    font-size: 14px;
    margin: 0
}

.ranking-preview>p {
    font-size: 11px!important;
    line-height: 1.7
}

.preview-label {
    background: #dbb86420;
    border: 1px solid #b09c5655;
    border-radius: 5px;
    padding: 4px 6px;
    font-size: 9px;
    white-space: nowrap;
    color: #dfc786
}

.ranking-examples summary {
    padding: 16px 0;
    font-size: 13px;
    color: #cebd88;
    cursor: pointer
}

@media(max-width: 374px) {
    .travel-actions button {
        font-size:11px;
        gap: 4px
    }

    .travel-actions .icon {
        width: 16px;
        height: 16px
    }

    .ledger-metric {
        padding: 12px 9px;
        gap: 6px
    }

    .ledger-metric strong {
        font-size: 19px
    }

    .ledger-record {
        gap: 8px
    }

    .ledger-record .details strong {
        font-size: 12px
    }
}

.agent-hero {
    padding: 22px;
    border: 1px solid #70886b;
    border-radius: 18px;
    background: radial-gradient(ellipse at 100% 0%,#62612c66,transparent 70%),linear-gradient(140deg,#254c43,#172f30);
    color: #f5edcf;
    margin-bottom: 12px
}

.agent-balance {
    margin: 20px 0 14px;
    display: grid;
    gap: 5px
}

.agent-balance>span {
    font-size: 14px;
    color: #cad7c7
}

.agent-balance strong {
    font-size: 36px;
    line-height: 1.15;
    overflow-wrap: anywhere
}

.agent-balance small {
    font-size: 14px;
    margin-left: 8px;
    font-weight: 400
}

.agent-hero-foot {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
    border-top: 1px solid #efffd122;
    padding-top: 14px
}

.agent-hero-foot>span:first-child {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap
}

.agent-hero-foot b {
    color: #ffdb84
}

.agent-summary {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.agent-summary>div {
    display: grid;
    grid-template-columns: 22px 1fr;
    gap: 7px;
    background: #172d2c;
    border: 1px solid #d8e4b51b;
    border-radius: 12px;
    padding: 13px
}

.agent-summary span {
    font-size: 14px;
    color: #c1d0c0
}

.agent-summary b {
    grid-column: 2;
    font-size: 21px;
    overflow-wrap: anywhere
}

.agent-remainder {
    font-size: 13px!important;
    line-height: 1.6;
    color: #bdc9b9;
    margin: 12px 0 18px
}

.agent-section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin: 24px 0 12px
}

.agent-section-title h3 {
    font-size: 17px;
    margin: 0
}

.agent-section-title>span {
    font-size: 12px;
    color: #b0bfaf
}

.agent-levels {
    display: grid;
    grid-template-columns: repeat(3,minmax(0,1fr));
    gap: 8px
}

.agent-level {
    display: grid;
    gap: 9px;
    text-align: left;
    padding: 14px 10px;
    background: #172b2b;
    border: 1px solid #77938755;
    border-radius: 12px;
    color: #d9e0cc;
    cursor: pointer
}

.agent-level.selected {
    border-color: #eac56e;
    background: linear-gradient(140deg,#514a29,#26382c);
    box-shadow: inset 0 0 0 1px #eac56e33
}

.agent-level>span {
    font-size: 14px
}

.agent-level strong {
    font-size: 29px;
    color: #f3d484;
    line-height: 1
}

.agent-level strong small {
    font-size: 17px
}

.agent-level>small {
    font-size: 12px;
    line-height: 1.4;
    color: #c0d1bf
}

.agent-level-income {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 0;
    flex-wrap: wrap;
    font-size: 13px;
    color: #c2cebe
}

.agent-level-income b {
    color: #efd189;
    margin-left: 4px
}

.agent-tabs {
    display: flex;
    border-bottom: 1px solid #81938344;
    margin-bottom: 16px;
    gap: 6px
}

.agent-tabs button {
    flex: 1;
    padding: 12px 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 7px;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    color: #afc1b5;
    font-size: 15px
}

.agent-tabs button.selected {
    color: #f0d18a;
    border-bottom-color: #eac56e
}

.friend-earnings {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    flex-wrap: wrap;
    color: #bfcfbb;
    padding-top: 10px;
    border-top: 1px solid #718c7540;
    margin-top: 10px
}

.commission-record {
    padding: 16px 14px;
    margin-bottom: 10px;
    border: 1px solid #82958044;
    border-radius: 12px;
    background: #172b2b
}

.commission-record-top {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap
}

.commission-record-top>span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px
}

.commission-record-top>b {
    font-size: 18px;
    color: #eacf86
}

.commission-record small {
    font-size: 12px;
    font-weight: 400
}

.commission-record>p {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin: 12px 0;
    color: #c7d2c2
}

.commission-record footer {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    font-size: 12px;
    flex-wrap: wrap;
    color: #abbba9
}

.commission-record .complete {
    color: #add5a9
}

.commission-record .pending {
    color: #e8c982
}

.withdraw-referrals {
    padding: 17px 15px;
    margin: 14px 0;
    border: 1px solid #b994535c;
    border-radius: 13px;
    background: #443d2429
}

.withdraw-referrals>div {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px
}

.withdraw-referrals b {
    margin-left: auto;
    font-size: 21px;
    color: #edd089;
    white-space: nowrap
}

.withdraw-referrals p {
    font-size: 14px;
    line-height: 1.6;
    color: #c8d2bf
}

.withdraw-referrals .secondary {
    width: 100%;
    font-size: 14px
}

.withdraw-referrals.complete {
    border-color: #749778
}

.agent-level:focus-visible,.agent-tabs button:focus-visible {
    outline: 2px solid #f4d784;
    outline-offset: 3px
}

.ledger-filter {
    border: 1px solid #84967c55;
    border-radius: 8px;
    padding: 8px 11px;
    font-size: 14px;
    color: #cdd7c4;
    background: #172d2c;
    margin: 0 5px 14px 0
}

.ledger-filter.selected {
    border-color: #eac56e;
    color: #eed28c;
    background: #454228
}

.rule-details ul {
    padding-left: 20px;
    margin: 12px 0;
    color: #c7d2c2;
    font-size: 14px;
    line-height: 1.65
}

.rule-details li+li {
    margin-top: 8px
}

.death-rock-art {
    display: block;
    width: 120px;
    height: 120px;
    object-fit: contain;
    margin: 8px auto 18px;
    filter: drop-shadow(0 8px 12px #0005)
}

.merchant-bubble {
    position: absolute;
    z-index: 2;
    pointer-events: auto;
    display: grid;
    grid-template-columns: 20px minmax(0,1fr);
    gap: 4px 6px;
    padding: 9px 11px 8px;
    border: 1px solid #ecd084;
    border-radius: 13px 13px 13px 5px;
    background: linear-gradient(145deg,#fff5d6,#efdda8);
    color: #3a3625;
    box-shadow: 0 5px 13px #10242266;
    text-align: left;
    animation: merchant-greeting .24s ease-out both;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none
}

.merchant-bubble[hidden] {
    display: none
}

.merchant-bubble:after {
    content: "";
    position: absolute;
    left: var(--speech-tail,30px);
    bottom: -7px;
    width: 11px;
    height: 11px;
    background: #efdda8;
    border-right: 1px solid #ecd084;
    border-bottom: 1px solid #ecd084;
    transform: translate(-50%) rotate(45deg)
}

.merchant-bubble-cards {
    grid-row: 1/3;
    align-self: center;
    font: 27px/1 Georgia;
    color: #48614e;
    filter: drop-shadow(2px 2px 0 #fff9)
}

.merchant-bubble-copy {
    font: 600 12px/1.45 system-ui,-apple-system,Microsoft YaHei,sans-serif;
    overflow-wrap: anywhere
}

.merchant-bubble-link {
    font: 700 10px/1.4 system-ui,-apple-system,Microsoft YaHei,sans-serif;
    color: #42644d;
    white-space: nowrap
}

.merchant-bubble:focus-visible {
    outline: 2px solid #fff1b8;
    outline-offset: 3px
}

.merchant-bubble:active {
    filter: brightness(.96)
}

@keyframes merchant-greeting {
    0% {
        opacity: 0;
        translate: 0 5px
    }

    to {
        opacity: 1;
        translate: 0 0
    }
}

@media(prefers-reduced-motion:reduce) {
    .merchant-bubble {
        animation: none
    }
}

.settings-row>span {
    display: flex;
    gap: 9px;
    align-items: center
}

.settings-row .ui-icon {
    color: #e8c575;
    width: 21px;
    height: 21px;
    flex-shrink: 0
}

.settings-row .language-select {
    max-width: 56%
}

.collection-prize {
    margin: 16px 0;
    padding: 18px;
    background: linear-gradient(120deg,#344937,#182b32);
    border: 1px solid #8a7745;
    border-radius: 16px
}

.collection-prize>strong {
    font-size: 26px;
    color: #f6d890
}

.collection-prize p {
    font-size: 14px;
    line-height: 1.5
}

.collection-prize button {
    width: 100%
}

[dir=rtl] .controls,[dir=rtl] .dpad,[dir=rtl] .game-canvas,[dir=rtl] .camp-signs,[dir=rtl] .playing-card {
    direction: ltr
}

[dir=rtl] .sheet,[dir=rtl] .station-card {
    text-align: right
}

[dir=rtl] input[type=number],[dir=rtl] input[id*=address],[dir=rtl] #invite-link,[dir=rtl] .number,[dir=rtl] .mono {
    direction: ltr;
    unicode-bidi: isolate
}

[dir=rtl] .sheet h2,[dir=rtl] .brand strong {
    letter-spacing: 0
}

.settings-row {
    gap: 12px
}

.settings-row>span {
    min-width: 0
}

.nav button span {
    overflow-wrap: anywhere
}

.shell {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    padding-top: env(safe-area-inset-top,0px)
}

.tap-mode .action-column {
    max-width: none;
    grid-template-columns: 1fr
}

.tap-mode .travel-actions {
    grid-template-columns: 1fr 1fr
}

.mine-wrap {
    min-height: 0
}

.controls {
    gap: 14px;
    padding: 8px 14px;
    direction: ltr
}

.dpad {
    --pad-size: 44px;
    display: grid;
    grid-template-columns: repeat(3,var(--pad-size));
    grid-template-rows: repeat(3,var(--pad-size));
    gap: 3px;
    flex: 0 0 auto;
    align-items: stretch;
    justify-items: stretch;
    direction: ltr
}

.dpad button {
    display: grid;
    place-items: center;
    width: var(--pad-size);
    height: var(--pad-size);
    min-width: 0;
    min-height: 0;
    padding: 0;
    line-height: 1;
    transition: background .08s,box-shadow .08s;
    color: #dfebd8
}

.dpad button:active,.dpad button.held,.jump-button:active,.return-button:active {
    transform: none
}

.dpad .north {
    grid-area: 1/2
}

.dpad .west {
    grid-area: 2/1
}

.dpad .center {
    grid-area: 2/2
}

.dpad .east {
    grid-area: 2/3
}

.dpad .south {
    grid-area: 3/2
}

.direction-icon {
    width: 24px;
    height: 24px;
    display: block;
    pointer-events: none
}

.direction-icon.right {
    transform: rotate(90deg)
}

.direction-icon.down {
    transform: rotate(180deg)
}

.direction-icon.left {
    transform: rotate(-90deg)
}

.controls .action-column {
    min-width: 0;
    gap: 7px
}

.controls .travel-actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px
}

.controls .travel-actions button {
    min-width: 0;
    min-height: 46px;
    padding: 8px 4px;
    flex-wrap: wrap;
    justify-content: center
}

.controls .control-note {
    line-height: 1.35;
    font-size: 10px
}

.context-action {
    overflow-wrap: anywhere
}

.nav {
    height: calc(60px + env(safe-area-inset-bottom,0px));
    padding: 5px 8px calc(5px + env(safe-area-inset-bottom,0px));
    gap: 2px
}

.nav button {
    flex: 1;
    min-width: 0;
    min-height: 48px;
    padding: 3px 1px;
    justify-content: center;
    line-height: 1.15;
    font-size: 11px
}

.nav button span {
    max-width: 100%;
    overflow-wrap: anywhere
}

.nav button .ui-icon {
    flex-shrink: 0
}

.shell button,.shell button *,.controls,.controls *,.game-canvas,.game-canvas * {
    user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none
}

.shell button {
    -webkit-tap-highlight-color: transparent
}

.shell input,.shell textarea,.shell select,.shell [contenteditable=true],.shell .share-link {
    user-select: text;
    -webkit-user-select: text;
    -webkit-touch-callout: default;
    touch-action: auto
}

.sheet {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    max-height: calc(var(--visible-height,100dvh) - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
    scroll-padding-bottom: 24px
}

.sheet .close {
    position: sticky;
    top: 0;
    min-width: 44px;
    min-height: 44px;
    z-index: 2
}

.form-field input,.sheet textarea,.share-link {
    font-size: 16px
}

.sheet button {
    overflow-wrap: anywhere
}

.scrim {
    padding-bottom: env(safe-area-inset-bottom,0px)
}

.friend-checks {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap
}

.friend-checks span {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 9px;
    border: 1px solid #455951;
    border-radius: 7px;
    font-size: 12px;
    color: #c1c9bd
}

.friend-checks .complete {
    color: #a6d8b7;
    border-color: #5d8669;
    background: #254635
}

.friend-checks .ui-icon {
    width: 14px;
    height: 14px
}

@media(max-width: 699px) {
    .shell {
        height:min(100dvh,var(--visible-height,100dvh))
    }

    .toast {
        bottom: calc(216px + env(safe-area-inset-bottom,0px))
    }
}

@media(max-width: 374px) {
    .controls {
        gap:10px;
        padding-inline:10px}

    .dpad {
        --pad-size: 44px
    }

    .brand strong {
        font-size: 15px
    }

    .controls .travel-actions {
        gap: 5px
    }

    .controls .travel-actions button {
        font-size: 11px
    }

    .balance-strip {
        padding-inline:12px}

    .sheet {
        padding-inline:14px}

    .share-actions {
        flex-wrap: wrap
    }

    .share-actions button {
        flex: 1;
        min-width: 110px
    }
}

@media(max-height: 740px) {
    .masthead {
        height:47px;
        padding: 5px 12px
    }

    .eyebrow {
        display: none
    }

    .balance-strip {
        min-height: 39px;
        padding: 4px 12px
    }

    .number {
        font-size: 20px
    }

    .controls {
        padding-block:5px}

    .controls .control-note {
        display: none
    }

    .nav {
        height: calc(56px + env(safe-area-inset-bottom,0px));
        padding-top: 3px;
        padding-bottom: calc(3px + env(safe-area-inset-bottom,0px))
    }

    .nav button {
        min-height: 46px
    }

    .intro-hero {
        max-height: 150px
    }

    .intro-content {
        padding: 0 15px 12px
    }

    .intro-card h2 {
        font-size: 23px
    }

    .intro-footer {
        padding: 9px 15px 12px
    }

    .sheet.intro-card {
        max-height: calc(var(--visible-height,100dvh) - 20px - env(safe-area-inset-bottom,0px))
    }
}

@media(min-width: 700px) {
    .shell {
        height:calc(100dvh - 48px)
    }
}

.intro-currencies {
    display: flex;
    justify-content: center;
    padding: 9px 10px;
    border: 1px solid #4a6357;
    border-radius: 8px;
    background: #14272d;
    color: #e7c783!important;
    letter-spacing: 1.2px;
    font-weight: 700
}

.address-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 15px;
    margin: 12px 0;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #12252b
}

.address-card label {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap
}

.address-card label .ui-icon {
    width: 20px;
    height: 20px
}

.address-card label small {
    margin-inline-start:auto;color: #a9bcb5
}

.address-card input,.withdraw-form select {
    display: block;
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: 11px;
    border: 1px solid #466157;
    border-radius: 8px;
    color: #e8ebdf;
    background: #0d1e24;
    font: inherit;
    font-size: 16px
}

.address-card input {
    direction: ltr
}

.address-card button {
    min-height: 44px
}

.withdraw-form>label {
    display: block;
    margin: 17px 0 8px
}

.withdraw-numbers {
    margin: 18px 0;
    display: grid;
    gap: 10px
}

.withdraw-numbers>div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    min-width: 0
}

.withdraw-numbers dt {
    color: #afc1b8;
    flex-shrink: 0
}

.withdraw-numbers dd {
    margin: 0;
    overflow-wrap: anywhere;
    text-align: end;
    font-variant-numeric: tabular-nums
}

.withdraw-numbers .net {
    border-top: 1px solid var(--line);
    padding-top: 13px;
    color: var(--gold);
    font-weight: 700
}

.withdraw-numbers .net dt {
    color: inherit
}

.currency-badges {
    display: flex;
    gap: 7px;
    flex-wrap: wrap
}

.currency-badges span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .4px;
    padding: 5px 9px;
    border: 1px solid #627b61;
    border-radius: 6px;
    background: #183029
}

.bound-destination {
    padding: 13px;
    border: 1px solid #415b51;
    border-radius: 10px;
    display: grid;
    gap: 10px;
    margin: 14px 0
}

.bound-destination code {
    display: block;
    direction: ltr;
    overflow-wrap: anywhere;
    white-space: normal;
    font-size: 12px;
    color: #c4d5c9
}

.bound-destination button {
    width: 100%;
    min-height: 44px
}

.withdraw-form>.primary {
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center
}

.withdraw-form select {
    color-scheme: dark
}

.maintenance-screen {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 24px;
    padding-bottom: max(24px,env(safe-area-inset-bottom));
    background: radial-gradient(ellipse at top,#284537,#081b21 65%);
    color: #f9edc7;
    touch-action: manipulation
}

.maintenance-card {
    width: min(100%,420px);
    text-align: center
}

.maintenance-card>span {
    display: block;
    color: #e8bd60;
    font-size: 54px;
    margin-bottom: 24px
}

.maintenance-card h1 {
    font-size: clamp(22px,6vw,32px);
    line-height: 1.5;
    overflow-wrap: anywhere
}

.maintenance-card p {
    font-size: 12px;
    letter-spacing: 3px;
    opacity: .6;
    margin: 24px 0
}

.maintenance-card button {
    margin: auto;
    width: min(100%,260px)
}

.rank-value {
    min-width: 0;
    max-width: 65%;
    overflow-wrap: anywhere
}

.own-rank>b {
    min-width: 0;
    max-width: 65%;
    font-variant-numeric: tabular-nums
}

.own-rank>b>span {
    display: block
}