@charset "utf-8";

/* =========================================================
   DIGIMON theme — cyber / neon digital (site-wide)
   Loaded after sugar-*.css. Mimics Digimon homepage capture.
   ========================================================= */

:root,
html.dark {
    --mental-bg: #050a14;
    --mental-bg-2: #0a1424;
    --mental-panel: #0d1a2e;
    --mental-metal: #122038;
    --mental-border: #1e6a9a;
    --mental-border-bright: #00e5ff;
    --mental-cyan: #00e5ff;
    --mental-cyan-bright: #5ef0ff;
    --mental-cyan-deep: #007aa8;
    --mental-gold: #ffc107;
    --mental-gold-bright: #ffe082;
    --mental-red: #e53935;
    --mental-red-bright: #ff5252;
    --mental-red-deep: #8b1a1a;
    --mental-text: #e8f4ff;
    --mental-muted: #8aa0bc;
    --mental-green: #b8ff3c;
    --mental-green-bg: #14301a;
    --mental-shadow: 0 10px 28px rgba(0, 20, 40, 0.65);
    --mental-inset: inset 0 1px 0 rgba(94, 240, 255, 0.12), inset 0 -2px 8px rgba(0, 0, 0, 0.55);
    --mental-glow-cyan: 0 0 12px rgba(0, 229, 255, 0.45);
    --mental-glow-gold: 0 0 12px rgba(255, 193, 7, 0.45);

    --sugar-primary: var(--mental-cyan);
    --sugar-primary-bright: var(--mental-cyan-bright);
    --sugar-primary-deep: var(--mental-cyan-deep);
    --sugar-bg: var(--mental-bg);
    --sugar-bg-lighten: var(--mental-panel);
    --sugar-bg-dark: var(--mental-bg-2);
    --sugar-bg-panel: var(--mental-bg-2);
    --sugar-bg-panel-alt: var(--mental-panel);
    --sugar-border: var(--mental-border);
    --sugar-text: var(--mental-text);
    --sugar-text-muted: var(--mental-muted);
    --sugar-btn-text: #fff;
    --sugar-red: var(--mental-red);
    --sugar-red-bright: var(--mental-red-bright);
    --sugar-red-deep: var(--mental-red-deep);
    --sugar-gold-border: var(--mental-gold);
    --sugar-red-border: rgba(0, 229, 255, 0.4);
    --sugar-red-border-hover: rgba(0, 229, 255, 0.85);
    --sugar-glow-sm: 0 2px 10px rgba(0, 229, 255, 0.28);
    --sugar-glow-md: 0 4px 18px rgba(0, 229, 255, 0.4);
    --sugar-glow-lg: 0 8px 28px rgba(0, 229, 255, 0.5);
    --sugar-glow-card: var(--mental-shadow);
    --sugar-btn-gradient: transparent;
    --sugar-btn-gradient-hover: transparent;
    --sugar-btn-secondary: transparent;
    --sugar-balance: var(--mental-green);
    --digimon-btn-bg: transparent;
    --digimon-btn-border: 1px solid rgba(0, 229, 255, 0.85);
    --digimon-btn-glow: 0 0 8px rgba(0, 229, 255, 0.55), 0 0 18px rgba(0, 229, 255, 0.25);
    --digimon-text-glow: 0 0 8px rgba(0, 229, 255, 0.55);
}

/* ── Page canvas: cyber effect background image ── */
html.dark,
html.dark body,
body.sugar-layout,
.sugar-layout,
.sugar-app,
#app.sugar-app {
    background-color: #020b1c !important;
    background-image: url('/images/sugar/bg-cyber.svg') !important;
    background-size: cover !important;
    background-attachment: fixed !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    color: var(--mental-text) !important;
}

#wrap,
.sugar-main,
.sugar-body,
.contents_wrap,
.contents_right,
.content_box,
.content_box_in,
.content_box_in2,
.con_box20,
.main_game_box,
.main_game_m {
    background: transparent !important;
}

#wrap::before {
    background: transparent !important;
}

/* ── Header: glass + neon line (bg image shows through) ── */
.sugar-header {
    height: 72px !important;
    background: rgba(2, 11, 28, 0.35) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--mental-cyan) !important;
    box-shadow:
        0 0 14px rgba(0, 229, 255, 0.35),
        0 1px 0 rgba(94, 240, 255, 0.2) !important;
}

.sugar-header-inner {
    height: 72px !important;
}

.sugar-menu-btn,
.sugar-header-icon-btn {
    width: 48px !important;
    height: 48px !important;
    border: 1px solid rgba(0, 229, 255, 0.85) !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: #e8f4ff !important;
    box-shadow: var(--digimon-btn-glow) !important;
    text-shadow: var(--digimon-text-glow);
}

