/* PERCEPIBILE_V36_RESPONSIVE_DONATE_V1 */

html,
body {
    max-width: 100%;
    overflow-x: clip;
}

/* Miner e registro condividono la stessa larghezza. */

.v36-responsive-layout {
    box-sizing: border-box;
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(245px, 310px);
    align-items: start;
    gap: clamp(12px, 2vw, 24px);
    width: min(calc(100% - 24px), 1480px);
    margin: 0 auto;
}

.v36-responsive-layout > main {
    box-sizing: border-box;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

.v36-responsive-layout main .panel,
.v36-responsive-layout main .metrics,
.v36-responsive-layout main .metric {
    box-sizing: border-box;
    min-width: 0 !important;
    max-width: 100%;
}

.v36-responsive-layout main input,
.v36-responsive-layout main select {
    box-sizing: border-box;
    max-width: 100%;
}

.v36-responsive-layout #lottery-work-history {
    box-sizing: border-box;
    position: sticky !important;
    inset: auto !important;
    top: 12px !important;
    float: none !important;
    transform: none !important;
    grid-column: 2;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    max-height: calc(100dvh - 24px) !important;
    margin: 12px 0 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    align-self: start;
}

.v36-responsive-layout
#lottery-work-history .history-entry {
    min-width: 0;
    overflow-wrap: anywhere;
}

.v36-responsive-layout
#lottery-work-history .history-job {
    overflow-wrap: anywhere;
}

/* Scelta della destinazione delle eventuali ricompense. */

.v36-wallet-mode {
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    max-width: 100%;
    margin: 14px 0;
    padding: 12px;
    border: 1px solid #866e46;
    border-radius: 12px;
    background: #222b30;
    color: #f0e5ce;
}

.v36-wallet-mode legend {
    padding: 0 6px;
    font-size: 13px;
    font-weight: 700;
}

.v36-wallet-choice {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-size: 13px;
}

.v36-wallet-choice input {
    margin: 0;
    accent-color: #d6b574;
}

.v36-donation-note {
    box-sizing: border-box;
    width: 100%;
    margin: 0 0 12px;
    padding: 10px 12px;
    border-left: 3px solid #d6b574;
    border-radius: 5px;
    background: #27332c;
    color: #e7f1e3;
    font-size: 13px;
    line-height: 1.5;
}

/* Il pulsante del registro compare soltanto su telefono. */

.v36-register-toggle,
.v36-register-close,
.v36-register-backdrop {
    display: none !important;
}

@media (max-width: 1100px) {
    .v36-responsive-layout main .metrics {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

/* Su telefono il registro è un pannello laterale,
   non un blocco aggiunto sotto al miner. */

@media (max-width: 720px) {
    .v36-responsive-layout {
        display: block;
        width: min(calc(100% - 20px), 620px);
    }

    .v36-responsive-layout > main {
        width: 100% !important;
    }

    .v36-responsive-layout main .metrics {
        grid-template-columns: 1fr;
    }

    .v36-responsive-layout #lottery-work-history {
        position: fixed !important;
        inset: 0 0 0 auto !important;
        z-index: 10002;
        display: block;
        width: min(92vw, 390px) !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        margin: 0 !important;
        padding: 18px 14px 30px !important;
        border-radius: 14px 0 0 14px;
        box-shadow: -14px 0 38px #0009;
        transform: translateX(110%) !important;
        transition: transform .22s ease;
        visibility: hidden;
        pointer-events: none;
    }

    .v36-responsive-layout
    #lottery-work-history.v36-drawer-open {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
    }

    .v36-register-toggle {
        position: fixed;
        right: 14px;
        bottom: 14px;
        z-index: 10001;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        min-width: 0;
        max-width: calc(100vw - 28px);
        padding: 12px 16px;
        border: 1px solid #d6b574;
        border-radius: 999px;
        background: #24343a;
        color: #fff0ce;
        box-shadow: 0 5px 20px #0008;
        font-weight: 700;
    }

    .v36-register-close {
        position: sticky;
        top: 0;
        z-index: 2;
        display: block !important;
        width: 100%;
        margin-bottom: 14px;
        padding: 10px;
        background: #33464b;
        color: #fff4d9;
        border: 1px solid #d6b574;
        border-radius: 8px;
    }

    .v36-register-backdrop:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 10000;
        display: block !important;
        background: #000a;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v36-responsive-layout #lottery-work-history {
        transition: none !important;
    }
}


/* PERCEPIBILE_V36_WALLET_UI_V2 */

.v36-wallet-alias {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid #8c7653;
    border-radius: 10px;
    background: #26362d;
    color: #e7f4d9;
    font: 600 15px/1.4 system-ui, sans-serif;
    cursor: default;
}

.v36-wallet-alias[hidden],
.v36-donation-note[hidden] {
    display: none !important;
}

.v36-donate-option {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 12px 0 0;
    padding: 12px 14px;
    border: 1px solid #526570;
    border-radius: 12px;
    background: #222d35;
    color: #f1f2f4;
    cursor: pointer;
    transition:
        background-color .2s,
        border-color .2s;
}

.v36-donate-option:hover {
    border-color: #d6b574;
    background: #2a3940;
}

.v36-donate-option:focus-within {
    outline: 2px solid #d6b574;
    outline-offset: 2px;
}

.v36-donate-option input[type="checkbox"] {
    box-sizing: border-box;
    flex: 0 0 22px;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: #d6b574;
    cursor: pointer;
}

