@charset "utf-8";

/* =========================================================
   MENTAL theme — asylum / industrial metal (site-wide)
   Loaded after sugar-*.css. Mimics homepage capture look.
   ========================================================= */

:root,
html.dark {
    --mental-bg: #121110;
    --mental-bg-2: #1a1714;
    --mental-panel: #24201c;
    --mental-metal: #2e2924;
    --mental-border: #6a5644;
    --mental-border-bright: #8a7058;
    --mental-red: #c41e1e;
    --mental-red-bright: #ff2a2a;
    --mental-red-deep: #7a1010;
    --mental-text: #f3efe8;
    --mental-muted: #b0a79c;
    --mental-green: #7db84a;
    --mental-green-bg: #24301f;
    --mental-shadow: 0 10px 28px rgba(0, 0, 0, 0.55);
    --mental-inset: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -2px 6px rgba(0, 0, 0, 0.45);
    --sugar-primary: var(--mental-red);
    --sugar-primary-bright: var(--mental-red-bright);
    --sugar-primary-deep: var(--mental-red-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-border-bright);
    --sugar-red-border: rgba(196, 30, 30, 0.45);
    --sugar-red-border-hover: rgba(255, 42, 42, 0.75);
    --sugar-glow-sm: 0 2px 10px rgba(196, 30, 30, 0.28);
    --sugar-glow-md: 0 4px 18px rgba(196, 30, 30, 0.38);
    --sugar-glow-lg: 0 8px 28px rgba(196, 30, 30, 0.45);
    --sugar-glow-card: var(--mental-shadow);
    --sugar-btn-gradient: linear-gradient(180deg, #6e2424 0%, #c41e1e 48%, #6a0f0f 100%);
    --sugar-btn-gradient-hover: linear-gradient(180deg, #8a3030 0%, #ff2a2a 48%, #6a0f0f 100%);
    --sugar-btn-secondary: #3a342e;
    --sugar-balance: var(--mental-green);
}

/* ── Page canvas ── */
html.dark,
html.dark body,
body.sugar-layout,
.sugar-layout,
.sugar-app,
#app.sugar-app {
    background-color: var(--mental-bg) !important;
    background-image:
        radial-gradient(ellipse 90% 60% at 50% 0%, rgba(120, 20, 20, 0.22) 0%, transparent 55%),
        radial-gradient(ellipse 70% 50% at 100% 100%, rgba(0, 0, 0, 0.65) 0%, transparent 50%),
        url('/images/mental/bg-grunge.jpg') !important;
    background-size: auto, auto, cover !important;
    background-attachment: fixed, fixed, fixed !important;
    background-position: center, center, center !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:
        radial-gradient(ellipse 80% 45% at 70% 15%, rgba(196, 30, 30, 0.16) 0%, transparent 55%),
        linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, transparent 30%, rgba(0, 0, 0, 0.45) 100%) !important;
}

/* ── Header: brushed metal bar ── */
.sugar-header {
    height: 72px !important;
    background:
        linear-gradient(180deg, rgba(55, 48, 42, 0.92) 0%, rgba(28, 24, 20, 0.96) 100%),
        url('/images/mental/header-metal.jpg') center / cover no-repeat !important;
    border-bottom: 2px solid #5a4333 !important;
    box-shadow:
        0 1px 0 rgba(196, 30, 30, 0.35),
        0 8px 24px rgba(0, 0, 0, 0.55) !important;
}

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

.sugar-menu-btn,
.sugar-header-icon-btn {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid #6a5644 !important;
    border-radius: 4px !important;
    background:
        linear-gradient(180deg, #3a342e 0%, #1c1814 100%) !important;
    color: #ddd4c8 !important;
    box-shadow: var(--mental-inset), 0 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.sugar-menu-btn:hover,
.sugar-header-icon-btn:hover {
    border-color: var(--mental-red) !important;
    color: var(--mental-red-bright) !important;
    box-shadow: var(--sugar-glow-sm), var(--mental-inset) !important;
}

.sugar-header-icon-inner {
    border-radius: 2px !important;
}

.sugar-logo img {
    max-height: 52px !important;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.65));
}

