/* ==========================================================================
   The game room: table, thimbles, chips and logs
   ========================================================================== */

/* ---------- Coming aboard ---------- */

.gate {
    display: flex;
    justify-content: center;
    padding: 6vh 0 4vh;
}

.gate__scroll {
    position: relative;
    width: min(430px, 100%);
    padding: 46px 34px 30px;
    animation: unfurl .8s cubic-bezier(.2, 1.2, .4, 1) both;
}

.gate__scroll::before,
.gate__scroll::after {
    /* the wooden rollers of the scroll */
    content: "";
    position: absolute;
    left: -14px;
    right: -14px;
    height: 26px;
    border-radius: 13px;
    background: linear-gradient(180deg, var(--wood-hi), var(--wood) 55%, var(--wood-dark));
    box-shadow: inset 0 2px 0 rgba(255, 214, 150, .3), 0 6px 18px rgba(0, 0, 0, .5);
}

.gate__scroll::before { top: -13px; }
.gate__scroll::after { bottom: -13px; }

@keyframes unfurl {
    from { transform: scaleY(.05) translateY(-40px); opacity: 0; }
    60% { opacity: 1; }
    to { transform: scaleY(1) translateY(0); opacity: 1; }
}

.gate__seal {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    font-size: 30px;
    color: #ffe0d2;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #c4402c, var(--blood) 60%, #5d1a12);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .55), inset 0 -4px 10px rgba(0, 0, 0, .4);
    animation: seal-pulse 3.4s ease-in-out infinite;
}

@keyframes seal-pulse {
    50% { transform: translateX(-50%) scale(1.07) rotate(-4deg); }
}

.gate__title {
    text-align: center;
    font-size: 34px;
    line-height: 1.05;
    color: #6a3f18;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}

.gate__title span { color: var(--blood); font-style: italic; }

.gate__sub {
    text-align: center;
    color: #6c5334;
    font-size: 14px;
    line-height: 1.6;
    margin: 12px 0 20px;
}

.gate__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 18px;
    padding: 5px;
    border-radius: 10px;
    background: rgba(90, 60, 25, .16);
}

.gate__tab {
    flex: 1;
    padding: 9px 6px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: #6c5334;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s;
}

.gate__tab.is-active {
    background: linear-gradient(180deg, var(--wood-hi), var(--wood));
    color: var(--gold-bright);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .35);
}

.gate .field__label { color: #7a5c33; }

.gate .input {
    background: rgba(255, 255, 255, .45);
    border-color: rgba(120, 85, 40, .5);
    color: var(--ink);
    box-shadow: inset 0 2px 6px rgba(120, 85, 40, .25);
}

.gate .input::placeholder { color: rgba(90, 68, 38, .45); }

.gate__note { margin: 14px 0 0; text-align: center; font-size: 12px; color: #7a5c33; }


/* The medallion also serves as the wax seal on the sign-in scroll */
.gate__seal--logo {
    width: 76px;
    height: 76px;
    padding: 0;
    background: none;
    box-shadow: none;
    top: -38px;
}

.gate__seal--logo .logo { gap: 0; }
.gate__seal--logo .logo__word { display: none; }
.gate__seal--logo .logo__mark { width: 76px; height: 76px; }

/* ---------- Upper deck ---------- */

.topbar {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 14px 20px;
    margin-bottom: 18px;
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    text-decoration: none;
}

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

.topbar__skull {
    font-size: 30px;
    filter: drop-shadow(0 0 10px rgba(232, 180, 76, .6));
    animation: skull-sway 5s ease-in-out infinite;
}

@keyframes skull-sway { 50% { transform: rotate(8deg) scale(1.06); } }

.topbar__title {
    font-family: var(--font-display);
    font-size: 22px;
    color: var(--gold-bright);
    text-shadow: 0 2px 0 rgba(0, 0, 0, .55);
}

.topbar__sub { font-size: 12px; color: var(--text-dim); }
.topbar__brand .topbar__sub { padding-left: 2px; }

.purse {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    border: 2px solid rgba(0, 0, 0, .45);
    background: linear-gradient(180deg, rgba(0, 0, 0, .45), rgba(0, 0, 0, .25));
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5), 0 0 0 1px rgba(232, 180, 76, .2);
    transition: transform .25s cubic-bezier(.34, 1.6, .64, 1), box-shadow .25s;
}

.purse.is-bumped {
    transform: scale(1.08);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, .5), 0 0 26px rgba(232, 180, 76, .55);
}

