/* Shared receipt; usable over the game canvas and on the standalone supply page. */
.modal-overlay {
    position:fixed;
    inset:0;
    z-index:10000;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#252820b3;
    backdrop-filter:blur(5px);
    padding:24px;
    overflow-y:auto;
    font-family:'PingFang SC','Microsoft YaHei',sans-serif;
    color:#252820;
    box-sizing:border-box
}

.modal-overlay * {
    box-sizing:border-box
}

.modal-container {
    background:#f5f1e6;
    width:100%;
    max-width:520px;
    max-height:calc(100dvh - 48px);
    overflow-y:auto;
    border:1px solid #252820;
    box-shadow:10px 10px 0 #25282033;
    position:relative
}

.modal-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 30px 22px;
    border-bottom:2px solid #252820
}

.pay-kicker {
    font:10px monospace;
    letter-spacing:2px;
    color:#727466
}

.modal-header h2 {
    font-family:'Songti SC','STSong','SimSun',serif;
    font-size:30px;
    letter-spacing:3px;
    margin:9px 0 0
}

.close-btn {
    border:1px solid #c8c6b8;
    width:34px;
    height:34px;
    background:transparent;
    color:#252820;
    font-size:25px;
    cursor:pointer;
    flex-shrink:0
}

.close-btn:hover {
    background:#e5dfce
}

.receipt-banner {
    display:flex;
    align-items:center;
    gap:15px;
    padding:20px 30px;
    background:#e8e6d9;
    border-bottom:1px dashed #a8a999
}

.receipt-banner img {
    width:70px;
    height:58px;
    object-fit:contain
}

.receipt-banner strong {
    font-size:13px
}

.receipt-banner p {
    font-size:11px;
    color:#727466;
    margin:7px 0 0
}

.receipt-seal {
    border:2px solid #c4472c;
    padding:4px;
    color:#c4472c;
    font-family:'Songti SC','SimSun',serif;
    font-size:20px;
    transform:rotate(-9deg);
    margin-left:auto;
    flex-shrink:0
}

.modal-body {
    padding:8px 30px 0
}

.info-row {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:18px 0;
    border-bottom:1px solid #d7d4c8;
    font-size:13px
}

.info-row label,.info-label {
    color:#727466;
    flex-shrink:0
}

.info-row>span:last-child {
    overflow-wrap:anywhere;
    text-align:right
}

.amount-container {
    display:flex;
    align-items:center;
    gap:8px;
    min-width:0
}

.amount-input {
    width:160px;
    min-width:0;
    max-width:100%;
    padding:11px 12px;
    border:1px solid #b8b8a8;
    background:#faf8f0;
    color:#252820;
    font:14px sans-serif;
    border-radius:0
}

.total-row {
    padding:23px 0
}

.total {
    display:flex;
    align-items:baseline;
    gap:5px;
    color:#c4472c
}

.amount-display {
    font:38px/1.2 Georgia,serif;
    font-variant-numeric:tabular-nums
}

.total small {
    font-size:10px;
    color:#727466;
    margin-left:6px
}

.payment-method {
    flex:1;
    max-width:235px
}

.payment-option {
    display:flex;
    align-items:center;
    gap:9px;
    padding:12px;
    border:1px solid #888e7b;
    background:#eeeee4;
    font-size:13px
}

.payment-icon {
    display:grid;
    place-items:center;
    width:25px;
    height:25px;
    background:#1677ff;
    color:#fff;
    border-radius:4px;
    font-weight:700
}

.payment-check {
    margin-left:auto;
    color:#555f48
}

.payment-note {
    font-size:11px;
    line-height:1.8;
    color:#727466;
    margin:16px 0 0
}

.modal-footer {
    display:flex;
    gap:12px;
    padding:23px 30px
}

.modal-footer .btn {
    padding:15px 20px;
    border:1px solid #252820;
    font:600 13px 'PingFang SC','Microsoft YaHei',sans-serif;
    cursor:pointer;
    flex:1
}

.btn-cancel {
    background:transparent;
    color:#252820
}

.modal-footer .btn-confirm {
    background:#c4472c;
    border-color:#c4472c;
    color:#fff;
    flex:1.5;
    display:flex;
    justify-content:space-between;
    align-items:center
}

.btn-confirm:hover {
    background:#a23823
}

.btn-cancel:hover {
    background:#e5dfce
}

.receipt-bottom {
    border-top:1px dashed #b6b6a7;
    margin:0 30px;
    padding:16px 0;
    display:flex;
    justify-content:space-between;
    gap:10px;
    font-size:10px;
    color:#727466
}

.receipt-bottom span {
    font:8px monospace;
    letter-spacing:1px
}

.supply-layout {
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:75px;
    padding-top:60px;
    padding-bottom:60px;
    min-height:calc(100dvh - 153px)
}

.supply-illustration {
    position:relative;
    min-height:690px;
    overflow:hidden
}