.sugar-logo-text {
    color: var(--mental-red-bright) !important;
    text-shadow: 0 0 12px rgba(196, 30, 30, 0.55);
    letter-spacing: 0.08em !important;
}

/* Wallet = digital BALANCE plate */
.sugar-wallet-group {
    height: 48px !important;
    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.45));
}

.sugar-wallet-info {
    min-width: 150px !important;
    height: 48px !important;
    padding: 0 14px !important;
    border: 2px solid #3f4a35 !important;
    border-right: none !important;
    border-radius: 3px 0 0 3px !important;
    background:
        linear-gradient(180deg, #2f3a28 0%, #1a2216 100%) !important;
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.65) !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: #9aaa8c !important;
}

.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 8px rgba(125, 184, 74, 0.35);
}

.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;
}

.sugar-wallet-action {
    width: 48px !important;
    height: 48px !important;
    border: 2px solid #6a5644 !important;
    border-left: 1px solid #3f4a35 !important;
    border-radius: 0 3px 3px 0 !important;
    background: var(--sugar-btn-gradient) !important;
    color: #fff !important;
}

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

.sugar-btn {
    height: 42px !important;
    border-radius: 3px !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
}

.sugar-btn-primary {
    background: var(--sugar-btn-gradient) !important;
    color: #fff !important;
    border: 1px solid #7a5a48 !important;
    box-shadow: var(--mental-inset), var(--sugar-glow-sm) !important;
}

.sugar-btn-secondary {
    background: linear-gradient(180deg, #4a433c 0%, #2a2520 100%) !important;
    color: var(--mental-text) !important;
    border: 1px solid #6a5644 !important;
}

/* ── Sidebar: blood-stained metal door ── */
.sugar-drawer.aside2,
.sugar-sidebar {
    background:
        linear-gradient(180deg, rgba(40, 34, 30, 0.55) 0%, rgba(20, 18, 16, 0.72) 100%),
        url('/images/mental/sidebar-metal.jpg') center top / cover no-repeat !important;
    border: 2px solid #5a4636 !important;
    border-radius: 4px !important;
    box-shadow:
        var(--mental-shadow),
        inset 0 0 40px rgba(80, 10, 10, 0.18) !important;
}

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

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

.sugar-drawer-user {
    background:
        linear-gradient(145deg, rgba(70, 40, 36, 0.55) 0%, rgba(30, 26, 22, 0.88) 100%) !important;
    border: 2px solid #6a5644 !important;
    border-radius: 3px !important;
    box-shadow: inset 0 0 24px rgba(120, 0, 0, 0.2), var(--mental-inset) !important;
}

.sugar-drawer-greeting {
    color: var(--mental-red-bright) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.16em !important;
    text-transform: uppercase !important;
}

.sugar-drawer-name,
.sugar-drawer-balances,
.sugar-drawer-balances span {
    color: #f0dede !important;
}

.sugar-drawer-balances strong,
.sugar-drawer-balances .user_coin_amt,
.sugar-drawer-balances .user_point_amt {
    color: var(--mental-red-bright) !important;
}

.sugar-drawer-divider {
    height: 2px !important;
    background: linear-gradient(90deg, transparent, rgba(196, 30, 30, 0.75), transparent) !important;
    border: 0 !important;
    margin: 14px 0 !important;
}

.sugar-drawer-nav-label {
    color: var(--mental-red-bright) !important;
    font-size: 11px !important;
    font-weight: 900 !important;
    letter-spacing: 0.14em !important;
    border-bottom: 1px solid rgba(196, 30, 30, 0.35);
    padding-bottom: 6px;
}

.sugar-drawer-link-inner,
.sugar-drawer-link-sub-inner {
    border-radius: 2px !important;
    color: #ffd6d6 !important;
    font-weight: 800 !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.65);
}