.purse__label { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-dim); }
.purse__value { font-family: var(--font-display); font-size: 19px; color: var(--gold-bright); }
.purse__cur { font-size: 12px; color: var(--text-dim); }

.topbar__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- The table ---------- */

.table {
    position: relative;
    padding: 26px 24px 24px;
    margin-bottom: 18px;
    overflow: hidden;
}

.table__lantern {
    position: absolute;
    top: 30px;
    width: 38px;
    height: 56px;
    border-radius: 7px 7px 11px 11px;
    background: linear-gradient(180deg,
        #2a1c0e 0 5px,
        #7a5527 5px 11px,
        rgba(255, 214, 120, .95) 11px,
        rgba(255, 158, 40, .88) 74%,
        #7a5527 84%,
        #2a1c0e 100%);
    box-shadow: 0 0 40px 12px rgba(255, 176, 60, .28), inset 0 0 10px rgba(120, 60, 0, .5);
    animation: lantern-flicker 2.6s ease-in-out infinite;
}

/* the rope and ring the lantern hangs from */
.table__lantern::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -30px;
    width: 3px;
    height: 30px;
    margin-left: -1.5px;
    background: linear-gradient(180deg, #4a3418, #8a6437);
}

.table__lantern::after {
    content: "";
    position: absolute;
    left: 50%;
    top: -9px;
    width: 16px;
    height: 16px;
    margin-left: -8px;
    border: 2.5px solid #8a6437;
    border-radius: 50%;
    background: transparent;
}

.table__lantern--left { left: 34px; }
.table__lantern--right { right: 34px; animation-delay: -1.1s; }

@keyframes lantern-flicker {
    0%, 100% { box-shadow: 0 0 40px 12px rgba(255, 176, 60, .26); filter: brightness(1); }
    35% { box-shadow: 0 0 56px 18px rgba(255, 190, 80, .42); filter: brightness(1.15); }
    58% { box-shadow: 0 0 34px 10px rgba(255, 160, 50, .22); filter: brightness(.92); }
}

.table__banner {
    position: relative;
    width: fit-content;
    margin: 0 auto 6px;
    padding: 7px 30px;
    background: linear-gradient(180deg, var(--blood-light), var(--blood) 60%, #5f1a11);
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 200, 180, .35);
}

.table__banner::before,
.table__banner::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 18px;
    background: inherit;
}

.table__banner::before { left: -16px; clip-path: polygon(100% 0, 100% 100%, 0 50%); }
.table__banner::after { right: -16px; clip-path: polygon(0 0, 0 100%, 100% 50%); }

.table__banner-text {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #ffe3d5;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}

/* ---------- The thimble stage ---------- */

.stage {
    position: relative;
    height: 320px;
    margin: 10px 0 4px;
    perspective: 900px;
}

.stage__barrel {
    position: absolute;
    left: 50%;
    bottom: 26px;
    width: min(680px, 96%);
    height: 130px;
    transform: translateX(-50%);
    border-radius: 50% / 26%;
    background:
        repeating-linear-gradient(90deg, rgba(0, 0, 0, .22) 0 3px, transparent 3px 26px),
        radial-gradient(ellipse at 50% 20%, #7c5230, #4d3119 55%, #2b1a0d 100%);
    box-shadow: 0 26px 50px rgba(0, 0, 0, .6), inset 0 6px 18px rgba(255, 200, 140, .18);
}

.stage__lightpool {
    position: absolute;
    left: 50%;
    bottom: 40px;
    width: min(560px, 90%);
    height: 190px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(ellipse at center, rgba(255, 196, 96, .30), rgba(255, 170, 60, .10) 45%, transparent 72%);
    filter: blur(4px);
    animation: pool-breathe 4.5s ease-in-out infinite;
}

@keyframes pool-breathe {
    50% { opacity: .72; transform: translateX(-50%) scale(1.06); }
}

/* --- Thimble --- */

.cup {
    position: absolute;
    left: 50%;
    bottom: 54px;
    width: 132px;
    height: 172px;
    margin-left: -66px;
    transform: translate3d(0, 0, 0);
    will-change: transform;
    cursor: default;
    filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55));
}

