/**
 * Kimetsu capture theme — black + crimson red + metallic gold
 * Homepage reference: dark charcoal bg, gold borders, red CTAs, gold icon rings.
 */
:root {
  --amp-bg: #0a0a0a;
  --amp-bg-deep: #000000;
  --amp-panel: #141414;
  --amp-panel2: #1a1a1a;
  --amp-panel3: #222222;
  --amp-gold: #c5a059;
  --amp-gold2: #a8843f;
  --amp-gold-bright: #e8c660;
  --amp-bronze: #7a5c2e;
  --amp-red: #b91c1c;
  --amp-red-deep: #8b0000;
  --amp-red-bright: #dc2626;
  --amp-text: #f5f5f5;
  --amp-muted: #888888;
  --amp-line: rgba(197, 160, 89, 0.55);
  --amp-line-soft: rgba(197, 160, 89, 0.28);
  --amp-glow: 0 0 12px rgba(185, 28, 28, 0.4);
  --amp-glow-gold: 0 0 10px rgba(197, 160, 89, 0.35);
  --amp-btn-dark: linear-gradient(180deg, #2a1818 0%, #141010 48%, #0a0808 100%);
  --amp-btn-gold: linear-gradient(180deg, #e8d291 0%, #c5a059 45%, #8f6d32 100%);
  --amp-btn-primary: linear-gradient(180deg, #dc2626 0%, #b91c1c 45%, #8b0000 100%);
  --amp-panel-grad: linear-gradient(180deg, #1c1a14 0%, #12100c 55%, #0a0a0a 100%);
  --amp-metal-text: linear-gradient(180deg, #f3e6bc 0%, #e8c660 40%, #c5a059 70%, #8a6a30 100%);
  --amp-accent: #b91c1c;
}

html { background: var(--amp-bg-deep); }

body {
  background-color: #0a0a0a !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(185, 28, 28, 0.08), transparent 55%),
    radial-gradient(ellipse 60% 40% at 90% 80%, rgba(139, 0, 0, 0.06), transparent 45%),
    linear-gradient(180deg, #111 0%, #0a0a0a 50%, #000 100%) !important;
  color: var(--amp-text) !important;
  background-attachment: fixed;
}

a { color: var(--amp-text); }
a:hover { color: var(--amp-gold-bright); }

/* Ornate gold-framed panels */
.contents_left,
.contents_right .right_event_wrap,
.contents_right .right_customer,
.contents_right .right_domain,
.amp-home-right-links .right_customer,
.amp-home-right-links .right_domain,
.main_board_box,
.pop_login_wrap,
.content_box .write_box,
.list_box,
.container_game .card,
#login .login_box,
#login .modal_content,
#join .join_box,
#join .modal_content,
.content_box {
  background: var(--amp-panel-grad) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    inset 0 0 0 1px rgba(197, 160, 89, 0.25),
    0 0 0 1px rgba(60, 40, 10, 0.6),
    0 6px 20px rgba(0, 0, 0, 0.55) !important;
}

/* —— Header —— */
.header_wrap,
.header_top,
.header_bottom {
  background: #000 !important;
  border-color: rgba(197, 160, 89, 0.2) !important;
}
.header_top { border-bottom: 1px solid rgba(197, 160, 89, 0.22) !important; }
.header_bottom {
  border-bottom: 1px solid rgba(139, 0, 0, 0.4) !important;
  background: #111 !important;
}

.gnb li a {
  color: #e8e8e8 !important;
  font-weight: 500;
}
.gnb li a:hover {
  color: var(--amp-gold-bright) !important;
  text-shadow: 0 0 6px rgba(232, 198, 96, 0.4) !important;
}

/* Logout / auth — red fill + white rim (capture) */
.login_box .login_btn,
.login_box a.login_btn,
button.login_btn {
  background: transparent !important;
  border: 1px solid rgba(255, 255, 255, 0.75) !important;
  color: #fff !important;
  border-radius: 2px !important;
}
.login_box .login_btn:hover,
.login_box a.login_btn:hover {
  border-color: var(--amp-gold) !important;
  color: var(--amp-gold-bright) !important;
}

.login_box .join_btn,
.login_box button.join_btn,
.join_btn {
  background: var(--amp-btn-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.35) !important;
  color: #fff !important;
  border-radius: 2px !important;
  padding: 7px 16px !important;
  font-weight: 700 !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 0 8px rgba(185, 28, 28, 0.4) !important;
  transition: background 0.2s, box-shadow 0.2s, border-color 0.2s !important;
}
.login_box .join_btn:hover,
.login_box button.join_btn:hover,
.join_btn:hover {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 55%, #991b1b 100%) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
  box-shadow: var(--amp-glow), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* User info bar — capture: dark chips, gold values, red message box */
.my_wrap {
  gap: 4px !important;
}
.my {
  background: linear-gradient(180deg, #1a1814 0%, #12100c 100%) !important;
  border: 1px solid rgba(197, 160, 89, 0.28) !important;
  border-radius: 2px !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}
.my_box {
  color: #bababa !important;
  height: 36px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
}
.my_font01,
.my_money,
a.my_money {
  color: var(--amp-gold-bright) !important;
  font-weight: 700 !important;
}
.my_link,
a.my_link {
  color: var(--amp-gold-bright) !important;
  font-weight: 700 !important;
}
.my_line {
  background: rgba(197, 160, 89, 0.35) !important;
  width: 1px !important;
  height: 18px !important;
}
/* 쪽지 — red highlight box */
.my_wrap .my:has(.msnodd) {
  background: linear-gradient(180deg, #8b0000 0%, #5c0000 100%) !important;
  border-color: rgba(220, 38, 38, 0.6) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 0 6px rgba(185, 28, 28, 0.3) !important;
}
.my_wrap .my:has(.msnodd) .my_box,
.my_wrap .my:has(.msnodd) .my_link {
  color: #fff !important;
}

/* LNB quick links — capture: small dark boxes + gold rim */
.lnb_wrap {
  gap: 4px !important;
}
.lnb {
  background: linear-gradient(180deg, #1a1010 0%, #0a0808 100%) !important;
  border: 1px solid rgba(197, 160, 89, 0.35) !important;
  border-radius: 2px !important;
  margin: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s !important;
}
.lnb a {
  color: #e8e8e8 !important;
  height: 36px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
}
.lnb:hover {
  background: linear-gradient(180deg, #2a1818 0%, #141010 100%) !important;
  border-color: rgba(197, 160, 89, 0.55) !important;
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.15) !important;
}
.lnb:hover a {
  color: var(--amp-gold-bright) !important;
}
.lnb.active {
  background: var(--amp-btn-primary) !important;
  border-color: rgba(255, 255, 255, 0.25) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 0 8px rgba(185, 28, 28, 0.35) !important;
}
.lnb.active a {
  color: #fff !important;
}

/* —— Left menu —— */
.contents_left {
  background: linear-gradient(180deg, #1c1a14 0%, #12100c 48%, #0e0c09 100%) !important;
  border-right: 1px solid rgba(197, 160, 89, 0.22) !important;
  box-shadow: inset -1px 0 0 rgba(197, 160, 89, 0.12) !important;
}
.left_menu a {
  border-bottom: 1px solid rgba(197, 160, 89, 0.18) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.02) !important;
  background: transparent !important;
  transition: background 0.2s ease !important;
}
.left_icon {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(197, 160, 89, 0.65) !important;
  border-radius: 50% !important;
  background: rgba(20, 16, 10, 0.9) !important;
  box-shadow:
    0 0 8px rgba(197, 160, 89, 0.25),
    inset 0 0 8px rgba(197, 160, 89, 0.08) !important;
  color: var(--amp-gold-bright) !important;
  -webkit-text-fill-color: var(--amp-gold-bright) !important;
  font-size: 1.05em !important;
}
.left_icon i {
  color: var(--amp-gold-bright) !important;
  background: none !important;
  -webkit-text-fill-color: var(--amp-gold-bright) !important;
  filter: drop-shadow(0 0 3px rgba(197, 160, 89, 0.5));
}
.left_text1 {
  color: #ffffff !important;
  font-weight: 700 !important;
}
.left_text2 {
  color: #888888 !important;
}
.left_menu a:hover,
.left_menu.active a {
  background: linear-gradient(90deg, rgba(185, 28, 28, 0.15), transparent 78%) !important;
  box-shadow: inset 3px 0 0 var(--amp-red) !important;
}
.left_menu a:hover .left_icon,
.left_menu.active a .left_icon {
  border-color: var(--amp-gold-bright) !important;
  box-shadow: var(--amp-glow-gold) !important;
}

/* —— Right rail —— */
.contents_right { background: transparent !important; }
.right_event_title {
  background: #2c2c2c !important;
  border-bottom: 1px solid var(--amp-gold) !important;
  color: var(--amp-gold-bright) !important;
}
.right_event_btn {
  background: var(--amp-btn-dark) !important;
  color: #d0d0d0 !important;
  border-top: 1px solid var(--amp-line-soft) !important;
}
.right_event_btn:hover { color: var(--amp-gold-bright) !important; }
.rc_text,
.rd_text1 { color: #9a9588 !important; }
.rc_text span,
.rd_text1 span,
.rd_text2,
.rd_text3 {
  color: var(--amp-gold-bright) !important;
}

/* —— Page titles —— */
.title_box {
  border-bottom: 1px solid rgba(197, 160, 89, 0.35) !important;
  padding-bottom: 10px;
  margin-bottom: 16px;
}
.title_box::after {
  content: "";
  display: block;
  width: 64px;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, #e8c660, #c5a059, #8b0000);
  box-shadow: 0 0 6px rgba(197, 160, 89, 0.4);
}
.title_box .title {
  color: #ffffff !important;
  font-weight: 800 !important;
}
.title_box .title span {
  color: var(--amp-gold) !important;
}
.s_title1 {
  background: #1a1a1a !important;
  color: var(--amp-gold) !important;
  border-top: 1px solid rgba(197, 160, 89, 0.3) !important;
  border-bottom: 1px solid #000 !important;
}

.info_wrap,
.write_basic,
.write_basic_item,
.list1,
.list2,
.list,
.member_wrap {
  background-color: var(--amp-panel2) !important;
  border-color: rgba(197, 160, 89, 0.18) !important;
  color: var(--amp-text) !important;
}
.info_title,
.info_title2,
.write_title,
.write_title2,
.write_title3,
.list_title1,
.list_title3,
.tab_double > div > div:first-child,
.tab_single > div:first-child {
  background: #1a1a1a !important;
  color: var(--amp-gold-bright) !important;
  border-color: rgba(197, 160, 89, 0.2) !important;
}
.info3 { color: #888 !important; }
.info1,
.font05,
.font11,
.board_font01,
.main_board_title span {
  color: var(--amp-gold) !important;
}

/* Inputs */
.write_basic .input1,
.write_basic input[type="text"],
.write_basic input[type="password"],
.write_basic input[type="number"],
.write_basic select,
.write_basic textarea,
.input1,
.input2,
.input3,
.pop_login_input,
.pop_login_input2,
.pop_login_select,
.select,
.amp-game-search {
  background: #0c0c0c !important;
  border: 1px solid rgba(197, 160, 89, 0.4) !important;
  color: #f0f0f0 !important;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
  border-radius: 2px !important;
}
.write_basic .input1:focus,
.input1:focus,
.pop_login_input:focus,
textarea:focus,
select:focus {
  border-color: var(--amp-gold) !important;
  box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.3), inset 0 2px 5px rgba(0, 0, 0, 0.5) !important;
  outline: none !important;
}

/* —— Buttons —— */
.button,
.btn1,
.btn4,
.btn5,
.back_btn2,
.button.back_btn,
.quick_amount_btn,
.history_btn,
.pop_login_btn2,
[class*="btn1_"],
[class*="btn2_"],
[class*="btn3_"] {
  background: var(--amp-btn-dark) !important;
  color: var(--amp-gold-bright) !important;
  border: 1px solid rgba(197, 160, 89, 0.55) !important;
  border-radius: 2px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(0, 0, 0, 0.7) !important;
  font-weight: 700 !important;
  transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s !important;
}
.button:hover,
.btn1:hover,
.btn4:hover,
.btn5:hover,
.btn5.active,
.quick_amoint_btn:hover,
.pop_login_btn2:hover,
.btn1_1:hover,
.btn1_2:hover,
.btn2_1:hover,
.btn2_2:hover,
.btn3_1:hover,
.btn3_2:hover {
  background: linear-gradient(180deg, #3a2020 0%, #1a1010 55%, #0a0808 100%) !important;
  color: #fff !important;
  border-color: var(--amp-gold) !important;
  box-shadow: var(--amp-glow-gold), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

.btn1_1,
.btn3_1,
.pop_login_btn1 {
  background: var(--amp-btn-primary) !important;
  color: #fff !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  min-height: 44px;
  line-height: 44px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), var(--amp-glow) !important;
}
.btn1_1:hover,
.btn3_1:hover,
.pop_login_btn1:hover {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 55%, #991b1b 100%) !important;
  border-color: rgba(255, 255, 255, 0.45) !important;
}
.btn3_1 {
  min-width: 180px;
  height: 48px !important;
  line-height: 48px !important;
  font-size: 16px !important;
}

a .btn1_1,
a .btn1_2,
a .btn2_1,
a .btn2_2,
a .btn3_1,
a .btn3_2,
span.btn1_1,
span.btn1_2,
span.btn3_1,
span.btn3_2 {
  display: inline-block;
  text-align: center;
  padding: 0 16px;
  min-width: 80px;
  min-height: 40px;
  line-height: 40px;
  box-sizing: border-box;
}

.quick_select_btn {
  box-shadow: 0 0 0 1px rgba(197, 160, 89, 0.3) !important;
}
.quick_select_btn .select_icon,
.quick_select_btn .select_text {
  background: #1a1a1a !important;
  color: #cfcfcf !important;
}
.quick_select_btn.active,
.quick_select_btn:hover {
  box-shadow: 0 0 0 1px var(--amp-gold), var(--amp-glow-gold) !important;
}
.quick_select_btn.active .select_icon,
.quick_select_btn:hover .select_icon {
  color: var(--amp-gold-bright) !important;
}

.division1 {
  background: rgba(197, 160, 89, 0.12) !important;
  color: #aaa !important;
  border: 1px solid rgba(197, 160, 89, 0.3) !important;
}
.division2,
.division4 {
  background: var(--amp-btn-gold) !important;
  color: #1a1408 !important;
  border: 1px solid #d4b56a !important;
}
.division3 { background: var(--amp-btn-gold) !important; }

.list_title3 {
  background: #1a1a1a !important;
  color: var(--amp-gold-bright) !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.3) !important;
}
.list3,
.list_table tr {
  background: #1a1a1a !important;
  border-bottom: 1px solid rgba(197, 160, 89, 0.12) !important;
  color: #c8c8c8 !important;
}
.list_tr3:hover .list3,
.list_table tr:hover,
.list_table tr.active,
.list:hover,
.list.active {
  background: #241818 !important;
  box-shadow: inset 2px 0 var(--amp-red) !important;
}

.amp-board-table th,
.amp-board-table .list_title1 {
  background: #1a1a1a !important;
  color: var(--amp-gold-bright) !important;
  border-color: rgba(197, 160, 89, 0.25) !important;
}
.amp-board-table td,
.amp-board-table .list_notice1,
.amp-board-table .list1 {
  background: #141414 !important;
  border-color: rgba(197, 160, 89, 0.12) !important;
  color: #d0d0d0 !important;
}
.amp-board-table tr:hover td {
  background: #241818 !important;
}

.tab {
  border: 1px solid rgba(197, 160, 89, 0.35) !important;
  background: #1a1a1a !important;
  color: #888 !important;
  border-radius: 2px !important;
}
.tab:hover,
.tabon {
  border-color: var(--amp-gold) !important;
  background: #241818 !important;
  color: var(--amp-gold-bright) !important;
}
.mobile_center_tab li {
  background: #1a1a1a !important;
  color: #888 !important;
}
.mobile_center_tab li.active,
.mobile_center_tab li:hover {
  background: #241818 !important;
  color: var(--amp-gold-bright) !important;
}

.main_event li a,
.main_board_box {
  background: var(--amp-panel-grad) !important;
  color: #888 !important;
  border: 1px solid rgba(197, 160, 89, 0.2);
}
.main_event li:hover a {
  background: #241818 !important;
  color: var(--amp-gold-bright) !important;
}
.main_board_title { color: #fff !important; }
.main_board td { color: #e8e8e8 !important; }

.container_game .card:hover {
  box-shadow: var(--amp-glow-gold), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}
.amp-game-page-title,
.amp-game-section-title { color: var(--amp-gold) !important; }

#login .modal_content,
#join .modal_content,
#ref_code_popup .modal_content,
.pop_login_wrap {
  background: var(--amp-panel-grad) !important;
  color: #f0f0f0 !important;
  border: 1px solid rgba(197, 160, 89, 0.45) !important;
  box-shadow: 0 0 24px rgba(185, 28, 28, 0.12), 0 16px 40px rgba(0, 0, 0, 0.7) !important;
}
.pop_login_close,
#login .modal-close,
#join .modal-close {
  background: var(--amp-btn-dark) !important;
  border: 1px solid rgba(197, 160, 89, 0.5) !important;
  color: var(--amp-gold-bright) !important;
}

.layer-wrap.default {
  background: #1a1a1a !important;
  border: 1px solid rgba(197, 160, 89, 0.5) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.85), var(--amp-glow-gold) !important;
}
.layer-wrap.default .is-con h3 { color: var(--amp-gold-bright) !important; }
.layer-wrap.default .is-con .stit { color: #888 !important; }
.layer-wrap.default .is-btm {
  background: linear-gradient(to bottom, #222 55%, #0e0e0e 100%) !important;
  border-top: 1px solid rgba(197, 160, 89, 0.25) !important;
}
.layer-wrap.default .is-btm .enter-btn {
  background: var(--amp-btn-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  box-shadow: var(--amp-glow);
}
.layer-wrap.default .is-btm .cancel-btn {
  background: #222 !important;
  border: 1px solid #555 !important;
  color: #ddd !important;
}

/* —— Pagination —— */
.page_wrap { justify-content: center !important; }
.page_wrap .page,
.page_wrap .pageon,
.page,
.pageon {
  background: #1a1a1a !important;
  border: 1px solid rgba(197, 160, 89, 0.35) !important;
  color: #aaa !important;
  border-radius: 2px !important;
}
.page_wrap .pageon,
.pageon {
  background: var(--amp-btn-primary) !important;
  border-color: var(--amp-red-bright) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: var(--amp-glow);
}
.page_wrap a:hover .page,
.page:hover {
  border-color: var(--amp-gold) !important;
  color: var(--amp-gold-bright) !important;
}
.page_wrap a.ctrl:not([href]) .page { opacity: 0.45; }

.footer_wrap { border-top: 1px solid rgba(197, 160, 89, 0.18); }
.f_copy { color: #666 !important; }

.aside_wrap,
.m_menu_fix,
.aside,
.aside2 {
  background: #0a0a0a !important;
  background-image: linear-gradient(180deg, #141414, #0a0a0a) !important;
}
.mobile_menu1,
.mobile_menu2 { color: var(--amp-gold-bright) !important; }

html, body,
.main_center_center,
.contents_left,
.contents_right {
  scrollbar-color: #a8843f transparent !important;
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb,
.main_center_center::-webkit-scrollbar-thumb,
.contents_left::-webkit-scrollbar-thumb,
.contents_right::-webkit-scrollbar-thumb {
  background-color: #a8843f !important;
}

/* Home banners — gold ornate frame */
.main_center_center_box .amp-home-banners-top .visuall_wrap,
.main_center_center_box .amp-home-banners-top .visuall_wrap_pin,
.main_center_center_box .amp-home-banner-wide,
.main_game1 li a,
.main_game2 li a {
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(197, 160, 89, 0.45),
    0 0 10px rgba(139, 0, 0, 0.15),
    0 8px 22px rgba(0, 0, 0, 0.5);
  overflow: hidden;
}
.main_game1 li a:hover,
.main_game2 li a:hover {
  box-shadow: var(--amp-glow-gold), 0 0 0 1px var(--amp-gold), 0 10px 28px rgba(0, 0, 0, 0.55);
}

.main_center_center,
.main_center_center_box,
.contents_wrap {
  background: transparent !important;
}

.font05,
.font07,
.font10,
.font11,
.my_font01 {
  color: var(--amp-gold-bright) !important;
}
.font01,
.font13 { color: #f0f0f0 !important; }
.font03,
.font08 { color: #888 !important; }

.sports_event_tab li.active,
.sports_event_tab li:hover,
.cart_title,
.cart_tab li.active,
.bet_title,
.bet_bettting,
.bet_btn,
.betting_odd,
.betting_choose_btn.Selected,
.betting_choose_btn.active {
  color: var(--amp-gold-bright) !important;
}
.bet_btn,
.betting_choose_btn.Selected,
.betting_choose_btn.active,
#open_cart b {
  background: var(--amp-btn-primary) !important;
  color: #fff !important;
  border-color: var(--amp-red) !important;
}

.aside_top_wrap .my,
.user_box .my,
.mobile_my_wrap .my {
  background: linear-gradient(180deg, #1c1a14 0%, #12100c 100%) !important;
  border: 1px solid rgba(197, 160, 89, 0.35) !important;
}
.aside_top_wrap .my_link,
.aside_top_wrap .my_font01,
.user_box .my_link {
  color: var(--amp-gold-bright) !important;
}
.m_login_box .join_btn {
  background: var(--amp-btn-primary) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
  color: #fff !important;
  box-shadow: var(--amp-glow);
}

.right_domain a,
.rd_btn,
.contents_right .right_domain a {
  border: 1px solid rgba(197, 160, 89, 0.55) !important;
  box-shadow: 0 0 8px rgba(197, 160, 89, 0.2) !important;
}