.v36-donate-copy {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.v36-donate-copy strong {
    color: #fff0cb;
    font: 700 14px/1.35 system-ui, sans-serif;
}

.v36-donate-copy small {
    color: #b8c8cd;
    font: 400 12px/1.45 system-ui, sans-serif;
}

.v36-donate-option.v36-donate-selected {
    border-color: #c7a567;
    background: #35402f;
}

.v36-donate-option.v36-donate-selected
.v36-donate-copy small {
    color: #e0ebd2;
}

.v36-donation-note {
    box-sizing: border-box;
    width: 100%;
    margin: 9px 0 12px;
    padding: 10px 12px;
    border-left: 3px solid #d6b574;
    border-radius: 6px;
    background: #29382e;
    color: #e5f0dc;
    font: 400 12px/1.55 system-ui, sans-serif;
}

.v36-donate-locked {
    opacity: .7;
    cursor: default;
}

.v36-donate-locked input[type="checkbox"] {
    cursor: default;
}

@media (max-width: 600px) {
    .v36-donate-option {
        padding: 11px;
        gap: 10px;
    }

    .v36-donate-copy strong {
        font-size: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .v36-donate-option {
        transition: none;
    }
}


/* PERCEPIBILE_V36_DESIGN_V3 */

/* Superficie del miner */
.v36-responsive-layout > main .panel {
    min-width: 0;
    padding: clamp(18px, 2.5vw, 32px);
    border: 1px solid rgba(198, 174, 127, .30);
    border-radius: 22px;
    background:
        linear-gradient(
            145deg,
            rgba(32, 48, 59, .96),
            rgba(18, 31, 42, .97)
        );
    box-shadow:
        0 16px 45px rgba(0, 0, 0, .22),
        inset 0 1px rgba(255, 255, 255, .05);
}

/* Campo wallet: elemento principale della scelta */
.v36-responsive-layout #wallet,
.v36-responsive-layout .v36-wallet-alias {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(198, 174, 127, .48);
    border-radius: 10px;
    background: #142631;
    color: #f1eee6;
    font: 500 14px/1.4 system-ui, sans-serif;
}

.v36-responsive-layout #wallet:focus-visible {
    outline: 2px solid #d9bb80;
    outline-offset: 2px;
}

.v36-responsive-layout .v36-wallet-alias {
    background: #21362f;
    color: #deeddd;
    font-weight: 600;
}

/*
 * Flag discreto: niente card, bordo,
 * sfondo evidenziato o secondo titolo.
 */
.v36-responsive-layout .v36-donate-option,
.v36-responsive-layout
.v36-donate-option.v36-donate-selected,
.v36-responsive-layout .v36-donate-option:hover {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    max-width: 100%;
    margin: 9px 0 0;
    padding: 3px 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    color: #becbd0;
}

.v36-responsive-layout
.v36-donate-option input[type="checkbox"] {
    flex: 0 0 15px;
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: #c8aa76;
}

.v36-responsive-layout .v36-donate-copy {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    min-width: 0;
}

.v36-responsive-layout .v36-donate-copy strong {
    color: #e0ded5;
    font: 500 12px/1.4 system-ui, sans-serif;
}

.v36-responsive-layout .v36-donate-copy small,
.v36-responsive-layout
.v36-donate-selected .v36-donate-copy small {
    color: #91a5ad;
    font: 400 11px/1.4 system-ui, sans-serif;
}

.v36-responsive-layout
.v36-donate-option.v36-donate-selected
.v36-donate-copy strong {
    color: #e9d4a5;
}

.v36-responsive-layout
.v36-donate-option input:focus-visible {
    outline: 2px solid #e5c68d;
    outline-offset: 3px;
}

/* Nota visibile solo quando il flag è selezionato */
.v36-responsive-layout .v36-donation-note {
    margin: 6px 0 10px;
    padding: 5px 0 5px 11px;
    border-left: 2px solid #bda16e;
    border-radius: 0;
    background: transparent;
    color: #b9c9bd;
    font: 400 11px/1.5 system-ui, sans-serif;
}

/* Metriche: lettura più immediata */
.v36-responsive-layout .metrics {
    gap: clamp(8px, 1.2vw, 14px);
}

.v36-responsive-layout .metric {
    min-width: 0;
    padding: clamp(10px, 1.4vw, 16px);
    border: 1px solid rgba(180, 192, 202, .13);
    border-radius: 12px;
    background: rgba(10, 22, 32, .42);
    overflow-wrap: anywhere;
}

/* Pulsanti di azione */
.v36-responsive-layout .controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 24px 0;
}

.v36-responsive-layout #start,
.v36-responsive-layout #stop {
    min-height: 46px;
    border-radius: 11px;
    font-weight: 700;
    letter-spacing: .035em;
}

.v36-responsive-layout #start:not(:disabled) {
    border-color: #d3b37b;
    background: #d6b77f;
    color: #1a2730;
}

.v36-responsive-layout #stop:not(:disabled) {
    border-color: #b87878;
    background: #543239;
    color: #fff0ed;
}

.v36-responsive-layout #start:disabled,
.v36-responsive-layout #stop:disabled {
    opacity: .42;
    cursor: default;
}

/* Registro: superficie coerente con il miner.
   I colori dei singoli esiti restano invariati. */
.v36-responsive-layout #lottery-work-history {
    border: 1px solid rgba(198, 174, 127, .28);
    border-radius: 16px;
    background: #1a2932;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .18);
}

@media (max-width: 720px) {
    .v36-responsive-layout > main .panel {
        padding: 17px 13px;
        border-radius: 16px;
    }

    .v36-responsive-layout
    #lottery-work-history {
        border-radius: 14px 0 0 14px;
    }
}