.cup__svg { width: 100%; height: 100%; overflow: visible; }

.stage.is-idle .cup { animation: cup-bob 3.6s ease-in-out infinite; }
.stage.is-idle .cup[data-cup="1"] { animation-delay: -1.2s; }
.stage.is-idle .cup[data-cup="2"] { animation-delay: -2.4s; }

@keyframes cup-bob {
    50% { filter: drop-shadow(0 20px 26px rgba(0, 0, 0, .5)) brightness(1.04); }
}

.stage.is-pickable .cup { cursor: pointer; }

.stage.is-pickable .cup:hover .cup__svg,
.stage.is-pickable .cup:focus-visible .cup__svg {
    transform: translateY(-14px) scale(1.04);
    filter: brightness(1.18) drop-shadow(0 0 18px rgba(255, 205, 110, .55));
}

.cup__svg { transition: transform .25s cubic-bezier(.34, 1.5, .64, 1), filter .25s; }

.cup.is-chosen .cup__svg { filter: brightness(1.2) drop-shadow(0 0 26px rgba(255, 220, 130, .8)); }
.cup.is-dimmed { opacity: .55; }

/* --- The pearl --- */

.pearl {
    position: absolute;
    left: 50%;
    bottom: 62px;
    width: 62px;
    height: 62px;
    margin-left: -31px;
    opacity: 0;
    transform: translate3d(0, 0, 0) scale(.4);
    will-change: transform, opacity;
    pointer-events: none;
}

.pearl__core {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 34% 30%, #fffdf6, #ffeec0 30%, #f2c96a 58%, #b8862c 100%);
    box-shadow: 0 0 26px rgba(255, 214, 120, .85), inset 0 -6px 12px rgba(120, 80, 20, .5);
    animation: pearl-glow 2.2s ease-in-out infinite;
}

.pearl__shine {
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 226, 150, .45), transparent 62%);
    animation: pearl-halo 2.8s ease-in-out infinite;
}

@keyframes pearl-glow {
    50% { box-shadow: 0 0 42px rgba(255, 224, 150, 1), inset 0 -6px 12px rgba(120, 80, 20, .5); }
}

@keyframes pearl-halo {
    50% { transform: scale(1.25); opacity: .55; }
}

.pearl.is-visible { opacity: 1; }

/* --- Win burst --- */

.burst { position: absolute; inset: 0; pointer-events: none; }

.spark {
    position: absolute;
    left: 50%;
    bottom: 80px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--gold-bright), var(--gold) 45%, var(--gold-deep));
    box-shadow: 0 0 12px rgba(255, 214, 120, .9);
    will-change: transform, opacity;
}

/* ---------- Status line ---------- */

.stage__status {
    min-height: 42px;
    display: grid;
    place-items: center;
    margin-bottom: 8px;
}

.stage__status-text {
    font-family: var(--font-display);
    font-size: 21px;
    color: var(--gold-bright);
    text-shadow: 0 2px 8px rgba(0, 0, 0, .8);
    animation: status-in .45s cubic-bezier(.2, 1.4, .5, 1) both;
}

.stage__status-text.is-win { color: var(--emerald-light); font-size: 26px; }
.stage__status-text.is-lose { color: #ff9d8a; }

@keyframes status-in {
    from { transform: translateY(10px) scale(.9); opacity: 0; filter: blur(4px); }
}

/* ---------- Bet bar ---------- */

.betbar {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .18));
    box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5);
}

.betbar.is-locked { opacity: .45; pointer-events: none; filter: saturate(.5); }

.betbar__chips { display: flex; gap: 10px; }

.chip {
    --chip-a: #d9483a;
    --chip-b: #8e2418;
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    border: 0;
    cursor: pointer;
    background: radial-gradient(circle at 35% 30%, var(--chip-a), var(--chip-b) 70%);
    box-shadow:
        0 6px 14px rgba(0, 0, 0, .5),
        inset 0 -4px 8px rgba(0, 0, 0, .45),
        inset 0 3px 6px rgba(255, 255, 255, .25);
    transition: transform .18s cubic-bezier(.34, 1.6, .64, 1), box-shadow .18s;
}