.sugar-menu-btn:hover,
.sugar-header-icon-btn:hover {
    border-color: var(--mental-cyan-bright) !important;
    color: var(--mental-cyan-bright) !important;
    background: transparent !important;
    box-shadow: 0 0 14px rgba(94, 240, 255, 0.7), 0 0 28px rgba(0, 229, 255, 0.35) !important;
}

.sugar-header-icon-inner {
    border-radius: 4px !important;
    background: transparent !important;
}

.sugar-logo img {
    max-height: 52px !important;
    filter: drop-shadow(0 0 10px rgba(0, 229, 255, 0.45));
}

.sugar-logo-text {
    color: var(--mental-gold) !important;
    text-shadow:
        0 0 8px rgba(0, 180, 255, 0.8),
        0 0 2px #003366,
        2px 2px 0 #003366;
    letter-spacing: 0.06em !important;
    font-weight: 900 !important;
}

/* Wallet = BALANCE plate (outline glass) */
.sugar-wallet-group {
    height: 48px !important;
    filter: drop-shadow(0 0 8px rgba(0, 229, 255, 0.25));
}

.sugar-wallet-info {
    min-width: 150px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 1px solid rgba(0, 229, 255, 0.75) !important;
    border-right: none !important;
    border-radius: 6px 0 0 6px !important;
    background: rgba(2, 11, 28, 0.25) !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35) !important;
}

.sugar-wallet-coin-icon,
.sugar-wallet-chevron {
    display: none !important;
}

.sugar-wallet-info-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    line-height: 1.15 !important;
}

.sugar-wallet-label {
    display: block !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: var(--mental-gold) !important;
    text-shadow: 0 0 6px rgba(255, 193, 7, 0.4);
}

.sugar-wallet-amount {
    font-size: 15px !important;
    font-weight: 800 !important;
    font-variant-numeric: tabular-nums;
    color: var(--mental-green) !important;
    text-shadow: 0 0 10px rgba(184, 255, 60, 0.45);
}

.sugar-wallet-amount strong,
.sugar-wallet-amount .user_coin_amt {
    color: var(--mental-green) !important;
    font-weight: 800 !important;
}

.sugar-wallet-currency {
    color: var(--mental-green) !important;
    margin-right: 4px;
}

/* Deposit keeps red accent from capture */
.sugar-wallet-action {
    width: 48px !important;
    height: 48px !important;
    border: 1px solid #ff6b6b !important;
    border-left: 1px solid rgba(0, 229, 255, 0.35) !important;
    border-radius: 0 6px 6px 0 !important;
    background: rgba(180, 30, 30, 0.55) !important;
    color: #fff !important;
    box-shadow: 0 0 12px rgba(229, 57, 53, 0.45) !important;
}

.sugar-wallet-action:hover {
    filter: brightness(1.12);
}

@media (max-width: 1023px) {
    .sugar-wallet-action {
        display: none !important;
    }

    .sugar-wallet-info {
        border-right: 1px solid rgba(0, 229, 255, 0.75) !important;
        border-radius: 6px !important;
    }
}

/* ── Transparent neon buttons (border + text glow only) ── */
.sugar-btn {
    height: 42px !important;
    border-radius: 8px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    background: transparent !important;
    text-shadow: var(--digimon-text-glow);
}

.sugar-btn-primary {
    background: transparent !important;
    color: var(--mental-cyan-bright) !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    box-shadow: var(--digimon-btn-glow) !important;
    text-shadow: var(--digimon-text-glow);
}

.sugar-btn-primary:hover {
    background: transparent !important;
    color: #fff !important;
    border-color: var(--mental-cyan-bright) !important;
    box-shadow: 0 0 14px rgba(94, 240, 255, 0.75), 0 0 28px rgba(0, 229, 255, 0.4) !important;
}

.sugar-btn-secondary {
    background: transparent !important;
    color: var(--mental-text) !important;
    border: 1px solid rgba(0, 229, 255, 0.55) !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25) !important;
}

.sugar-btn-secondary:hover {
    background: transparent !important;
    border-color: var(--mental-cyan) !important;
    color: var(--mental-cyan-bright) !important;
    box-shadow: var(--digimon-btn-glow) !important;
}

/* ── Sidebar: transparent frame over cyber bg image ── */
.sugar-drawer.aside2,
.sugar-sidebar {
    background: rgba(2, 11, 28, 0.28) !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 10px !important;
    box-shadow:
        0 0 16px rgba(0, 229, 255, 0.4),
        0 0 32px rgba(0, 140, 200, 0.18),
        inset 0 0 0 1px rgba(94, 240, 255, 0.12) !important;
}

@media (min-width: 1024px) {
    .sugar-drawer.aside2 {
        border-radius: 10px !important;
        max-height: calc(100vh - 96px) !important;
        top: 84px !important;
    }
}