.sugar-drawer-link-label {
    color: #ffffff !important;
    font-weight: 800 !important;
    letter-spacing: 0.02em;
}

.sugar-drawer-link-icon,
.sugar-drawer-link-icon i,
.sugar-drawer-link i {
    color: #ff2a2a !important;
    filter: drop-shadow(0 0 4px rgba(196, 30, 30, 0.55));
}

.sugar-drawer-link:hover .sugar-drawer-link-inner,
.sugar-drawer-link.is-active .sugar-drawer-link-inner,
.sugar-drawer-link.router-link-active .sugar-drawer-link-inner {
    background: rgba(120, 10, 10, 0.35) !important;
    box-shadow: inset 0 0 0 1px rgba(196, 30, 30, 0.45);
}

.sugar-drawer-link:hover .sugar-drawer-link-label,
.sugar-drawer-link.is-active .sugar-drawer-link-label {
    color: #fff !important;
}

.sugar-drawer-close {
    background: var(--sugar-btn-gradient) !important;
    border-radius: 3px !important;
}

/* ── Home sections ── */
.sugar-marquee {
    background: linear-gradient(180deg, #2a2420 0%, #171310 100%) !important;
    border: 2px solid #5a4636 !important;
    border-radius: 3px !important;
    box-shadow: var(--mental-inset) !important;
}

.sugar-hero {
    margin-bottom: 18px !important;
    border: 3px solid #6a5644 !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, 0.7),
        inset 0 0 0 1px rgba(140, 110, 80, 0.35),
        var(--mental-shadow) !important;
    background: #0c0b0a !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: 2px solid #6a5644 !important;
    border-radius: 2px !important;
    background: linear-gradient(180deg, #3a322c 0%, #1a1612 100%) !important;
    color: var(--mental-red-bright) !important;
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%, 0 50%);
}

.sugar-hero-nav-prev {
    clip-path: polygon(0 0, 82% 0, 100% 50%, 82% 100%, 0 100%);
}

.sugar-hero-nav:hover {
    background: linear-gradient(180deg, #5a2020 0%, #2a1010 100%) !important;
    color: #fff !important;
}

.sugar-hero .swiper-pagination-bullet-active {
    background: var(--mental-red-bright) !important;
}

.sugar-board-section,
.sugar-game-page,
.sugar-board-page {
    position: relative;
}

.sugar-board-head {
    padding: 8px 10px;
    margin-bottom: 10px !important;
    background: linear-gradient(180deg, rgba(50, 42, 36, 0.9) 0%, rgba(24, 20, 16, 0.95) 100%);
    border: 1px solid #5a4636;
    border-radius: 3px;
    box-shadow: var(--mental-inset);
}

.sugar-board-title {
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #fff !important;
}

.sugar-board-title-icon {
    color: var(--mental-red-bright) !important;
    filter: drop-shadow(0 0 6px rgba(196, 30, 30, 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: 2px !important;
    border: 1px solid #6a5644 !important;
    background: linear-gradient(180deg, #3a322c 0%, #1c1814 100%) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

.sugar-board-more {
    background: var(--sugar-btn-gradient) !important;
    border-color: #7a4030 !important;
}

.sugar-board-more:hover,
.sugar-board-nav-btn:hover {
    border-color: var(--mental-red) !important;
    color: #fff !important;
}

.sugar-notice-card,
.sugar-game-card {
    border: 2px solid #6a5644 !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #2a2420 0%, #151210 100%) !important;
    box-shadow:
        var(--mental-shadow),
        inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    overflow: hidden;
}

.sugar-notice-card:hover,
.sugar-game-card:hover {
    border-color: var(--mental-red) !important;
    transform: translateY(-2px);
    box-shadow: var(--sugar-glow-md), var(--mental-shadow) !important;
}

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

.sugar-notice-card-body,
.sugar-game-card-body {
    background: linear-gradient(180deg, #2a221c 0%, #171310 100%) !important;
    border-top: 1px solid #5a4636 !important;
    color: #fff !important;
}

.sugar-footer {
    background:
        linear-gradient(180deg, rgba(24, 20, 16, 0.95) 0%, rgba(10, 9, 8, 0.98) 100%) !important;
    border-top: 2px solid #5a4636 !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: linear-gradient(180deg, rgba(42, 36, 30, 0.92) 0%, rgba(20, 17, 14, 0.96) 100%) !important;
    border: 2px solid #5a4636 !important;
    border-radius: 4px !important;
    box-shadow: var(--mental-shadow), var(--mental-inset) !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;
}

.sugar-main table,
.sugar-main .myTable,
.sugar-main .info_wrap table {
    border-color: #5a4636 !important;
}

.sugar-main td,
.sugar-main th {
    border-color: #4a3c30 !important;
    color: var(--mental-text) !important;
    background: transparent !important;
}

.sugar-main tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.02) !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: #14110f !important;
    border: 2px solid #5a4636 !important;
    border-radius: 3px !important;
    color: #fff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55) !important;
}

.sugar-main input:focus,
.sugar-main select:focus,
.sugar-main textarea:focus {
    border-color: var(--mental-red) !important;
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(196, 30, 30, 0.25), inset 0 2px 6px rgba(0, 0, 0, 0.55) !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: var(--sugar-btn-gradient) !important;
    border: 1px solid #7a5a48 !important;
    border-radius: 3px !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55) !important;
    box-shadow: var(--mental-inset), var(--sugar-glow-sm) !important;
}

.btn1_1:hover,
.btn2_1:hover,
.btn3_1:hover,
.utill_btn1:hover,
.login_btn1:hover {
    background: var(--sugar-btn-gradient-hover) !important;
    filter: brightness(1.05);
}

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

.sugar-main .pagination .page-link,
.sugar-main .page-item .page-link {
    background: #1c1814 !important;
    border-color: #5a4636 !important;
    color: #fff !important;
}

.sugar-main .pagination .active .page-link,
.sugar-main .page-item.active .page-link {
    background: var(--mental-red) !important;
    border-color: #7a4030 !important;
}

/* Login / join modal — MENTAL (override brand-sugar02 blue/navy modal) */
body.sugar-layout.brand-sugar02 #login.modal,
.brand-sugar02 #login.modal,
#login {
    background: rgba(0, 0, 0, 0.75) !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, #2a2420 0%, #171310 55%, #100e0c 100%) !important;
    border: 2px solid #5a4636 !important;
    border-radius: 4px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.06) !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, #7a1010, #c41e1e, #7a1010) !important;
    border-radius: 0 !important;
}

#login .sugar-login-head {
    background:
        linear-gradient(180deg, rgba(70, 40, 36, 0.92) 0%, rgba(28, 22, 18, 0.98) 100%),
        url('/images/mental/header-metal.jpg') center / cover no-repeat !important;
    border-bottom: 2px solid #5a4636 !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: #14110f !important;
    border: 2px solid #5a4636 !important;
    border-radius: 3px !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-red) !important;
}