.chip::before {
    content: "";
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    border: 3px dashed rgba(255, 255, 255, .5);
    opacity: .7;
}

.chip span {
    position: relative;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, .6);
}

.chip:hover { transform: translateY(-5px) rotate(-6deg); }
.chip:active { transform: translateY(0) scale(.94); }
.chip.is-active { box-shadow: 0 0 0 3px var(--gold-bright), 0 8px 18px rgba(0, 0, 0, .5); }

.chip--blue { --chip-a: #4b8fd0; --chip-b: #1f4a7a; }
.chip--green { --chip-a: #4fb87f; --chip-b: #1d6544; }
.chip--black { --chip-a: #4a4a52; --chip-b: #17171c; }

.betbar__amount { display: flex; align-items: center; gap: 8px; }

.betbar__input { position: relative; }

.betbar__input .input {
    width: 150px;
    padding-right: 46px;
    font-family: var(--font-display);
    font-size: 19px;
    text-align: center;
    color: var(--gold-bright);
}

.betbar__cur {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--text-dim);
    pointer-events: none;
}

.bet-go {
    flex-direction: column;
    gap: 2px;
    padding: 10px 34px;
    border-radius: 12px;
    animation: bet-pulse 2.8s ease-in-out infinite;
}

.bet-go__label { font-family: var(--font-display); font-size: 20px; letter-spacing: .12em; text-transform: uppercase; }
.bet-go__amount { font-size: 12px; opacity: .8; }

@keyframes bet-pulse {
    50% { box-shadow: inset 0 1px 0 rgba(255, 226, 170, .35), 0 0 26px rgba(232, 180, 76, .55), 0 6px 16px rgba(0, 0, 0, .45); }
}

.table__limits { font-size: 12px; margin: 12px 0 0; }

/* ---------- Logs ---------- */

.panels { padding: 8px 18px 18px; }

.tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    padding: 10px 0 14px;
    border-bottom: 2px solid rgba(0, 0, 0, .35);
    margin-bottom: 14px;
}

.tab {
    padding: 8px 16px;
    border: 2px solid transparent;
    border-radius: 9px;
    background: rgba(0, 0, 0, .28);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: color .2s, background .2s, transform .2s;
}

.tab:hover { color: var(--gold-bright); transform: translateY(-1px); }

.tab.is-active {
    color: #38210a;
    background: linear-gradient(180deg, var(--gold-bright), #c08f2e);
    border-color: rgba(0, 0, 0, .4);
}

.tab-panel { display: none; animation: panel-in .3s ease both; }
.tab-panel.is-active { display: block; }

@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }

.row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, .18));
    border-left: 4px solid var(--wood-light);
    animation: row-in .35s ease both;
}

@keyframes row-in { from { opacity: 0; transform: translateX(-12px); } }

.row--win { border-left-color: var(--emerald-light); }
.row--lose { border-left-color: var(--blood-light); }
.row--clickable { cursor: pointer; transition: transform .18s, background .18s; }
.row--clickable:hover { transform: translateX(4px); background: linear-gradient(90deg, rgba(0, 0, 0, .5), rgba(0, 0, 0, .22)); }

.row__main { flex: 1; min-width: 0; }
.row__title { font-size: 14px; font-weight: 600; }
.row__sub { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.row__amount { font-family: var(--font-display); font-size: 17px; white-space: nowrap; }

.empty { padding: 26px; text-align: center; color: var(--text-dim); font-size: 14px; }

.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }

.stat {
    padding: 16px;
    border-radius: 12px;
    background: linear-gradient(160deg, rgba(0, 0, 0, .4), rgba(0, 0, 0, .18));
    box-shadow: inset 0 1px 0 rgba(255, 214, 150, .12);
}

.stat__label { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }
.stat__value { font-family: var(--font-display); font-size: 24px; color: var(--gold-bright); margin-top: 4px; }

.footer { padding: 22px 10px; font-size: 12px; line-height: 1.7; }
.footer__admin { display: block; margin-top: 6px; color: var(--gold); }