.sugar-drawer-inner {
    padding: 14px 12px !important;
    background: transparent !important;
}

.sugar-drawer-user {
    background: rgba(2, 18, 40, 0.25) !important;
    border: 1px solid rgba(0, 229, 255, 0.75) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.3) !important;
}

.sugar-drawer-greeting {
    color: var(--mental-cyan-bright) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.5);
}

.sugar-drawer-name,
.sugar-drawer-balances,
.sugar-drawer-balances span {
    color: var(--mental-text) !important;
}

.sugar-drawer-balances strong,
.sugar-drawer-balances .user_coin_amt,
.sugar-drawer-balances .user_point_amt {
    color: var(--mental-gold) !important;
    text-shadow: 0 0 6px rgba(255, 193, 7, 0.35);
}

.sugar-drawer-divider {
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(0, 229, 255, 0.85), transparent) !important;
    border: 0 !important;
    margin: 14px 0 !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.45);
}

.sugar-drawer-nav-label {
    color: var(--mental-cyan-bright) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.35);
    padding-bottom: 6px;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.4);
    background: transparent !important;
}

.sugar-drawer-link-inner,
.sugar-drawer-link-sub-inner {
    border-radius: 8px !important;
    color: var(--mental-text) !important;
    font-weight: 800 !important;
    background: transparent !important;
    border: 1px solid transparent;
    text-shadow: 0 0 6px rgba(0, 229, 255, 0.25);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
}

.sugar-drawer-link-label {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
    text-shadow: 0 0 6px rgba(255, 255, 255, 0.25);
}

.sugar-drawer-link-icon,
.sugar-drawer-link-icon i,
.sugar-drawer-link i {
    color: var(--mental-cyan) !important;
    filter: drop-shadow(0 0 5px rgba(0, 229, 255, 0.7));
    background: transparent !important;
}

/* hover: outline glow only */
.sugar-drawer-link:hover .sugar-drawer-link-inner {
    background: transparent !important;
    border-color: rgba(0, 229, 255, 0.7) !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.35);
}

/* active: gold outline + glow (SLOT style) */
.sugar-drawer-link.is-active .sugar-drawer-link-inner,
.sugar-drawer-link.router-link-active .sugar-drawer-link-inner {
    background: transparent !important;
    border: 1px solid var(--mental-gold) !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.55), 0 0 22px rgba(255, 193, 7, 0.25) !important;
}

.sugar-drawer-link:hover .sugar-drawer-link-label {
    color: var(--mental-cyan-bright) !important;
    text-shadow: var(--digimon-text-glow);
}

.sugar-drawer-link.is-active .sugar-drawer-link-label,
.sugar-drawer-link.router-link-active .sugar-drawer-link-label {
    color: var(--mental-gold) !important;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.55);
}

.sugar-drawer-link.is-active .sugar-drawer-link-icon,
.sugar-drawer-link.is-active .sugar-drawer-link-icon i,
.sugar-drawer-link.is-active i,
.sugar-drawer-link.router-link-active .sugar-drawer-link-icon i {
    color: var(--mental-gold) !important;
    filter: drop-shadow(0 0 6px rgba(255, 193, 7, 0.65));
}

.sugar-drawer-close {
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 8px !important;
    color: var(--mental-cyan-bright) !important;
    box-shadow: var(--digimon-btn-glow) !important;
}

.sugar-drawer-logout,
.sugar-drawer a.sugar-drawer-logout {
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.7) !important;
    color: var(--mental-cyan-bright) !important;
    box-shadow: var(--digimon-btn-glow) !important;
}

/* ── Home sections ── */
.sugar-marquee {
    background: rgba(2, 11, 28, 0.3) !important;
    border: 1px solid rgba(0, 229, 255, 0.85) !important;
    border-radius: 8px !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.35) !important;
}

.sugar-hero {
    margin-bottom: 18px !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.35) !important;
    background: transparent !important;
}

.sugar-hero .main_slideshow_pc,
.sugar-hero .sugar-hero-swiper,
.sugar-hero .swiper-slide img {
    border-radius: 0 !important;
}

.sugar-hero-nav {
    width: 42px !important;
    height: 54px !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: var(--mental-cyan-bright) !important;
    clip-path: none;
    box-shadow: var(--digimon-btn-glow);
    text-shadow: var(--digimon-text-glow);
}

.sugar-hero-nav-prev {
    clip-path: none;
}

.sugar-hero-nav:hover {
    background: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(94, 240, 255, 0.7) !important;
}

.sugar-hero .swiper-pagination-bullet {
    background: rgba(0, 229, 255, 0.35) !important;
}

.sugar-hero .swiper-pagination-bullet-active {
    background: var(--mental-gold) !important;
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.6);
}

.sugar-board-section,
.sugar-game-page,
.sugar-board-page {
    position: relative;
    background: transparent !important;
}