#login #login-btn {
    background: var(--sugar-btn-gradient) !important;
    border: 1px solid #7a5a48 !important;
    border-radius: 3px !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: var(--mental-inset), var(--sugar-glow-sm) !important;
}

#login #join-btn,
#login #join-btn-anony {
    background: linear-gradient(180deg, #4a433c 0%, #2a2520 100%) !important;
    border: 1px solid #6a5644 !important;
    border-radius: 3px !important;
    color: #f3efe8 !important;
    font-weight: 800 !important;
}

#login #login-btn:hover,
#login #join-btn:hover,
#login #join-btn-anony:hover {
    filter: brightness(1.1);
}

#login .ft-tban img {
    border-radius: 3px !important;
    border: 1px solid #5a4636;
}

#join {
    background: rgba(0, 0, 0, 0.75) !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, #2a2420 0%, #171310 55%, #100e0c 100%) !important;
    border: 2px solid #5a4636 !important;
    border-radius: 4px !important;
    color: #f3efe8 !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

#join .login_title {
    color: #fff !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-left: 3px solid var(--mental-red);
    padding-left: 12px !important;
}

#join .join_title {
    color: #f0dede !important;
    font-weight: 700 !important;
}

#join .join_text {
    color: #9a9086 !important;
}

#join .login_input,
#join select.login_input,
#join select.user_bankname {
    background: #14110f !important;
    border: 2px solid #5a4636 !important;
    border-radius: 3px !important;
    color: #fff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.55) !important;
}