.supply-illustration h1 {
    position:relative;
    font:700 68px/1.15 var(--serif);
    z-index:2;
    margin:25px 0
}

.supply-illustration h1 em {
    font-style:normal;
    color:var(--red)
}

.supply-illustration img {
    position:absolute;
    width:460px;
    max-width:none;
    right:0;
    bottom:-180px;
    z-index:1
}

.supply-orbit {
    position:absolute;
    width:390px;
    height:390px;
    border-radius:50%;
    background:#dddecb;
    right:35px;
    top:200px
}

.supply-orbit:after {
    content:'';
    position:absolute;
    inset:-15px;
    border:1px solid #a6aa8d;
    border-radius:50%
}

.supply-illustration>.micro {
    position:absolute;
    bottom:10px;
    left:0;
    writing-mode:vertical-rl;
    z-index:2
}

.empty-receipt {
    border:1px solid var(--ink);
    background:#faf8f07d;
    padding:30px 35px 0;
    box-shadow:8px 8px 0 #dcd9cb
}

.empty-receipt-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:2px solid var(--ink);
    padding-bottom:22px
}

.empty-receipt h2 {
    font:700 30px var(--serif);
    margin:25px 0 13px
}

.supply-intro {
    font-size:13px;
    color:var(--muted);
    line-height:1.9
}

.empty-order {
    text-align:center;
    border-top:1px dashed var(--line);
    border-bottom:1px dashed var(--line);
    padding:22px 12px;
    margin:25px 0;
    background:#e6e6d650
}

.order-mark {
    display:grid;
    place-items:center;
    width:30px;
    height:35px;
    border:1px solid #969b83;
    margin:auto;
    color:#727466;
    font-size:20px
}

.empty-order h3 {
    font-size:15px;
    font-weight:500;
    margin:15px 0 9px
}

.empty-order p {
    font-size:12px;
    line-height:1.9;
    color:var(--muted);
    margin:0
}

.supply-steps {
    display:flex;
    justify-content:space-between;
    list-style:none;
    padding:0;
    gap:8px;
    margin:26px 0;
    font-size:11px
}

.supply-steps span {
    display:block;
    font:11px monospace;
    color:var(--red);
    margin-bottom:8px
}

.empty-receipt .button {
    width:100%
}

.supply-note {
    font-size:10px;
    color:var(--muted);
    text-align:center;
    line-height:1.8;
    margin:15px 0 25px
}

.empty-receipt .receipt-bottom {
    margin:0
}

@media(max-width:1000px) {
    .supply-layout {
        gap:35px
    }

    .supply-illustration h1 {
        font-size:56px
    }

    .supply-illustration img {
        width:400px;
        right:-15px;
        bottom:-150px
    }

    .supply-orbit {
        width:300px;
        height:300px;
        right:20px;
        top:240px
    }

    .empty-receipt {
        padding:25px 25px 0
    }

    .empty-receipt h2 {
        font-size:26px
    }

}

@media(max-width:700px) {
    .supply-layout {
        grid-template-columns:1fr;
        gap:28px;
        padding-top:30px;
        padding-bottom:40px
    }

    .supply-illustration {
        min-height:475px
    }

    .supply-illustration h1 {
        font-size:43px;
        margin:25px 0
    }

    .supply-illustration .eyebrow {
        font-size:10px;
        letter-spacing:1px
    }

    .supply-illustration img {
        width:320px;
        right:0;
        bottom:-145px
    }

    .supply-orbit {
        width:240px;
        height:240px;
        right:20px;
        top:200px
    }

    .supply-illustration>.micro {
        bottom:0;
        writing-mode:horizontal-tb;
        font-size:9px
    }

    .empty-receipt {
        padding:24px 24px 0
    }

    .empty-receipt h2 {
        font-size:26px
    }

    .supply-page .nav-links {
        gap:10px
    }

    .supply-page .nav-links>a[aria-current] {
        display:none
    }

    .modal-overlay {
        padding:14px
    }

    .modal-container {
        max-height:calc(100dvh - 28px)
    }

    .modal-header {
        padding:21px
    }

    .modal-header h2 {
        font-size:26px
    }

    .receipt-banner {
        padding:16px 20px;
        gap:10px
    }

    .receipt-banner img {
        width:48px;
        height:48px
    }

    .receipt-banner strong {
        font-size:12px
    }

    .receipt-seal {
        font-size:16px
    }

    .modal-body {
        padding:5px 21px 0
    }

    .info-row {
        gap:14px;
        font-size:12px;
        padding:16px 0
    }

    .amount-input {
        width:140px
    }

    .amount-display {
        font-size:32px
    }

    .modal-footer {
        padding:21px;
        gap:9px
    }

    .modal-footer .btn {
        padding:14px 12px
    }

    .receipt-bottom {
        margin:0 21px
    }

    .receipt-bottom span {
        font-size:7px;
        letter-spacing:0
    }

    .payment-method {
        max-width:195px
    }

}