.sugar-board-head {
    padding: 8px 10px;
    margin-bottom: 10px !important;
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.45);
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

.sugar-board-title {
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff !important;
    text-shadow: 0 0 10px rgba(0, 229, 255, 0.45);
}

.sugar-board-title-icon {
    color: var(--mental-cyan-bright) !important;
    filter: drop-shadow(0 0 6px rgba(0, 229, 255, 0.55));
}

.sugar-board-more,
.sugar-board-nav-btn,
.sugar-game-page-toolbar .sugar-board-more,
.sugar-game-page-toolbar button {
    height: 34px !important;
    border-radius: 8px !important;
    border: 1px solid rgba(0, 229, 255, 0.85) !important;
    background: transparent !important;
    color: var(--mental-cyan-bright) !important;
    font-weight: 800 !important;
    box-shadow: var(--digimon-btn-glow) !important;
    text-shadow: var(--digimon-text-glow);
}

.sugar-board-more {
    background: transparent !important;
    border-color: rgba(0, 229, 255, 0.9) !important;
}

.sugar-board-more:hover,
.sugar-board-nav-btn:hover {
    border-color: var(--mental-cyan-bright) !important;
    color: #fff !important;
    background: transparent !important;
    box-shadow: 0 0 16px rgba(94, 240, 255, 0.65) !important;
}

/* Game / notice cards — neon cyan frames (art stays, chrome transparent) */
.sugar-notice-card,
.sugar-game-card {
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 10px !important;
    background: rgba(2, 11, 28, 0.35) !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.4) !important;
    overflow: hidden;
}

.sugar-notice-card:hover,
.sugar-game-card:hover {
    border-color: var(--mental-cyan-bright) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 22px rgba(0, 229, 255, 0.55) !important;
}

.sugar-notice-card-thumb img,
.sugar-game-card img {
    filter: contrast(1.05) saturate(1.05);
}

.sugar-notice-card-body,
.sugar-game-card-body {
    background: rgba(2, 11, 28, 0.45) !important;
    border-top: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: #fff !important;
}

.sugar-game-card-body h3,
.sugar-game-card-title {
    color: #fff !important;
    font-weight: 800 !important;
    text-shadow: 0 0 8px rgba(255, 255, 255, 0.35);
}

.sugar-game-card-body p,
.sugar-game-card-sub {
    color: var(--mental-gold) !important;
    text-shadow: 0 0 6px rgba(255, 193, 7, 0.35);
}

.sugar-footer {
    background: rgba(2, 11, 28, 0.4) !important;
    border-top: 1px solid rgba(0, 229, 255, 0.85) !important;
    box-shadow: 0 -4px 20px rgba(0, 229, 255, 0.15) !important;
}

.sugar-footer-logo-text {
    color: var(--mental-gold) !important;
    text-shadow: 0 0 8px rgba(0, 180, 255, 0.6);
}

/* Game search — transparent neon bar */
.sugar-game-search {
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 10px !important;
    background: rgba(2, 11, 28, 0.3) !important;
    box-shadow: 0 0 14px rgba(0, 229, 255, 0.35) !important;
    color: var(--mental-text) !important;
}

.sugar-game-search i {
    color: var(--mental-cyan) !important;
    filter: drop-shadow(0 0 4px rgba(0, 229, 255, 0.5));
}

.sugar-game-search-input {
    color: var(--mental-text) !important;
    background: transparent !important;
}

.sugar-game-search-input::placeholder {
    color: rgba(138, 160, 188, 0.75) !important;
}

/* ── Global page chrome (forms / boards / buttons) ── */
.sugar-main .title_box,
.sugar-main .content_box,
.sugar-main .info_wrap,
.sugar-main .membership-pricing-table,
.sugar-main .borad_box,
.sugar-main .board,
.sugar-game-page-toolbar,
.sugar-login-modal .modal-content,
.popup_box,
.dialog_box {
    background: rgba(2, 11, 28, 0.45) !important;
    border: 1px solid rgba(0, 229, 255, 0.75) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.28) !important;
    color: var(--mental-text) !important;
}

.sugar-main .title_box .title,
.sugar-main .sub-title,
.sugar-main th,
.sugar-main .plan-header {
    color: #fff !important;
    text-shadow: var(--digimon-text-glow);
}

.sugar-main table,
.sugar-main .myTable,
.sugar-main .info_wrap table {
    border-color: rgba(0, 229, 255, 0.3) !important;
    background: transparent !important;
}

.sugar-main td,
.sugar-main th {
    border-color: rgba(30, 106, 154, 0.45) !important;
    color: var(--mental-text) !important;
    background: transparent !important;
}

.sugar-main tr:nth-child(even) td {
    background: rgba(0, 180, 255, 0.04) !important;
}

