/* =========================================================
   PUDDLE — polish layer (loaded last): dropdowns, FAQ, details, focus, motion, responsive
   ========================================================= */

/* ---------- native <select>: one consistent control everywhere ---------- */
select, .g-select, .kv select {
    -webkit-appearance: none; appearance: none;
    height: 44px; padding: 0 38px 0 14px; border-radius: 8px;
    background-color: var(--bg-2, #2f4553); color: #fff; font: inherit; font-size: 14px; font-weight: 500;
    border: 2px solid transparent; outline: none; cursor: pointer; line-height: 1.2; max-width: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b1bad3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; background-size: 16px;
    transition: border-color .15s, background-color .15s;
}
select:hover { background-color: var(--bg-3, #3e5568); }
select:focus-visible { border-color: var(--ice, #64d2ff); }
select option { background: var(--bg-1, #1a2c38); color: #fff; }
.user-row select, .ur-role { height: 36px; font-size: 13px; }
.g-select, .kv select { width: 100%; }
.sl-tools .g-select { width: 210px; }

/* ---------- custom dropdown (wallet coin picker etc.) ---------- */
.dd-btn { min-height: 48px; border-radius: 8px; background: var(--bg-2, #2f4553); border: 2px solid transparent; transition: border-color .15s, background .15s; }
.dd-btn:hover { background: var(--bg-3, #3e5568); border-color: transparent; }
.dd.open .dd-btn { border-color: var(--ice, #64d2ff); background: var(--bg-2, #2f4553); }
.dd-menu { margin-top: 6px; padding: 6px; border-radius: 10px; background: var(--bg-1, #1a2c38); border: 1px solid var(--bg-3, #3e5568); box-shadow: 0 14px 34px rgba(0, 0, 0, .5); max-height: 320px; overflow-y: auto; animation: ddIn .14s ease-out; }
.dd-opt { border-radius: 8px; padding: 10px 12px; transition: background .12s; }
.dd-opt:hover:not(:disabled) { background: var(--bg-2, #2f4553); }
.dd-opt.soon, .dd-opt:disabled { opacity: .5; cursor: not-allowed; }
.dd-s { font-family: inherit; font-size: 11px; font-weight: 600; letter-spacing: .04em; }
@keyframes ddIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* ---------- FAQ / details accordions ---------- */
.faq-wrap, .faq-list, main details.faq:first-of-type { }
details.faq {
    background: var(--bg-1, #1a2c38); border: 1px solid var(--bg-2, #2f4553); border-radius: 10px;
    margin: 0 0 10px; padding: 0; max-width: 820px; overflow: hidden; box-shadow: none;
    transition: border-color .15s, background .15s;
}
details.faq:last-of-type { border-bottom: 1px solid var(--bg-2, #2f4553); }
details.faq:hover { border-color: var(--bg-3, #3e5568); }
details.faq[open] { border-color: var(--ice-border, rgba(100, 210, 255, .35)); background: var(--bg-1, #1a2c38); }
details.faq summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 20px; cursor: pointer; list-style: none; user-select: none;
    font-family: var(--font-main, "Inter", system-ui, sans-serif); font-size: 15px; font-weight: 600; line-height: 1.4; color: #fff; text-align: left;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::marker { content: ""; }
details.faq summary::after {
    content: ""; flex: none; width: 28px; height: 28px; border-radius: 8px; background-color: var(--bg-2, #2f4553);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23b1bad3' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: center; background-size: 16px;
    transition: transform .2s ease, background-color .15s; font-size: 0;
}
details.faq[open] summary::after { content: ""; transform: rotate(180deg); background-color: var(--ice-bg, rgba(100, 210, 255, .12)); }
details.faq summary:hover::after { background-color: var(--bg-3, #3e5568); }
details.faq summary:focus-visible { outline: 2px solid var(--ice, #64d2ff); outline-offset: -2px; border-radius: 10px; }
details.faq p { padding: 0 20px 20px; margin: 0; max-width: none; font-size: 14px; line-height: 1.7; color: var(--text-1, #b1bad3); animation: faqIn .2s ease-out; }
details.faq p + p { padding-top: 0; margin-top: -8px; }
details.faq p a { color: var(--ice, #64d2ff); }
details.faq p strong { color: #fff; font-weight: 600; }
@keyframes faqIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) { details.faq summary { padding: 16px; font-size: 14px; } details.faq p { padding: 0 16px 16px; } }

/* ---------- general design polish ---------- */
html { scroll-behavior: smooth; }
.btn { transition: background .15s, border-color .15s, transform .08s, box-shadow .15s; }
.btn:active:not(:disabled) { transform: translateY(1px) scale(.99); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.primary:hover, .btn-primary:hover { box-shadow: 0 0 0 3px rgba(0, 231, 1, .18); }
.topbar { box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 6px 18px rgba(0, 0, 0, .12); }
.sidebar .nav-item { transition: background .15s, color .15s; }
.page-head { border-bottom-color: var(--bg-2, #2f4553); }
.page-head .section-title { letter-spacing: -.01em; }
.panel, .stat-card, .orig, .promo, .acc-card { transition: background .15s, box-shadow .15s, transform .15s; }
.orig:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, .35); }
input, textarea { caret-color: var(--ice, #64d2ff); }
input:focus-visible, textarea:focus-visible { outline: none; }
.tx-empty, .np-empty { text-align: center; color: var(--text-2, #557086); padding: 22px 12px; }
table { border-collapse: collapse; }
.bet-table tbody tr { transition: background .12s; }
.bet-table tbody tr:hover { background: rgba(255, 255, 255, .03); }
.modal, .um-card, .lc-rules-card { border-radius: 12px; }
::-webkit-scrollbar-track { background: transparent; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* ---------- responsive hardening ---------- */
img, svg, video, iframe { max-width: 100%; }
.main-inner { min-width: 0; }
.main-inner > * { min-width: 0; }
.page-head { flex-wrap: wrap; }
.page-head .section-copy { max-width: 520px; }
table { max-width: 100%; }
.feed-scroll, .tx-scroll, .table-wrap, .um-body { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 860px) {
    .main-inner { padding-left: 16px; padding-right: 16px; }
    .page-head { align-items: flex-start; flex-direction: column; gap: 8px; }
    .page-head .section-copy { max-width: none; }
}
@media (max-width: 560px) {
    .main-inner { padding-left: 12px; padding-right: 12px; }
    .section-title, .page-head h1 { font-size: 22px; }
    .btn { padding: 0 16px; }
    .modal, .um-card { max-width: calc(100vw - 16px); }
    .toast-stack, .toasts { left: 8px; right: 8px; width: auto; }
    .search-pop { right: 8px; left: 8px; width: auto; }
    .notif-panel { right: 8px; left: 8px; width: auto; }
    .sf-grid { grid-template-columns: 1fr 1fr; }
    .site-footer { padding-left: 0; padding-right: 0; }
}
@media (max-width: 360px) {
    .topbar { padding: 0 8px; gap: 6px; }
    .wallet-pill .wc-amt { font-size: 12.5px; }
    .tb-icons .icon-btn { width: 34px; }
}

/* ---------- 320–400px hardening ---------- */
.aff-link-row { min-width: 0; }
.aff-link-row input { min-width: 0; width: 100%; text-overflow: ellipsis; }
.aff-link-row .btn { flex: none; }
canvas { max-width: 100%; height: auto; }
.feed-head { min-width: 0; }
.feed-head .tabs { display: flex; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.feed-head .tabs::-webkit-scrollbar { display: none; }
.feed-head .tab { flex: 1 0 auto; padding-left: 12px; padding-right: 12px; }
.vip-bubble { max-width: 100%; min-width: 0; }
.promo { min-width: 0; }
@media (max-width: 420px) {
    .promo { padding: 18px; }
    .promo h2, .promo .promo-title { font-size: 22px; overflow-wrap: anywhere; }
    .aff-link-row { flex-direction: column; }
    .aff-link-row .btn { width: 100%; }
    .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
    .tabs::-webkit-scrollbar { display: none; }
    .tab { flex: 1 0 auto; }
}
.promo-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.promo .big, .promo .pk { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 420px) { .promo .big { font-size: clamp(40px, 15vw, 64px); } }

/* =========================================================
   Motion system — one timing for every navbar / sidebar / button / popup interaction
   (before this the topbar, sidebar and buttons each used a different duration)
   ========================================================= */
:root { --mo: .18s; --mo-ease: cubic-bezier(.2, .7, .3, 1); }
.topbar .icon-btn, .topbar .tb-logo, .topbar .btn, .sidebar .nav-item, .sidebar .btn, .nav-item .nav-ico, .nav-badge, .tb-badge, .collapse-btn {
    transition: background var(--mo) var(--mo-ease), color var(--mo) var(--mo-ease), border-color var(--mo) var(--mo-ease), box-shadow var(--mo) var(--mo-ease), transform var(--mo) var(--mo-ease), opacity var(--mo) var(--mo-ease);
}
.sidebar, .main, .topbar { transition-duration: .22s; transition-timing-function: var(--mo-ease); }
.icon-btn:hover, .topbar .tb-logo:hover { transform: none; }
.icon-btn:active:not(:disabled), .nav-item:active { transform: scale(.96); }
.nav-item:hover .nav-ico { transform: translateX(1px) scale(1.06); }
.nav-item.active .nav-ico { color: var(--ice); }
.nav-item.active::before { animation: navBar .22s var(--mo-ease); transform-origin: center; }
@keyframes navBar { from { transform: scaleY(.2); opacity: 0; } to { transform: scaleY(1); opacity: 1; } }
html:not(.nav-collapsed) .nav-label, html:not(.nav-collapsed) .nav-badge { animation: navLabelIn .22s var(--mo-ease); }
@keyframes navLabelIn { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } }
.tb-badge, .nav-badge:not([hidden]) { animation: badgePop .26s var(--mo-ease); }
@keyframes badgePop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } }

/* wallet popup: backdrop fades in, the card springs up, tabs and rows follow */
.wallet-overlay { transition: opacity .2s var(--mo-ease); }
.wallet-overlay .wallet-modal { transform: translateY(18px) scale(.95); opacity: 0; transition: transform .3s cubic-bezier(.2, 1.1, .3, 1), opacity .2s var(--mo-ease); }
.wallet-overlay.open .wallet-modal { transform: none; opacity: 1; }
.wallet-overlay.open .wallet-tabs, .wallet-overlay.open .wpane:not([hidden]) > * { animation: walletIn .34s var(--mo-ease) backwards; }
.wallet-overlay.open .wallet-tabs { animation-delay: .06s; }
.wallet-overlay.open .wpane:not([hidden]) > *:nth-child(1) { animation-delay: .1s; }
.wallet-overlay.open .wpane:not([hidden]) > *:nth-child(2) { animation-delay: .15s; }
.wallet-overlay.open .wpane:not([hidden]) > *:nth-child(n+3) { animation-delay: .2s; }
@keyframes walletIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wallet-overlay.open [data-wallet-bal] { animation: walletBal .5s var(--mo-ease) .12s backwards; }
@keyframes walletBal { from { opacity: 0; letter-spacing: .08em; } to { opacity: 1; letter-spacing: normal; } }
.wallet-overlay .wpane:not([hidden]) { animation: walletIn .22s var(--mo-ease); }

/* sign-in modal: "Stay logged in" on the left, "Forgot password?" on the right */
.auth-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-forgot { font-size: 13px; color: var(--ice, #64d2ff); cursor: pointer; text-decoration: none; transition: opacity var(--mo, .18s); }
.auth-forgot:hover { text-decoration: underline; opacity: .9; }