#join .login_input::placeholder {
    color: #7a7068 !important;
}

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

#join .login_btn1 {
    background: var(--sugar-btn-gradient) !important;
    border: 1px solid #7a5a48 !important;
    border-radius: 3px !important;
    color: #fff !important;
    font-weight: 800 !important;
    box-shadow: var(--mental-inset), var(--sugar-glow-sm) !important;
}

#join .login_btn2 {
    background: linear-gradient(180deg, #4a433c 0%, #2a2520 100%) !important;
    border: 1px solid #6a5644 !important;
    border-radius: 3px !important;
    color: #f3efe8 !important;
    font-weight: 700 !important;
}

#join .login_btn1:hover,
#join .login_btn2:hover {
    opacity: 1 !important;
    filter: brightness(1.1);
}

#join .close_btn_cu,
#join .join_close.close_btn_cu {
    color: #ddd4c8 !important;
}

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

#join .register-mode-switch,
#join .register_mode_switch,
#join .mode-switch {
    border-color: #5a4636 !important;
}

#join .register-mode-switch button,
#join .register-mode-switch a,
#join .register_mode_switch button,
#join .mode-switch button {
    background: #1c1814 !important;
    border: 1px solid #5a4636 !important;
    color: #cfc5b8 !important;
    border-radius: 3px !important;
}

#join .register-mode-switch .is-active,
#join .register-mode-switch .active,
#join .register_mode_switch .active,
#join .mode-switch .active {
    background: var(--sugar-btn-gradient) !important;
    border-color: #7a5a48 !important;
    color: #fff !important;
}

#join .register-mode-label.is-active {
    color: #ff8a80 !important;
}

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

#join .register-mode-slider {
    background: #1c1814 !important;
    border-color: #5a4636 !important;
}

#join .register-mode-notice-box {
    background: #14110f !important;
    border: 1px solid #5a4636 !important;
    border-top: 2px solid var(--mental-red) !important;
    border-radius: 3px !important;
    color: #f0dede !important;
}

#join .register-mode-notice-highlight,
#join .register-mode-notice-arrow {
    color: #ff8a80 !important;
}

.sugar-login-head,
.login_modal .modal-header,
.join_modal .modal-header {
    background: linear-gradient(180deg, #3a3028 0%, #1c1814 100%) !important;
    border-bottom: 1px solid #5a4636 !important;
}

.mobile_main_banners,
.header_wrap:not(.sugar-header),
.contents_left {
    background: #1a1714 !important;
}

.sugar-drawer-balances {
    color: #ffbdbd !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: #f5efe6 !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: 2px solid #5a4636 !important;
    border-radius: 4px !important;
    background: linear-gradient(180deg, #2a2420 0%, #151210 100%) !important;
    box-shadow: var(--mental-shadow) !important;
}

.sugar-game-page-banner {
    border: 2px solid #5a4636 !important;
    border-radius: 4px !important;
    box-shadow: var(--mental-shadow) !important;
}