.sugar-main input.input1,
.sugar-main select.input1,
.sugar-main textarea,
.sugar-main input[type="text"],
.sugar-main input[type="password"],
.sugar-main input[type="number"],
.sugar-main input[type="tel"],
.sugar-main select,
.sugar-main textarea,
.sugar-layout .form-control {
    background: rgba(2, 11, 28, 0.45) !important;
    border: 1px solid rgba(0, 229, 255, 0.55) !important;
    border-radius: 8px !important;
    color: #fff !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.15) !important;
}

.sugar-main input:focus,
.sugar-main select:focus,
.sugar-main textarea:focus {
    border-color: var(--mental-cyan-bright) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.25), 0 0 12px rgba(0, 229, 255, 0.35) !important;
}

.btn1_1,
.btn2_1,
.btn3_1,
.utill_btn1,
.login_btn1,
.tabon,
.sugar-main button[type="submit"]:not(.sugar-drawer-logout),
.sugar-main .btn,
.sugar-main a.btn1_1,
.sugar-main a.btn2_1 {
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 8px !important;
    color: var(--mental-cyan-bright) !important;
    text-shadow: var(--digimon-text-glow) !important;
    box-shadow: var(--digimon-btn-glow) !important;
}

.btn1_1:hover,
.btn2_1:hover,
.btn3_1:hover,
.utill_btn1:hover,
.login_btn1:hover {
    background: transparent !important;
    color: #fff !important;
    border-color: var(--mental-cyan-bright) !important;
    box-shadow: 0 0 16px rgba(94, 240, 255, 0.7) !important;
    filter: none;
}

a:hover {
    color: var(--mental-cyan-bright) !important;
}

.sugar-main .pagination .page-link,
.sugar-main .page-item .page-link {
    background: transparent !important;
    border-color: rgba(0, 229, 255, 0.45) !important;
    color: var(--mental-cyan-bright) !important;
    box-shadow: 0 0 6px rgba(0, 229, 255, 0.2);
}

.sugar-main .pagination .active .page-link,
.sugar-main .page-item.active .page-link {
    background: transparent !important;
    border-color: var(--mental-gold) !important;
    color: var(--mental-gold) !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.45) !important;
}

/* Login / join modal — Digimon neon */
body.sugar-layout.brand-sugar02 #login.modal,
.brand-sugar02 #login.modal,
#login {
    background: rgba(0, 8, 20, 0.78) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.sugar-layout.brand-sugar02 #login .modal_content,
.brand-sugar02 #login .modal_content,
#login .modal_content {
    background:
        linear-gradient(180deg, #122840 0%, #0a1828 55%, #061018 100%) !important;
    border: 2px solid var(--mental-cyan) !important;
    border-radius: 10px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 28px rgba(0, 229, 255, 0.3), inset 0 1px 0 rgba(94, 240, 255, 0.12) !important;
}

body.sugar-layout.brand-sugar02 #login .modal_content::before,
.brand-sugar02 #login .modal_content::before,
#login .modal_content::before {
    background: linear-gradient(to right, #006080, #00e5ff, #006080) !important;
    border-radius: 0 !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.5);
}

#login .sugar-login-head {
    background:
        linear-gradient(180deg, rgba(20, 50, 90, 0.95) 0%, rgba(10, 24, 44, 0.98) 100%) !important;
    border-bottom: 2px solid rgba(0, 229, 255, 0.5) !important;
}

body.sugar-layout.brand-sugar02 #login #userid,
body.sugar-layout.brand-sugar02 #login #passwd,
.brand-sugar02 #login #userid,
.brand-sugar02 #login #passwd,
#login #userid,
#login #passwd {
    background: #081420 !important;
    border: 1px solid rgba(0, 229, 255, 0.45) !important;
    border-radius: 6px !important;
    color: #fff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55) !important;
}

#login #userid:focus,
#login #passwd:focus {
    border-color: var(--mental-cyan-bright) !important;
    box-shadow: 0 0 0 2px rgba(0, 229, 255, 0.25) !important;
}

#login #login-btn {
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 8px !important;
    color: var(--mental-cyan-bright) !important;
    font-weight: 800 !important;
    box-shadow: var(--digimon-btn-glow) !important;
    text-shadow: var(--digimon-text-glow);
}

#login #join-btn,
#login #join-btn-anony {
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.55) !important;
    border-radius: 8px !important;
    color: var(--mental-text) !important;
    font-weight: 800 !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25) !important;
}

#login #login-btn:hover,
#login #join-btn:hover,
#login #join-btn-anony:hover {
    filter: none;
    background: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(94, 240, 255, 0.7) !important;
}

#login .ft-tban img {
    border-radius: 6px !important;
    border: 1px solid rgba(0, 229, 255, 0.45);
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.2);
}