/* ---------- Referral deck ---------- */

.ref { padding: 4px 2px 8px; }

.ref__lead { margin: 0 0 18px; font-size: 14px; line-height: 1.7; color: var(--text-dim); }
.ref__lead b { color: var(--gold-bright); }

.ref__linkbox { display: flex; gap: 10px; flex-wrap: wrap; }

.ref__link {
    flex: 1;
    min-width: 240px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
    color: var(--gold-bright);
}

.ref__code { margin: 12px 0 18px; font-size: 13px; color: var(--text-dim); letter-spacing: .04em; }
.ref__code b { font-family: var(--font-display); font-size: 19px; color: var(--gold-bright); letter-spacing: .18em; }

.ref__stats { margin-top: 4px; }
.ref__parent { margin: 16px 0 0; font-size: 13px; color: var(--text-dim); }

.row--referral { border-left-color: var(--emerald-light); }

/* ---------- The breakdown inside the request window ---------- */

.quote {
    margin: 4px 0 18px;
    padding: 14px 16px;
    border-radius: 10px;
    background: linear-gradient(160deg, rgba(0, 0, 0, .42), rgba(0, 0, 0, .2));
    box-shadow: inset 0 1px 0 rgba(255, 214, 150, .12);
    font-size: 14px;
    animation: panel-in .25s ease both;
}

.quote__row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    color: var(--text-dim);
}

.quote__row b { color: var(--text); font-weight: 600; white-space: nowrap; }

.quote__row--total {
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed rgba(232, 180, 76, .35);
    color: var(--text);
}

.quote__row--total b {
    font-family: var(--font-display);
    font-size: 21px;
    color: var(--gold-bright);
}

.quote__hint { color: var(--text-dim); font-size: 13px; line-height: 1.6; }
.quote__warn { margin-top: 8px; color: #ff9d8a; font-size: 13px; }


/* ---------- Crypto cashier ---------- */

.btn--crypto {
    --btn-a: #f7a13b;
    --btn-b: #c2680d;
    color: #2a1403;
    text-shadow: none;
    gap: 10px;
}

.pay-mark { font-size: 18px; font-weight: 800; }

.pay-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-dim);
    text-align: center;
}

.pay-note--test { color: var(--gold); }

/* ---------- Fairness check ---------- */

.fair__note {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed rgba(232, 180, 76, .3);
    font-size: 12px;
    line-height: 1.7;
    color: var(--text-dim);
}

.fair__item { margin-bottom: 12px; }
.fair__key { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); }

.fair__value {
    word-break: break-all;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0, 0, 0, .4);
    margin-top: 4px;
}

/* ---------- Responsive ---------- */

@media (max-width: 780px) {
    .stage { height: 260px; }
    .cup { width: 96px; height: 126px; margin-left: -48px; bottom: 44px; }
    .pearl { width: 46px; height: 46px; margin-left: -23px; bottom: 50px; }
    .topbar { justify-content: center; }
    .topbar__brand { margin-right: 0; }
    .betbar { gap: 12px; }
    .bet-go { width: 100%; }
    .table__lantern { display: none; }
}

/* Referral tab: the crew and the payout log */

.ref__subtitle {
    margin: 22px 0 12px;
    padding-top: 16px;
    border-top: 2px solid rgba(0, 0, 0, .35);
    font-size: 18px;
    color: var(--gold-bright);
}

.ref__stats { margin-bottom: 4px; }
.row__amount.muted { color: var(--text-dim); }

/* ---------- Payout wallet ---------- */

.wallet { margin: 0 0 16px; }

.wallet__current {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(52, 140, 108, .16);
    border: 1px solid rgba(52, 140, 108, .42);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    word-break: break-all;
}

.wallet__form { display: grid; gap: 10px; }
.wallet__form .input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }
.wallet__hint { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-dim); }

.btn--link {
    margin-top: 8px;
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
    color: var(--gold);
    font-size: 12px;
    text-decoration: underline;
    cursor: pointer;
}

/* ---------- Confirm-your-address notice ---------- */

.notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0 0 14px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(233, 185, 90, .12);
    border: 1px solid rgba(233, 185, 90, .38);
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    text-align: center;
}