* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    background-repeat: no-repeat;
    outline: none;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
}

html,
body {
    height: 100%;
    background: var(--globe, #FFF9E9);
}

body {
    overscroll-behavior: none;
    touch-action: manipulation;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}

input,
textarea,
[contenteditable="true"],
.selectable {
    user-select: text;
    -webkit-user-select: text;
}

img,
a {
    -webkit-user-drag: none;
    user-drag: none;
}

.app-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--globe, #FFF9E9);
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.app-preloader--hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.app-preloader__spinner {
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    border: 4px solid rgba(49, 18, 8, 0.15);
    border-top-color: var(--island-orange, #ED4E08);
    animation: app-preloader-spin 0.8s linear infinite;
}

@keyframes app-preloader-spin {
    to {
        transform: rotate(360deg);
    }
}

:root {
    /* ===== BG ===== */
    --island-orange: #ED4E08;
    --island-yellow: #FFB700;
    --island-blue: #97DCF7;
    --island-light-yellow: #FFF4D9;
    --globe: #FFF9E9;
    --overlay: #00000066;
    --island-inner-blue: #001F5D66;
    --island-inner-orange: #5D0F004D;

    /* ===== ___ ===== */
    --island-inner-white: #FFFFFF4D;

    /* ===== text -inv ===== */
    --text-primary: #311208;
    --text-secondary: #311208e6;
    --text-tertiary: #311208cc;

    --white-primary: #ffffff;
    --white-secondary: #ffffffe6;
    --white-tertiary: #ffffffcc;

    /* ===== icon -inv ===== */
    --icon-primary: #311208f2;
    --icon-secondary: #311208d9;
    --icon-tertiary: #311208bf;

    --whiteTrans-primary: #fffffff2;
    --whiteTrans-secondary: #ffffffd9;
    --whiteTrans-tertiary: #ffffffbf;
}

a, button, .btn, .button {
    cursor: pointer;
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.text-center {
    text-align: center;
}

.none {
    display: none !important;
}








.daily__collect-btn,
.content__orange-btn,
.promoSoon-btn,
.dest__btn,
.modal__claim-btn,
.dest__btn-danger,
.ref__modal-destBtn,
.ref__modal-oranBtn {
    display: block;
    background: linear-gradient(180deg, #FFD76E 0%, #FFB900 100%);
    padding: 12px 20px 10px 20px;
    border-radius: 9em;
    border: 1px solid var(--text-primary);
    box-shadow: 1px 1px 0px 0px var(--text-primary), 3px 3px 0px 0px #FFFFFF66 inset;

    font-family: 'Burbank Big Condensed', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 18px;
    letter-spacing: 0%;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-primary);
}

.orange__btn-small {
    width: max-content;
    background: linear-gradient(180deg, #FFD76E 0%, #FFB900 100%);
    padding: 8px 16px 6px 16px;
    border-radius: 24px;
    border: 1px solid #310C0C;
    box-shadow: 1px 1px 0px 0px #310C0C, 3px 3px 0px 0px #FFFFFF66 inset;
    font-family: 'Burbank Big Condensed', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 100%;
    text-transform: uppercase;
    color: var(--text-primary);
}



/* ==========  Button hover, disabled, active effect  ========== */
.destructive__btn:not(.disabled),
.dest__btn:not(.disabled),
.dest__btn-danger:not(.disabled) {
    background-color: #ED4E08;
}

.destructive__btn:not(.disabled):hover,
.dest__btn:not(.disabled):hover,
.dest__btn-danger:not(.disabled):hover {
    background: #FA6C2D;
}

.destructive__btn:not(.disabled):active,
.dest__btn:not(.disabled):active,
.dest__btn-danger:not(.disabled):active {
    background: #BC3A00;
}

.destructive__btn.disabled,
.dest__btn.disabled,
.dest__btn-danger.disabled {
    background: #585858;
}

.orange__btn:not(.disabled) {
    background-color: #FFAD01;
}

.orange__btn:not(.disabled):hover {
    /* background: #FFBD32; */
    background: linear-gradient(180deg, #f3cb68 0%, #f7b502 100%);
}

.orange__btn:not(.disabled):active {
    background: #C18300;
}

.orange__btn.disabled {
    background: #888888;
}



/* ============ Gradient text and shadow ============= */
.grd__shadow-text {
    position: relative;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 1px #000000CC;
    background: linear-gradient(0deg, #FB6800 -25%, #FFDD43 62.84%, #FFDD43 71.67%);

    font-family: 'Burbank Big Condensed', sans-serif;
    font-weight: 900;
    font-size: 30px;
    line-height: 100%;
    letter-spacing: 0%;
    text-transform: uppercase;
}

.grd__shadow-text::after {
    content: var(--data__text);
    position: absolute;
    top: 2px;
    left: 2px;
    z-index: -1;
    background-color: #260D05;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    width: 100%;
    text-align: var(--text__align);
}



.w-100 {
    width: 100%;
}

.dest__btn-danger {
    background: linear-gradient(180deg, #FF7538 0%, #ED4E08 100%);
    color: var(--white-primary);
}


/* typegraph classes */

/* 
.text-4xl {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
}

.text-3xl {
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.text-2xl {
    font-size: 22px;
    font-weight: 600;
    line-height: 1.2;
}

.text-xl {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

.text-lg {
    font-size: 17px;
    font-weight: 400;
    line-height: 22px;
}

.text-base {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
}

.text-sm {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.text-xs {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
}

.text-xss {
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
}

*/