#join {
    background: rgba(0, 8, 20, 0.78) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

body.sugar-layout.brand-sugar02 #join .loginbox,
body.sugar-layout.brand-sugar02 .loginbox,
.brand-sugar02 #join .loginbox,
.brand-sugar02 .loginbox,
#join .loginbox {
    background:
        linear-gradient(180deg, #122840 0%, #0a1828 55%, #061018 100%) !important;
    border: 2px solid var(--mental-cyan) !important;
    border-radius: 10px !important;
    color: var(--mental-text) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), 0 0 28px rgba(0, 229, 255, 0.28), inset 0 1px 0 rgba(94, 240, 255, 0.1) !important;
}

#join .login_title {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-left: 3px solid var(--mental-cyan);
    padding-left: 12px !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.35);
}

#join .join_title {
    color: var(--mental-text) !important;
    font-weight: 700 !important;
}

#join .join_text {
    color: var(--mental-muted) !important;
}

#join .login_input,
#join select.login_input,
#join select.user_bankname {
    background: #081420 !important;
    border: 1px solid rgba(0, 229, 255, 0.45) !important;
    border-radius: 6px !important;
    color: #fff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55) !important;
}

#join .login_input::placeholder {
    color: #5a7088 !important;
}

#join .login_input:focus,
#join select.login_input:focus,
#join select.user_bankname:focus {
    border-color: var(--mental-cyan-bright) !important;
    outline: none !important;
}

#join .login_btn1 {
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 8px !important;
    color: var(--mental-cyan-bright) !important;
    font-weight: 800 !important;
    box-shadow: var(--digimon-btn-glow) !important;
    text-shadow: var(--digimon-text-glow);
}

#join .login_btn2 {
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.55) !important;
    border-radius: 8px !important;
    color: var(--mental-text) !important;
    font-weight: 700 !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.25) !important;
}

#join .login_btn1:hover,
#join .login_btn2:hover {
    opacity: 1 !important;
    filter: none;
    background: transparent !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(94, 240, 255, 0.7) !important;
}

#join .close_btn_cu,
#join .join_close.close_btn_cu {
    color: var(--mental-muted) !important;
}

#join .close_btn_cu:hover {
    color: var(--mental-cyan-bright) !important;
}

#join .register-mode-switch,
#join .register_mode_switch,
#join .mode-switch {
    border-color: rgba(0, 229, 255, 0.35) !important;
}

#join .register-mode-switch button,
#join .register-mode-switch a,
#join .register_mode_switch button,
#join .mode-switch button {
    background: #0c1a30 !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    color: var(--mental-muted) !important;
    border-radius: 6px !important;
}

#join .register-mode-switch .is-active,
#join .register-mode-switch .active,
#join .register_mode_switch .active,
#join .mode-switch .active {
    background: transparent !important;
    border-color: var(--mental-gold) !important;
    color: var(--mental-gold) !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.4) !important;
}

#join .register-mode-label.is-active {
    color: var(--mental-cyan-bright) !important;
}

#join .register-mode-toggle input:checked + .register-mode-slider {
    background: var(--sugar-btn-gradient) !important;
    border-color: var(--mental-cyan) !important;
}

#join .register-mode-slider {
    background: #0c1a30 !important;
    border-color: rgba(0, 229, 255, 0.35) !important;
}

#join .register-mode-notice-box {
    background: #081420 !important;
    border: 1px solid rgba(0, 229, 255, 0.35) !important;
    border-top: 2px solid var(--mental-cyan) !important;
    border-radius: 6px !important;
    color: var(--mental-text) !important;
}

#join .register-mode-notice-highlight,
#join .register-mode-notice-arrow {
    color: var(--mental-gold) !important;
}

.sugar-login-head,
.login_modal .modal-header,
.join_modal .modal-header {
    background: linear-gradient(180deg, #1a3858 0%, #0c1a30 100%) !important;
    border-bottom: 1px solid rgba(0, 229, 255, 0.45) !important;
}

.mobile_main_banners,
.header_wrap:not(.sugar-header),
.contents_left {
    background: var(--mental-bg-2) !important;
}

.sugar-drawer-balances {
    color: var(--mental-text) !important;
}

.sugar-drawer-user-text {
    min-width: 0;
}

.sugar-notice-card-body h3 {
    font-size: 12px !important;
    font-weight: 800 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #e8f4ff !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sugar-card-swiper .swiper-slide {
    width: 260px !important;
}

@media (min-width: 1241px) {
    .sugar-card-swiper .swiper-slide {
        width: 280px !important;
    }
}

.sugar-home-menu a,
.sugar-home-menu-item {
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 10px !important;
    background: rgba(2, 11, 28, 0.3) !important;
    box-shadow: 0 0 12px rgba(0, 229, 255, 0.35) !important;
}

.sugar-home-menu a:hover,
.sugar-home-menu-item:hover {
    border-color: var(--mental-cyan-bright) !important;
    background: transparent !important;
    box-shadow: 0 0 18px rgba(0, 229, 255, 0.55) !important;
}

.sugar-game-page-banner {
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    border-radius: 10px !important;
    box-shadow: 0 0 16px rgba(0, 229, 255, 0.3) !important;
    background: transparent !important;
}

/* Tabs / secondary chrome — transparent neon */
.sugar-main .tab,
.sugar-main .tabs a,
.sugar-main .nav-tabs .nav-link {
    background: transparent !important;
    border-color: rgba(0, 229, 255, 0.4) !important;
    color: var(--mental-muted) !important;
    box-shadow: none !important;
}

.sugar-main .tabon,
.sugar-main .tabs a.active,
.sugar-main .nav-tabs .nav-link.active {
    background: transparent !important;
    border-color: var(--mental-gold) !important;
    color: var(--mental-gold) !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.4) !important;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.4);
}

/* Site banners (telegram / domain) neon frame */
.site-banners img,
.sugar-drawer .sugar-ads-grid img,
.ft-tban img {
    border-radius: 8px;
}

/* Scrollbar — cyan */
html.dark,
html.dark body {
    scrollbar-color: rgba(0, 229, 255, 0.4) transparent;
}
html.dark::-webkit-scrollbar-thumb,
html.dark body::-webkit-scrollbar-thumb {
    background: rgba(0, 229, 255, 0.35) !important;
}
html.dark::-webkit-scrollbar-thumb:hover,
html.dark body::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 229, 255, 0.55) !important;
}

/* ── Final lock: transparent neon over solid sugar-layout fills ── */
.sugar-layout .sugar-sidebar.sugar-drawer.aside2,
.sugar-layout .sugar-drawer.aside2,
.sugar-layout .sugar-sidebar {
    background: rgba(2, 11, 28, 0.28) !important;
    background-image: none !important;
}

.sugar-layout .sugar-drawer-link:hover .sugar-drawer-link-inner,
.sugar-layout .sugar-drawer-link.router-link-active .sugar-drawer-link-inner,
.sugar-layout .sugar-drawer-link.is-active .sugar-drawer-link-inner {
    background: transparent !important;
}

.sugar-layout .sugar-drawer-close,
.sugar-layout .aside_close,
.sugar-layout .aside_close2 {
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    color: #5ef0ff !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.45) !important;
}

.sugar-layout .sugar-btn,
.sugar-layout .sugar-btn-primary,
.sugar-layout .sugar-btn-secondary {
    background: transparent !important;
    background-image: none !important;
}

/* ── Deposit / withdraw / betting / point page buttons ── */
/* Outer <a> only — prevents double border with inner span.btn* */
body.sugar-layout .write_basic_btn a,
body.sugar-layout .sel a,
body.sugar-layout a.btn1_1,
body.sugar-layout a.btn1_2,
body.sugar-layout a.btn2_1,
body.sugar-layout a.btn2_2 {
    display: inline-block !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    color: #5ef0ff !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.45) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.55) !important;
    filter: none !important;
    text-decoration: none !important;
    min-width: 80px !important;
    min-height: 34px !important;
    padding: 0 14px !important;
    line-height: 34px !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 2px 3px !important;
}

body.sugar-layout .write_basic_btn a span,
body.sugar-layout .sel a span,
body.sugar-layout a.btn1_1 > span,
body.sugar-layout a.btn1_2 > span {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    color: inherit !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.55) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 0 4px !important;
    line-height: inherit !important;
}

/* list / delete / read buttons (span.btn2_1 inside a.list-btn etc.) */
body.sugar-layout span.btn2_1,
body.sugar-layout span.btn2_2,
body.sugar-layout .btn2_1,
body.sugar-layout .btn2_2,
body.sugar-layout a.list-btn .btn2_1,
body.sugar-layout a.delete-btn .btn2_1,
body.sugar-layout a.read-btn .btn2_1,
body.sugar-layout a.list-btn .btn3_1,
body.sugar-layout a.delete-btn .btn3_1 {
    display: inline-block !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    color: #5ef0ff !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.45) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.55) !important;
    filter: none !important;
    min-width: 120px !important;
    min-height: 40px !important;
    padding: 0 18px !important;
    line-height: 40px !important;
    text-align: center !important;
    vertical-align: middle !important;
    margin: 2px 4px !important;
    box-sizing: border-box !important;
}

body.sugar-layout a.list-btn,
body.sugar-layout a.delete-btn,
body.sugar-layout a.read-btn,
body.sugar-layout a.next-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
    text-decoration: none !important;
    padding: 0 !important;
    margin: 0 2px !important;
}

body.sugar-layout span.btn2_1:hover,
body.sugar-layout .btn2_1:hover,
body.sugar-layout a.list-btn:hover .btn2_1,
body.sugar-layout a.delete-btn:hover .btn2_1,
body.sugar-layout a.read-btn:hover .btn2_1,
body.sugar-layout a.list-btn:hover .btn3_1 {
    background: transparent !important;
    color: #fff !important;
    border-color: #5ef0ff !important;
    box-shadow: 0 0 16px rgba(94, 240, 255, 0.7) !important;
}

body.sugar-layout span.btn3_1,
body.sugar-layout .btn3_1 {
    display: inline-block !important;
    background: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    color: #5ef0ff !important;
    border-radius: 8px !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.45) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.55) !important;
    filter: none !important;
}

body.sugar-layout a#submit_charge_coin {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    text-shadow: none !important;
}

body.sugar-layout .write_basic_btn a:hover,
body.sugar-layout .sel a:hover,
body.sugar-layout a.btn1_1:hover,
body.sugar-layout a.btn1_2:hover,
body.sugar-layout .btn3_1:hover,
body.sugar-layout span.btn3_1:hover {
    background: transparent !important;
    color: #fff !important;
    border-color: #5ef0ff !important;
    box-shadow: 0 0 16px rgba(94, 240, 255, 0.7) !important;
}

body.sugar-layout .write_basic_btn a:hover span,
body.sugar-layout .sel a:hover span {
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

body.sugar-layout #searchForm .betting-category-tabs li a,
body.sugar-layout .u-tab01.betting-category-tabs li a,
body.sugar-layout .betting-category-tabs li a {
    background: transparent !important;
    background-image: none !important;
    border: 1px solid rgba(0, 229, 255, 0.9) !important;
    color: #5ef0ff !important;
    box-shadow: 0 0 10px rgba(0, 229, 255, 0.45) !important;
    text-shadow: 0 0 8px rgba(0, 229, 255, 0.55) !important;
}

body.sugar-layout #searchForm .betting-category-tabs li a span,
body.sugar-layout .u-tab01.betting-category-tabs li a span,
body.sugar-layout .betting-category-tabs li a span {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    color: inherit !important;
}

body.sugar-layout #searchForm .betting-category-tabs li:not(.active):hover a,
body.sugar-layout .u-tab01.betting-category-tabs li:not(.active):hover a,
body.sugar-layout .betting-category-tabs li:not(.active):hover a {
    background: transparent !important;
    border-color: #5ef0ff !important;
    color: #fff !important;
    box-shadow: 0 0 16px rgba(94, 240, 255, 0.7) !important;
}

body.sugar-layout #searchForm .betting-category-tabs li.active a,
body.sugar-layout .u-tab01.betting-category-tabs li.active a,
body.sugar-layout .betting-category-tabs li.active a {
    background: transparent !important;
    border-color: #ffc107 !important;
    color: #ffc107 !important;
    box-shadow: 0 0 12px rgba(255, 193, 7, 0.5) !important;
    text-shadow: 0 0 8px rgba(255, 193, 7, 0.45) !important;
}

body.sugar-layout .page,
body.sugar-layout .page_wrap .page,
body.sugar-layout .pageon {
    background: transparent !important;
    border: 1px solid rgba(0, 229, 255, 0.7) !important;
    color: #5ef0ff !important;
    box-shadow: 0 0 8px rgba(0, 229, 255, 0.3) !important;
}

body.sugar-layout .pageon {
    border-color: #ffc107 !important;
    color: #ffc107 !important;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.4) !important;
}

/* Mobile gutters: keep content as wide as possible */
@media screen and (max-width: 1023px) {
    body.sugar-layout .sugar-main,
    .sugar-layout .sugar-main {
        padding: 4px !important;
    }

    body.sugar-layout .sugar-main .content_box,
    body.sugar-layout .sugar-main .content_box_in,
    body.sugar-layout .sugar-main .content_box_in2 {
        padding-left: 6px !important;
        padding-right: 6px !important;
    }

    body.sugar-layout .sugar-main .content_box_in,
    body.sugar-layout .sugar-main .content_box_in2 {
        padding-top: 6px !important;
        padding-bottom: 6px !important;
    }

    body.sugar-layout .sugar-board-page,
    body.sugar-layout .sugar-board-page--notice,
    body.sugar-layout .sugar-board-page--event,
    body.sugar-layout .sugar-board-list-page {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

@media screen and (max-width: 767px) {
    body.sugar-layout .sugar-main,
    .sugar-layout .sugar-main {
        padding: 2px !important;
    }

    body.sugar-layout .sugar-main .content_box {
        padding: 6px 4px !important;
    }

    body.sugar-layout .sugar-main .content_box_in,
    body.sugar-layout .sugar-main .content_box_in2 {
        padding: 4px 2px !important;
    }
}