/* ============================================================
   Koromons — 1:1 Rolimons remake styles
   (extracted from rolimons.com inline styles, adapted)
   ============================================================ */

/* ---------- page layout / gutters ---------- */
#page_content_container{display:flex;justify-content:center;align-items:flex-start;max-width:1822px;margin:0 auto;width:100%;}
#page_content_body{width:100%;max-width:1138px;}
#left_gutter,#right_gutter{position:sticky;top:24px;margin-top:24px;z-index:1000;display:none;}
@media(min-width:1475px){#left_gutter,#right_gutter{width:160px;display:block;}}
@media(min-width:1755px){#left_gutter,#right_gutter{width:300px;}}

/* ---------- navbar ---------- */
@media (max-width: 768px) {.navbar-nav .dropdown-menu {position: absolute;} .navbar-nav .nav-link {padding-left: 12px; padding-right: 12px;}}
@media (min-width: 768px) {.main-navbar-ul {flex: 1; margin: auto !important; display: flex; justify-content: space-evenly;}}
.navbar_menu_item_outer {text-align: center; min-width: 63px; max-width: 63px;}
@media (min-width: 768px) {.navbar_menu_item_outer {min-width: 64px;}}
@media (min-width: 860px) {.navbar_menu_item_outer {min-width: 72px;}}
.navbar_dropdown_static {position: static;}
@media (min-width: 768px) {.navbar_dropdown_static {position: relative;}}
.navbar_menu_item_inner {padding-top: 6px; padding-bottom: 6px; cursor: pointer;}
@media (min-width: 768px) {.navbar_menu_item_inner {padding-top: 7px; padding-bottom: 7px;}}
.navbar_menu_item_title {white-space: nowrap; font-size: 10px; color: #aaa;}
@media (min-width: 768px) {.navbar_menu_item_title {font-size: 12px; margin: auto 0;}}
.site_navbar_menu_icon_svg {color: #fff; margin: 0 auto; width: 1.85em; height: 1.85em;}
@media (min-width: 768px) {.site_navbar_menu_icon_svg {width: 2.25em; height: 2.25em;}}
.navbar_item_title {font-size: 12px; color: #aaa; margin: auto 0 auto 8px;}
.dropdown-toggle::after {display: none;}
.site_navbar_item {display: flex; white-space: nowrap; padding-top: 5px; padding-bottom: 5px;}
@media (min-width: 768px) {.site_navbar_item {padding-top: 7px; padding-bottom: 7px;}}
.site_navbar_icon_svg {color: #fff; width: 1.85em; height: 1.85em;}
@media (min-width: 768px) {
  .main-navbar-ul > .dropdown:hover > .dropdown-menu {display: block;}
  .main-navbar-ul > .dropdown > .dropdown-toggle:active {pointer-events: none;}
}
#navbarSupportedContent .dropdown-menu {padding: 0; border-radius: 0; border: 0; margin-top: 0px;}
#navbarSupportedContent > div > div > div.dropdown-menu {z-index: 2000;}

/* ---------- footer ---------- */
.sitefooter-info-section-grid {display: grid; column-gap: 2.5rem; row-gap: 0.5rem; margin-left: 3rem; margin-right: 3rem; padding-top: 24px;}
@media (min-width: 540px) {.sitefooter-info-section-grid {grid-template-columns: 2.5fr 0.75fr 0.75fr;}}
.sitefooter-about-title {color: #0084dd; font-weight: 700; font-size: 1.8em; height: 40px;}
.sitefooter-links-title {color: #6a94b5; font-weight: 600; font-size: 1.25em; line-height: 2.5em; height: 40px;}
.sitefooter-links-link {color: #ddd; display: block; font-weight: 600; font-size: 0.95em; white-space: nowrap; line-height: 2em; height: 34px;}
.sitefooter-links-link:hover {color: #fff; text-decoration: none;}

/* ---------- LIMITED / LIMITED U ribbons (home slider) ---------- */
.limited_ribbon {position: absolute; bottom: 4px; left: 4px; height: 15px; width: auto;}
.gen_items_slider_main_image_container .system_item_tag_container {left: auto; right: 4px;}

/* ---------- item tag icons (rare / projected / hyped) ---------- */
.system_item_tag_container {position: absolute; display: flex; bottom: 4px; left: 4px;}
.system_item_tag_icon {margin-left: 3px; width: 18px; height: 18px; background-size: contain; background-repeat: no-repeat;}
.page-tradecalc .system_item_tag_icon {width: 16px; height: 16px;}
.projected_tag_icon { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20aria-hidden%3D'true'%20viewBox%3D'0%200%2064%2064'%3E%3Cpath%20d%3D'M63.37%2053.52C53.982%2036.37%2044.59%2019.22%2035.2%202.07a3.687%203.687%200%2000-6.522%200C19.289%2019.22%209.892%2036.37.508%2053.52c-1.453%202.649.399%206.083%203.258%206.083h56.35c1.584%200%202.648-.853%203.203-2.01.698-1.102.885-2.565.055-4.075'%20fill%3D'%23ffdd15'%2F%3E%3Cpath%20d%3D'M28.917%2034.477l-.889-13.262c-.166-2.583-.246-4.439-.246-5.565%200-1.534.4-2.727%201.202-3.588.805-.856%201.863-1.286%203.175-1.286%201.583%200%202.646.551%203.178%201.646.537%201.102.809%202.684.809%204.751%200%201.215-.066%202.453-.198%203.708l-1.19%2013.649c-.129%201.626-.404%202.872-.827%203.739-.426.871-1.128%201.301-2.109%201.301-.992%200-1.69-.419-2.072-1.257-.393-.841-.668-2.12-.833-3.836m3.072%2018.217c-1.125%200-2.106-.362-2.947-1.093-.841-.728-1.26-1.748-1.26-3.058%200-1.143.4-2.12%201.202-2.921.805-.806%201.786-1.206%202.951-1.206s2.153.4%202.977%201.206c.815.801%201.234%201.778%201.234%202.921%200%201.29-.419%202.308-1.246%203.044a4.245%204.245%200%2001-2.911%201.107'%20fill%3D'%231f2e35'%2F%3E%3C%2Fsvg%3E"); }
.rare_tag_icon      { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20aria-hidden%3D'true'%20style%3D'-ms-transform%3Arotate(360deg)%3B-webkit-transform%3Arotate(360deg)'%20viewBox%3D'0%200%20128%20128'%20transform%3D'rotate(360)'%3E%3Cpath%20d%3D'M63.85%20123.84l60.1-87.8.05-.02v-.03L96.04%204H32.01L4%2035.93v.03l.03.07%2059.42%2087.45.32.44.07-.09-.22-.83.23.84z'%20fill%3D'%2381D4FA'%2F%3E%3ClinearGradient%20id%3D'a'%20x1%3D'4.111'%20x2%3D'123.89'%20y1%3D'64'%20y2%3D'64'%20gradientUnits%3D'userSpaceOnUse'%3E%3Cstop%20stop-color%3D'%2381D4FA'%20offset%3D'.001'%2F%3E%3Cstop%20stop-color%3D'%2329B6F6'%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D'url(%23a)'%20d%3D'M63.79%20123.93L4.11%2036.03l27.9-31.96h64.03l27.85%2031.96z'%2F%3E%3Cpath%20fill%3D'none'%20d%3D'M64%204l-.05.07h.1z'%2F%3E%3ClinearGradient%20id%3D'b'%20x1%3D'63.599'%20x2%3D'63.599'%20y1%3D'123.89'%20y2%3D'36.003'%20gradientUnits%3D'userSpaceOnUse'%3E%3Cstop%20stop-color%3D'%2381D4FA'%20offset%3D'0'%2F%3E%3Cstop%20stop-color%3D'%237DD3FA'%20offset%3D'.221'%2F%3E%3Cstop%20stop-color%3D'%2372CFF9'%20offset%3D'.431'%2F%3E%3Cstop%20stop-color%3D'%235EC8F8'%20offset%3D'.638'%2F%3E%3Cstop%20stop-color%3D'%2344BFF7'%20offset%3D'.841'%2F%3E%3Cstop%20stop-color%3D'%2329B6F6'%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D'url(%23b)'%20d%3D'M63.78%20123.89L87.55%2036l-47.9.05z'%2F%3E%3Cpath%20fill%3D'%2381D4FA'%20d%3D'M87.55%2036h.39l-.28-.38z'%2F%3E%3ClinearGradient%20id%3D'c'%20x1%3D'93.897'%20x2%3D'93.897'%20y1%3D'123.91'%20y2%3D'36'%20gradientUnits%3D'userSpaceOnUse'%3E%3Cstop%20stop-color%3D'%23039BE5'%20offset%3D'0'%2F%3E%3Cstop%20stop-color%3D'%230398E2'%20offset%3D'.369'%2F%3E%3Cstop%20stop-color%3D'%230390D9'%20offset%3D'.638'%2F%3E%3Cstop%20stop-color%3D'%230282C9'%20offset%3D'.874'%2F%3E%3Cstop%20stop-color%3D'%230277BD'%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D'url(%23c)'%20d%3D'M124%2036.02L87.58%2036l-23.79%2087.91L124%2036.03z'%2F%3E%3ClinearGradient%20id%3D'd'%20x1%3D'33.944'%20x2%3D'33.944'%20y1%3D'123.91'%20y2%3D'35.968'%20gradientUnits%3D'userSpaceOnUse'%3E%3Cstop%20stop-color%3D'%2329B6F6'%20offset%3D'0'%2F%3E%3Cstop%20stop-color%3D'%2325B3F4'%20offset%3D'.331'%2F%3E%3Cstop%20stop-color%3D'%231AABEF'%20offset%3D'.646'%2F%3E%3Cstop%20stop-color%3D'%23079EE7'%20offset%3D'.954'%2F%3E%3Cstop%20stop-color%3D'%23039BE5'%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D'url(%23d)'%20d%3D'M39.86%2036.59L39%2037.75l.86-1.16-.17-.61-35.52-.01-.06.06%2059.67%2087.88z'%2F%3E%3ClinearGradient%20id%3D'e'%20x1%3D'29.51'%20x2%3D'21.783'%20y1%3D'5.457'%20y2%3D'36.366'%20gradientUnits%3D'userSpaceOnUse'%3E%3Cstop%20stop-color%3D'%23B3E5FC'%20offset%3D'.005'%2F%3E%3Cstop%20stop-color%3D'%234FC3F7'%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D'url(%23e)'%20d%3D'M40%2036L32%204.1%203.74%2036.05z'%2F%3E%3ClinearGradient%20id%3D'f'%20x1%3D'105.87'%20x2%3D'105.87'%20y1%3D'7.06'%20y2%3D'37.027'%20gradientUnits%3D'userSpaceOnUse'%3E%3Cstop%20stop-color%3D'%2381D4FA'%20offset%3D'.009'%2F%3E%3Cstop%20stop-color%3D'%2329B6F6'%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D'url(%23f)'%20d%3D'M87.74%2036l8-31.9L124%2036.05z'%2F%3E%3ClinearGradient%20id%3D'g'%20x1%3D'63.644'%20x2%3D'63.644'%20y1%3D'6.738'%20y2%3D'35.715'%20gradientUnits%3D'userSpaceOnUse'%3E%3Cstop%20stop-color%3D'%23E1F5FE'%20offset%3D'0'%2F%3E%3Cstop%20stop-color%3D'%23D3F0FD'%20offset%3D'.275'%2F%3E%3Cstop%20stop-color%3D'%23B3E5FC'%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D'url(%23g)'%20d%3D'M39.74%2036l24-31.96L87.55%2036z'%2F%3E%3ClinearGradient%20id%3D'h'%20x1%3D'47.868'%20x2%3D'47.868'%20y1%3D'4.484'%20y2%3D'37.34'%20gradientUnits%3D'userSpaceOnUse'%3E%3Cstop%20stop-color%3D'%2381D4FA'%20offset%3D'.009'%2F%3E%3Cstop%20stop-color%3D'%2329B6F6'%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D'url(%23h)'%20d%3D'M64%204.04L40%2036.05%2031.74%204z'%2F%3E%3ClinearGradient%20id%3D'i'%20x1%3D'63.736'%20x2%3D'96'%20y1%3D'20.023'%20y2%3D'20.023'%20gradientUnits%3D'userSpaceOnUse'%3E%3Cstop%20stop-color%3D'%234FC3F7'%20offset%3D'.011'%2F%3E%3Cstop%20stop-color%3D'%2329B6F6'%20offset%3D'1'%2F%3E%3C%2FlinearGradient%3E%3Cpath%20fill%3D'url(%23i)'%20d%3D'M63.74%204.04l24%2032.01L96%204z'%2F%3E%3Cpath%20d%3D'M94.67%207l25.53%2029.2-56.42%2082.41L7.76%2036.19%2033.37%207h61.3m1.37-3H32.01L4%2035.93v.03l.03.07%2059.74%2087.9%2060.18-87.9.05-.02v-.03L96.04%204z'%20fill%3D'%23424242'%20opacity%3D'.2'%2F%3E%3C%2Fsvg%3E"); }

/* ============================================================
   CATALOG PAGE
   ============================================================ */
.page-catalog .catalog_controls,
.page-catalog .mix_container,
.page-catalog .pagination-control {width: 100%;}
.page-catalog .mix_container, .page-player .mix_container, .page-games .mix_container, .page-groups .mix_container {display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: flex-start; column-gap: 1rem; row-gap: 0; text-align: initial; font-size: initial;}
.page-catalog .mix_container:after, .page-player .mix_container:after, .page-games .mix_container:after, .page-groups .mix_container:after {content: none;}
.page-catalog .mix_item, .page-player .mix_item, .page-games .mix_item, .page-groups .mix_item {display: block; position: relative; flex: 0 0 auto; width: 100%; cursor: pointer; font-size: 15px;}
.page-catalog .mix_item a:hover, .page-player .mix_item a:hover, .page-games .mix_item a:hover, .page-groups .mix_item a:hover {text-decoration: none; color: white;}
.page-catalog .mix_gap, .page-player .mix_gap {display: none;}
@media (min-width: 340px)  {.page-catalog .mix_item, .page-player .mix_item {width: calc((100% - 0.75rem) / 2);}}
@media (min-width: 480px)  {.page-catalog .mix_container, .page-player .mix_container, .page-games .mix_container, .page-groups .mix_container {column-gap: 0.8rem;} .page-catalog .mix_item, .page-player .mix_item {width: calc((100% - 1.6rem) / 3);} .page-games .mix_item, .page-groups .mix_item {width: calc((100% - 0.8rem) / 2);}}
@media (min-width: 650px)  {.page-catalog .mix_item, .page-player .mix_item {width: calc((100% - 2.4rem) / 4);} .page-games .mix_item, .page-groups .mix_item {width: calc((100% - 1.6rem) / 3);}}
@media (min-width: 840px)  {.page-catalog .mix_container, .page-player .mix_container, .page-games .mix_container, .page-groups .mix_container {column-gap: 0.85rem;} .page-catalog .mix_item, .page-player .mix_item {width: calc((100% - 3.4rem) / 5);} .page-games .mix_item, .page-groups .mix_item {width: calc((100% - 2.55rem) / 4);}}
@media (min-width: 1100px) {.page-catalog .mix_container, .page-player .mix_container, .page-games .mix_container, .page-groups .mix_container {column-gap: 1rem;}    .page-catalog .mix_item, .page-player .mix_item {width: calc((100% - 5rem) / 6);} .page-games .mix_item, .page-groups .mix_item {width: calc((100% - 3rem) / 4);}}

.item_card_name {max-width: 270px;}
.custom-control-label {font-size: 0.825em; line-height: 2em;}
.form-control-sm {height: calc(1.3em + 0.5rem + 2px);}
.stat-textbox-title-small {font-size: 0.75em;}
.filter-textbox-small {height: 23px;}
.filter-pane-top-button {padding: 4px 4px 0px 4px; margin: 0px 1px 0px 1px; border-radius: 0 !important; box-shadow: none;}
.search_box {width: 100%;}
.filter-button {font-size: 0.95em; margin: 4px 6px 4px 0; padding: 4px 8px 4px 8px; min-width: 56px;}
.filter-text-box {background-color: #eee; width: 99px; height: 24px; padding: 0px; border-radius: 2px;}
.filter-range-pair {display: flex; flex-wrap: nowrap; margin: 0 8px 8px 8px; background-color: #30363c;}
.filter_control_grid {display: grid; column-gap: 1rem; row-gap: 1rem; grid-template-columns: 1fr 1fr;}
@media (min-width: 600px) { .filter_control_grid {grid-template-columns: 1fr 1fr 1fr;} }
@media (min-width: 900px) { .filter_control_grid {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;} }

.form-control[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; position: relative; right: -12px; width: 30px; height: 30px; opacity: 0.6; cursor: pointer;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16.2 16.2'><path d='M 4 4 L 12 12 M 12 4 L 4 12' stroke='%23eeeeee' stroke-width='2' /></svg>") no-repeat center center / 80%;
}
.form-control[type="search"]::-webkit-search-cancel-button:hover {opacity: 0.8;}

/* ============================================================
   TRADE CALCULATOR PAGE
   ============================================================ */
.page-tradecalc .mix_container {display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: flex-start; column-gap: 0.55rem; row-gap: 0; text-align: initial; font-size: initial;}
.page-tradecalc .mix_container:after {content: none;}
.page-tradecalc .mix_gap {display: none;}
.page-tradecalc .mix_item {display: block; position: relative; font-size: 15px; cursor: pointer; flex: 0 0 auto; width: calc(100%);}
.page-tradecalc .mix_item:before {display: none;}
@media (max-width: 359px)  {.page-tradecalc .mix_item {width: calc(100%/2 - (((2 - 1) * 0.55rem) / 2));}}
@media (min-width: 360px)  {.page-tradecalc .mix_item {width: calc(100%/3 - (((3 - 1) * 0.55rem) / 3));}}
@media (min-width: 495px)  {.page-tradecalc .mix_container {column-gap: 0.65rem;} .page-tradecalc .mix_item {width: calc(100%/4 - (((4 - 1) * 0.65rem) / 4));}}
@media (min-width: 576px)  {.page-tradecalc .mix_container {column-gap: 0.7rem;}  .page-tradecalc .mix_item {width: calc(100%/4 - (((4 - 1) * 0.7rem) / 4));}}
@media (min-width: 740px)  {.page-tradecalc .mix_container {column-gap: 0.75rem;} .page-tradecalc .mix_item {width: calc(100%/5 - (((5 - 1) * 0.75rem) / 5));}}
@media (min-width: 880px)  {.page-tradecalc .mix_container {column-gap: 0.8rem;}  .page-tradecalc .mix_item {width: calc(100%/6 - (((6 - 1) * 0.8rem) / 6));}}
@media (min-width: 1020px) {.page-tradecalc .mix_container {column-gap: 0.9rem;}  .page-tradecalc .mix_item {width: calc(100%/7 - (((7 - 1) * 0.9rem) / 7));}}

.item-card-title {font-weight: 500; padding-bottom: 2px; margin-top: 4px; margin-bottom: 3px;}
@media (max-width: 575px)  {.stat-header {font-size: 0.7em;} .stat-data {font-size: 0.7em;} .item-card-title {font-size: 0.8em;}}
@media (min-width: 576px)  {.stat-header {font-size: 0.8em;} .stat-data {font-size: 0.8em;} .item-card-title {font-size: 0.8em;}}
@media (min-width: 1020px) {.stat-header {font-size: 0.9em;} .stat-data {font-size: 0.9em;} .item-card-title {font-size: 0.8em;}}

.trade-item, .trade-item-img {background-color: #2b2f33; position: relative; cursor: pointer; width: 100%; height: 100%; max-width: 100%; max-height: 100%;}
#offer_items:empty, #request_items:empty {aspect-ratio: 4 / 1;}
.trade-item {aspect-ratio: 1 / 1; overflow: hidden;}
.trade-btn-shadow {box-shadow: 0px 0px 6px #181818;}
.item_thumbnail {margin-top: 2px; margin-bottom: 2px;}

.currency_svg_container {width: 22px; height: 22px; margin-top: 3px; color: #eee;}
.currency_svg_container svg {display: block; width: 22px; height: 22px;}

.trade_container_grid {display: grid; column-gap: 3.5%; row-gap: 0.25rem; margin: 0 3.5% 0 3.5%;}
@media (max-width: 599px) {.trade_container_grid {grid-template-columns: 1fr;     margin: 0 9% 0 9%;} }
@media (min-width: 600px) {.trade_container_grid {grid-template-columns: 1fr;     margin: 0 11% 0 11%;} }
@media (min-width: 700px) {.trade_container_grid {grid-template-columns: 1fr;     margin: 0 14% 0 14%;} }
@media (min-width: 768px) {.trade_container_grid {grid-template-columns: 1fr 1fr; margin: 0 2% 0 2%; column-gap: 4%;} }
@media (min-width: 900px) {.trade_container_grid {grid-template-columns: 1fr 1fr; margin: 0 2.25% 0 2.25%; column-gap: 5%; row-gap: 1rem;} }

.trade_side_grid {display: grid; column-gap: 3%; row-gap: 0.7em; margin-top: 8px; grid-template-columns: repeat(4, minmax(0, 1fr));}
@media (max-width: 449px) {.trade_side_grid {grid-template-columns: repeat(4, minmax(0, 1fr));}}
@media (min-width: 450px) {.trade_side_grid {grid-template-columns: repeat(4, minmax(0, 1fr));}}
@media (min-width: 600px) {.trade_side_grid {column-gap: 2.5%;}}
@media (min-width: 950px) {.trade_side_grid {column-gap: 2%;}}

.modal_header_blue_gradient {color: #ddd; padding: 0.75rem 1rem; background: linear-gradient(125deg, #006db7, #052554);}

.pagination-control > ul > li > a{background-color: #484d50;}

.item-picker-toolbar {display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; column-gap: 0.75rem; row-gap: 0.35rem;}
.item-picker-dark-control {background-color: #2b2f33 !important;}
#trade_calculator_page_search_textbox_clear {background-color: #3c4349 !important;}
#trade_calculator_page_search_textbox::placeholder {color: #adb5bd; opacity: 1;}
#trade_calculator_page_search_textbox:focus {background-color: #2f363c !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: none !important; outline: none !important;}

/* trade totals / gain-loss summary */
.trade-totals-grid {--trade-value: #62bdd7; --trade-rap: #7fba6d; --trade-gain: #8fe6a0; --trade-gain-bg: rgba(143, 230, 160, 0.13); --trade-loss: #ff8585; --trade-loss-bg: rgba(255, 133, 133, 0.13); --trade-neutral: #bfc7cd; --trade-neutral-bg: rgba(255, 255, 255, 0.075); display: grid; column-gap: 3.5%; grid-template-columns: 1fr 1fr; margin: 0 2%;}
.trade-totals-grid, .trade-delta-card {font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;}
.trade-totals-grid #offer_value_total_textbox, .trade-totals-grid #request_value_total_textbox {color: var(--trade-value) !important;}
.trade-totals-grid #offer_rap_total_textbox, .trade-totals-grid #request_rap_total_textbox {color: var(--trade-rap) !important;}

.trade-delta-card {grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 500px; box-sizing: border-box; margin: 0.8rem auto 0; padding: 0.45rem 0.6rem; background-color: #2d3338; border: 1px solid rgba(255, 255, 255, 0.035); border-radius: 0.45rem; box-shadow: none;}
@media (max-width: 899px) {.trade-delta-card {width: 74%;}}
@media (max-width: 767px) {.trade-delta-card {width: 100%; max-width: 520px;} .trade-delta-segment {justify-content: center; column-gap: 0.35rem; padding: 0 0.45rem;} .trade-delta-badge {padding-left: 0.35rem; padding-right: 0.35rem;}}

.trade-delta-segment {display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; column-gap: 0.45rem; min-height: 32px; padding: 0 0.55rem;}
.trade-delta-segment + .trade-delta-segment {border-left: 1px solid rgba(255, 255, 255, 0.06);}
.trade-delta-label {display: inline-flex; align-items: center; height: 18px; color: #b6bec5; font-size: 0.72rem; font-weight: 650; line-height: 1; letter-spacing: 0.01em; white-space: nowrap;}
.trade-delta-badge {display: inline-flex; align-items: center; justify-content: center; height: 18px; padding: 0 0.45rem; border-radius: 999px; font-size: 0.7rem; font-weight: 700; line-height: 1; white-space: nowrap;}
.trade-delta-amount {display: inline-flex; align-items: center; min-width: 0; height: 18px; overflow: visible; color: #d8dde1; font-size: 0.96rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 18px; white-space: nowrap;}
.trade-delta-value {display: inline-block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 18px;}
.trade-delta-arrow {display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 18px; margin-right: 0.28rem; flex: 0 0 15px; line-height: 0;}
.trade-delta-arrow svg {display: block; width: 15px; height: 15px; fill: currentColor; transform: translateY(0.5px);}

.trade-delta-even .trade-delta-badge {color: var(--trade-neutral); background-color: var(--trade-neutral-bg);}
.trade-delta-underpay .trade-delta-badge {color: var(--trade-gain); background-color: var(--trade-gain-bg);}
.trade-delta-underpay .trade-delta-amount {color: var(--trade-gain);}
.trade-delta-overpay .trade-delta-badge {color: var(--trade-loss); background-color: var(--trade-loss-bg);}
.trade-delta-overpay .trade-delta-amount {color: var(--trade-loss);}
.trade-delta-even .trade-delta-amount {color: var(--trade-neutral);}
.trade-delta-even .trade-delta-arrow {display: none;}

.trade-delta-placeholder {display: none; grid-column: 1 / -1; align-items: center; justify-content: center; min-height: 32px; color: #9aa4ab; font-size: 0.78rem; font-weight: 600; text-align: center;}
.trade-delta-empty .trade-delta-placeholder {display: flex;}
.trade-delta-empty .trade-delta-segment {display: none;}

.trade-total-label {display: block !important; height: auto; padding-top: 0 !important; color: #b6bec5; font-size: 0.76rem; font-weight: 500; line-height: 23px; letter-spacing: 0.01em; text-align: right;}
.trade-total-number {display: block !important; height: auto; font-size: 18px !important; font-weight: 650 !important; line-height: 23px; letter-spacing: 0.005em; font-variant-numeric: tabular-nums;}

.trade-robux-grid {display: grid; column-gap: 3.5%; grid-template-columns: 1fr 1fr; margin: 0 2%;}
.trade-robux-input-group {display: inline-flex !important; align-items: center; margin-left: 6px; min-width: 96px;}
.trade-robux-textbox {display: block; width: 96px; min-width: 96px; height: calc(1.3em + 0.5rem + 2px); background-color: #2b2f33 !important; color: #e8edf1 !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: none !important;}
.trade-robux-textbox::placeholder {color: #7a8288; opacity: 1;}
.trade-robux-textbox:focus {background-color: #2f363c !important; color: #fff !important; border-color: rgba(255, 255, 255, 0.12) !important; box-shadow: none !important; outline: none !important;}

@media (max-width: 575px) {.trade-delta-card {grid-template-columns: 1fr; width: calc(100% - 1rem);} .trade-delta-segment {grid-template-columns: 34px 64px minmax(0, 1fr); justify-content: stretch; column-gap: 0.3rem; padding: 0 0.65rem;} .trade-delta-badge {width: 64px; padding-left: 0; padding-right: 0; text-align: center;} .trade-delta-amount {justify-self: start;} .trade-delta-empty .trade-delta-placeholder {min-height: 65px;} .trade-delta-segment + .trade-delta-segment {border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.06);}}

/* ---------- item detail modal ---------- */
.item-detail-stat-label {color: #9aa4ab; font-size: 0.78rem; font-weight: 600;}
.item-detail-stat-value {color: #dcdfe2; font-size: 1.1rem; font-weight: 650; font-variant-numeric: tabular-nums;}
.item-detail-history {display: flex; align-items: flex-end; gap: 2px; height: 110px; padding: 8px; background: #26292d; border-radius: 4px;}
.item-detail-history .hbar {flex: 1; min-width: 3px; background: #0084dd; border-radius: 1px 1px 0 0; position: relative;}
.item-detail-history .hbar:hover {background: #2ea3f2;}
.item-detail-history .hbar .htip {display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); background: #101214; color: #eee; font-size: 11px; padding: 2px 6px; border-radius: 3px; white-space: nowrap; z-index: 10;}
.item-detail-history .hbar:hover .htip {display: block;}

/* scroll to top */
#scroll-to-top {position: fixed; bottom: 24px; right: 24px; width: 42px; height: 42px; border-radius: 50%; background: #0084dd; color: #fff; border: 0; display: none; align-items: center; justify-content: center; z-index: 1500; box-shadow: 0 2px 8px rgba(0,0,0,.5); cursor: pointer;}
#scroll-to-top.visible {display: flex;}

/* ───────── Deals page ───────── */
.deal-pct {color: #7fba6d; font-weight: 600;}

/* ───────── Value changes page ───────── */
.vc-list {max-width: 760px; margin: 0 auto;}
.vc-row {display: flex; align-items: center; background: #30363c; margin-bottom: 8px; padding: 8px 12px; cursor: pointer;}
.vc-row:hover {background: #363d44;}
.vc-thumb {width: 60px; height: 60px; flex: 0 0 60px; position: relative; overflow: hidden;}
.vc-name {color: #dcdfe2; font-weight: 600;}
.vc-old {color: #7a8288; text-decoration: line-through;}
.vc-new {color: #4db7d6; font-weight: 600;}
.vc-arrow {color: #888; margin: 0 6px;}
.vc-date {color: #666; font-size: 0.78rem;}
.vc-badge-up {color: #7fba6d;}
.vc-badge-down {color: #d65c4d;}

/* ───────── Item table page ───────── */
.koro-table {width: 100%; color: #dcdfe2; font-size: 0.9rem; border-collapse: collapse; background: #272b30;}
.koro-table th {background: #30363c; color: #adadad; padding: 8px 10px; cursor: pointer; user-select: none; white-space: nowrap; position: sticky; top: 0; z-index: 2;}
.koro-table th:hover {color: #fff;}
.koro-table td {padding: 6px 10px; border-bottom: 1px solid #2b3036;}
.koro-table tbody tr {cursor: pointer;}
.koro-table tbody tr:hover {background: #30363c;}
.koro-table .sort-arrow {font-size: 0.7em; margin-left: 4px;}
.kt-thumb {flex: 0 0 32px; background: #1f2327; border-radius: 3px;}
.kt-tag-icon {position: static; display: inline-block; vertical-align: middle;}

/* ---- Live economy status + live RAP chart ---- */
/* The catalog keeps its live refresh machinery but hides the indicator */
.page-catalog #live_status { display: none; }
#live_status {
    font-size: 0.72rem;
    font-weight: 600;
    color: #8a9298;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.live-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #e0a800;
    margin-right: 5px;
    vertical-align: 1px;
    animation: live-pulse 1.2s ease-in-out infinite;
}
.live-dot-done {
    background-color: #7fba6d;
    animation: none;
}
@keyframes live-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}
.item-detail-history.rap-history .hbar {
    background-color: #5a8f4c;
}
.item-detail-history.rap-history .hbar:hover {
    background-color: #7fba6d;
}


/* ---- Players: profile, leaderboard ---- */

.player-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}
.player-stat-card {background-color: #30363c; padding: 10px 12px;}
.player-stat-label {color: #7a8288; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;}
.player-stat-value {font-size: 1.25rem; font-weight: 600;}
.inv-count-badge {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(0, 0, 0, 0.65);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 8px;
    z-index: 2;
}
.lb-rap-fresh {transition: background-color 0.6s;}
/* Rolimons-style leaderboard player cards. The grid is left-aligned with a
   fixed column gap (never justify-between: a non-full last row spreads out
   and leaves ugly gaps). Card widths account exactly for the column gap. */
.page-leaderboard #lb_cards {justify-content: flex-start; align-items: flex-start; align-content: flex-start; column-gap: 0.8rem; row-gap: 0;}
.page-leaderboard .lb_cell {display: block; position: relative; flex: 0 0 auto; width: 100%; cursor: pointer; font-size: 15px;}
.page-leaderboard .lb_cell a {color: inherit;}
.page-leaderboard .lb_cell a:hover {text-decoration: none; color: white;}
.page-leaderboard .lb_cell img {object-fit: cover;}
@media (min-width: 420px)  {.page-leaderboard .lb_cell {width: calc((100% - 0.8rem) / 2);}}
@media (min-width: 650px)  {.page-leaderboard .lb_cell {width: calc((100% - 1.6rem) / 3);}}
@media (min-width: 840px)  {.page-leaderboard .lb_cell {width: calc((100% - 2.4rem) / 4);}}
@media (min-width: 1100px) {.page-leaderboard .lb_cell {width: calc((100% - 3.2rem) / 5);}}
.page-leaderboard .carousel-caption {position: relative; left: auto; right: auto; padding-top: 56px; padding-bottom: 6px;}
.page-leaderboard .carousel-caption h1 {font-weight: 600;}
.page-leaderboard .pagination-control .pagination {flex-wrap: wrap;}
.page-leaderboard .page-link {background-color: #2b2f33; border-color: #3a3f44; color: #c8cdd1;}
.page-leaderboard .page-item.active .page-link {background-color: #0084dd; border-color: #0084dd; color: #fff;}
.page-leaderboard .page-item.disabled .page-link {background-color: #24282c; border-color: #3a3f44; color: #5a6066;}

/* ============================================================
 * Platform update: 1:1 Rolimons player profile layout
 * (grid + stat box rules lifted from the source page CSS)
 * ============================================================ */
.player_info_grid {display: grid; column-gap: 1rem; row-gap: 1rem; margin-top: 12px;}
@media (max-width: 767px) {.player_info_grid {grid-template-columns: 100%;}}
@media (min-width: 768px) {.player_info_grid {grid-template-columns: 300px 1fr;}}
@media (min-width: 900px) {.player_info_grid {grid-template-columns: 320px 1fr;}}
@media (min-width: 1000px){.player_info_grid {grid-template-columns: 350px 1fr;}}
@media (min-width: 1150px){.player_info_grid {grid-template-columns: 368px 1fr;}}

.player_secondary_stats_grid {display: grid; column-gap: 1rem; row-gap: 1rem;}
@media (max-width: 994px) {.player_secondary_stats_grid {grid-template-columns: 1fr;}}
@media (min-width: 995px) {.player_secondary_stats_grid {grid-template-columns: 1fr 1fr;}}

.section_grid {display: grid; column-gap: 0rem; row-gap: 1rem; grid-template-columns: 1fr;}

.stat-header {font-size: 0.85em;}
.stat-data {font-size: 1.15em;}
@media (min-width: 768px) {.stats_box {height: 180px;}}

.player_page_history_chart_container {min-height: 280px; background-color: #32383e;}
@media (min-width: 768px) {.player_page_history_chart_container {height: 468px;}}

@keyframes player_stat_spinner {to {transform: rotate(360deg);}}
.player_stat_spinner:before {content: ''; box-sizing: border-box; position: absolute; top: 12px; left: 16px; width: 18px; height: 18px; margin-top: -9px; margin-left: -9px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #333; animation: player_stat_spinner .6s linear infinite;}
@keyframes player_stat_spinner_no_offset {to {transform: rotate(360deg);}}
.player_stat_spinner_no_offset:before {content: ''; box-sizing: border-box; position: absolute; top: 12px; left: 0px; width: 18px; height: 18px; margin-top: -9px; margin-left: -9px; border-radius: 50%; border: 2px solid #ccc; border-top-color: #333; animation: player_stat_spinner_no_offset .6s linear infinite;}

.last-seen-online-container {width: 50%;}
.last-location-container {width: 50%;}

.online_status_dot {display: inline-block; width: 10px; height: 10px; border-radius: 50%; background-color: #555c63; margin-right: 5px;}
.online_status_dot.is_online {background-color: #7fba6d;}

/* ---- Games & Groups directories ---- */
.koro-letter-avatar {display: flex; align-items: center; justify-content: center; border-radius: 6px; color: #fff; font-weight: 700; flex: 0 0 auto; user-select: none;}
.game-card-icon {width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; background-color: #26292d;}
.game-card-meta {font-size: 0.82em; color: #7a8288;}
.game-playing-count {color: #7fba6d; font-weight: 600;}
.group-card {background-color: #30363c; cursor: pointer;}
.group-card:hover {background-color: #353c43;}
.group-detail-box {background-color: #32383e;}

/* ---- Custom range slider (deals threshold) ---- */
.koro-range {-webkit-appearance: none; appearance: none; height: 6px; border-radius: 3px; background: #1c1e22; outline: none;}
.koro-range::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: #0084dd; cursor: pointer; border: none;}
.koro-range::-moz-range-thumb {width: 16px; height: 16px; border-radius: 50%; background: #0084dd; cursor: pointer; border: none;}

/* ---- player history chart range buttons ---- */
.chart-range-btn {
    background-color: #3c444c; color: #adadad; border: none; border-radius: 2px;
    font-size: 0.78rem; padding: 2px 9px; margin-right: 5px; cursor: pointer;
}
.chart-range-btn:hover { background-color: #49525b; color: #ddd; }
.chart-range-btn.active { background-color: #181b1d; color: #fff; }

/* ============================================================
   GLOBAL SEARCH MODAL (Rolimons-style overlay)
   ============================================================ */
.global_search_tab_icon_svg {width: 1.8em; height: 1.8em; margin: 0 auto;}
.global_search_tab_icon_svg svg {width: 100%; height: 100%; fill: currentColor;}
#search_modal .nav-tabs .nav-link {color: #9aa0a6; border: 0; border-bottom: 2px solid transparent; background: transparent;}
#search_modal .nav-tabs .nav-link.active {color: #fff; border-bottom-color: #0084dd;}
#search_modal .nav-tabs .nav-link:hover {color: #ddd;}
.global_search_tab_title {font-size: 0.72em; font-weight: 600; letter-spacing: 0.04em;}
#search_modal .btn-flat-dark-gray-lg-font.btn-square {width: 48px; font-size: 1.4em; line-height: 1;}
.global-search-result {background-color: #30363c; border-radius: 2px;}
.global-search-result:hover {background-color: #3a4148; text-decoration: none;}
.global-search-result img {object-fit: cover;}

/* ============================================================
   DEALS PAGE (1:1 Rolimons)
   ============================================================ */
/* gray buttons */
.btn-gray.active {color: #f7f7f7; background-color: #26292d; border-color: #26292d;}
.btn-gray {background: #424952; border-color: #424952; color: #f7f7f7; font-size: 1em; font-weight: 400; border-width: 1px;}
.btn-gray:hover, .btn-gray:active {background: #26292d; border-color: #26292d; color: #f7f7f7;}
.btn-gray:focus {background: #424952; border-color: #424952; color: #f7f7f7; box-shadow: 0 0 0 0.15rem rgba(91, 192, 222, 0.35);}
.btn-gray.active:focus {background: #26292d; border-color: #26292d; color: #f7f7f7;}
.btn-gray-sm.active {color: #f7f7f7; background-color: #26292d; border-color: #26292d;}
.btn-gray-sm {background: #424952; border-color: #424952; color: #f7f7f7; border-width: 1px;}
.btn-gray-sm:hover, .btn-gray-sm:active, .btn-gray-sm:focus {background: #26292d; border-color: #26292d; color: #f7f7f7;}

/* deals legend */
.legend-alpha .legend-alpha-scale ul {margin: 0; margin-bottom: 5px; padding: 0; float: left; list-style: none;}
.legend-alpha .legend-alpha-scale ul li {font-size: 80%; list-style: none; margin-left: 0; line-height: 18px; margin-bottom: 2px; color: #ddd;}
.legend-alpha ul.legend-alpha-labels li span {display: block; float: left; height: 16px; width: 30px; margin-right: 5px; margin-left: 0;}

/* deals status indicator */
.page-deals #deal_scanning_status_message {color: #adadad;}
.status_indicator_circle {border-radius: 50%; width: 14px; height: 14px; float: left; margin-right: 5px; margin-top: 5px; padding: 0px; background-repeat: no-repeat; background-color: #555; box-shadow: #000 0 0px 2px 2px, inset #444 0 -2px 2px, #777 0 2px 2px;}

/* deal colors */
.deal_bg_color_poor {background-color: #7a8288;}
.deal_bg_color_uncommon {background-color: #00aa4c;}
.deal_bg_color_rare {background-color: #008ec1;}
.deal_bg_color_epic {background-color: #ac00e6;}
.deal_bg_color_legendary {background-color: #db9e1c;}
.deal_bg_gradient_uncommon {background-image: linear-gradient(#3A3F44, #256b44 50%, #3A3F44);}
.deal_bg_gradient_rare {background-image: linear-gradient(#3A3F44, #25667d 50%, #3A3F44);}
.deal_bg_gradient_epic {background-image: linear-gradient(#3A3F44, #5e336d 50%, #3A3F44);}
.deal_bg_gradient_legendary {background-image: linear-gradient(#3A3F44, #71613f 50%, #3A3F44);}
.deal_pct_badge {display: inline-block; color: #fff; font-size: 0.78em; font-weight: 600; padding: 1px 6px; border-radius: 2px;}

/* deals filter grid (Rolimons breakpoints) */
.page-deals .filter_control_grid {display: grid; column-gap: 1rem; row-gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); padding-bottom: 4px; margin-top: 16px;}
.page-deals .filter_control_grid label {margin-bottom: 6px; font-size: 0.95em; color: #ddd;}
@media (min-width: 500px) {.page-deals .filter_control_grid {grid-template-columns: 1fr 1fr;}}
@media (min-width: 768px) {.page-deals .filter_control_grid {grid-template-columns: 1fr 1fr 1fr 1fr;}}

/* deals card grid + card elements (Rolimons sizes) */
.page-deals .mix_container {display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-content: flex-start; column-gap: 0.6rem; row-gap: 0; text-align: initial; font-size: initial;}
.page-deals .mix_container:after {content: none;}
.page-deals .mix_item {display: block; position: relative; font-size: 15px; flex: 0 0 auto; cursor: pointer; width: calc(100%/1 - (((1 - 1) * 0.6rem) / 1)); margin-bottom: 0.6rem;}
.page-deals .mix_item a:hover {text-decoration: none; color: white;}
.page-deals .mix_gap {display: none;}
.page-deals .pagination-control {width: 100%;}
@media (min-width: 345px)  {.page-deals .mix_item {width: calc(100%/2 - (((2 - 1) * 0.6rem) / 2));}}
@media (min-width: 450px)  {.page-deals .mix_container {column-gap: 0.7rem;} .page-deals .mix_item {width: calc(100%/2 - (((2 - 1) * 0.7rem) / 2)); margin-bottom: 0.7rem;}}
@media (min-width: 550px)  {.page-deals .mix_item {width: calc(100%/3 - (((3 - 1) * 0.7rem) / 3));}}
@media (min-width: 768px)  {.page-deals .mix_item {margin-bottom: 0.8rem;}}
@media (min-width: 890px)  {.page-deals .mix_container {column-gap: 0.9rem;} .page-deals .mix_item {width: calc(100%/4 - (((4 - 1) * 0.9rem) / 4)); margin-bottom: 0.9rem;}}
@media (min-width: 1130px) {.page-deals .mix_container {column-gap: 1.0rem;} .page-deals .mix_item {width: calc(100%/5 - (((5 - 1) * 1.0rem) / 5)); margin-bottom: 1.0rem;}}

.deal-title {font-size: 0.9em; font-weight: 500; line-height: 23px; text-shadow: -1px 0px 0px rgba(0,0,0,0.5); max-width: 260px;}
.deal-image {height: 80px; width: 80px; margin-left: 36px; margin-right: 52px;}
.page-deals .stat-header {font-size: 0.74em; line-height: 16px;}
.page-deals .stat-data {font-size: 0.82em; line-height: 16px; padding-right: 7px; color: #eee;}
@media (min-width: 345px) {.deal-title {font-size: 0.88em; line-height: 22px;} .deal-image {height: 62px; width: 62px; margin-left: 1px; margin-right: 3px;} .page-deals .stat-header {line-height: 15px;} .page-deals .stat-data {line-height: 15px; padding-right: 4px;}}
@media (min-width: 365px) {.deal-image {height: 70px; width: 70px;} .page-deals .stat-data {padding-right: 5px;}}
@media (min-width: 415px) {.deal-title {font-size: 0.9em;} .deal-image {height: 80px; width: 80px; margin-left: 4px; margin-right: 12px;} .page-deals .stat-header {font-size: 0.76em; line-height: 16px;} .page-deals .stat-data {line-height: 16px; padding-right: 4px;}}
@media (min-width: 600px) {.deal-title {font-size: 0.96em;} .deal-image {margin-left: 4px; margin-right: 7px;} .page-deals .stat-header {font-size: 0.80em; line-height: 20px;} .page-deals .stat-data {font-size: 0.90em; line-height: 20px;}}
@media (min-width: 675px) {.deal-image {height: 100px; width: 100px; margin-left: 3px; margin-right: 5px;} .page-deals .stat-header {font-size: 0.83em; line-height: 20px;} .page-deals .stat-data {font-size: 0.96em; line-height: 20px; padding-right: 5px;}}
@media (min-width: 970px) {.deal-title {font-size: 0.98em; line-height: 24px;} .deal-image {height: 110px; width: 103px; margin-left: 9px; margin-right: 10px;} .page-deals .stat-header {font-size: 0.83em; line-height: 21px;} .page-deals .stat-data {font-size: 0.98em; line-height: 21px; padding-right: 8px;}}
@media (min-width: 1130px) {.deal-image {height: 100px; width: 100px; margin-left: 4px; margin-right: 6px;} .page-deals .stat-header {font-size: 0.81em;} .page-deals .stat-data {font-size: 0.96em; padding-right: 8px;}}
@media (min-width: 1200px) {.deal-title {font-size: 1.0em; line-height: 26px;} .deal-image {height: 110px; width: 110px; margin-left: 2px; margin-right: 4px;}}

/* ============================================================
   LUCKY CAT PAGE
   ============================================================ */
@media (max-width: 575px)  { .lucky_cat_icon { display: inline-block; width: 100px; height: 100px; } }
@media (min-width: 576px)  { .lucky_cat_icon { display: inline-block; width: 150px; height: 150px; } }
.lucky_cat_icon svg {width: 100%; height: 100%;}
.pane-notes {font-size: 1.0em; font-weight: 500; color: #b4bac1; line-height: 1.25em;}
@media (min-width: 576px)  { .pane-notes {font-weight: 400; line-height: 1.3em;} }
@media (min-width: 768px)  { .pane-notes {font-size: 1.2em; font-weight: 500;} }
@media (min-width: 992px)  { .pane-notes {font-size: 1.35em; line-height: 1.4em; width: 100%;} }
@media (min-width: 1200px) { .pane-notes {font-size: 1.4em; width: 95%;} }
@media (max-width: 575px)  { .current-stat-header {font-size: 0.85em; line-height: 0.9em;} .current-stat-data {font-size: 0.9em; margin-left: 8px;} }
@media (min-width: 576px)  { .current-stat-header {font-size: 0.90em; line-height: 1.0em;} .current-stat-data {font-size: 1.0em; margin-left: 8px;} }
@media (min-width: 992px)  { .current-stat-header {font-size: 1.0em; line-height: 1.1em;} .current-stat-data {font-size: 1.1em; margin-left: 8px;} }
.page-luckycat .current-stat-data {color: #fff; font-weight: 600;}

/* ---- item detail page ---- */
.page-item .page_title {color: #eee; font-weight: 600; font-size: 2em; margin-right: 8px;}
.page-item .item_acronym {color: #8c9095; font-size: 1.35em; font-weight: 400; line-height: 1.6; margin-right: 10px;}
.page-item .item_flag {color: #81D4FA;}
.page-item .section_header {color: #eee; font-size: 1.3em; font-weight: 600;}
.page-item .stat-header {font-size: 0.8em; text-transform: none;}
.page-item .stat-data {font-size: 1.15em;}
.value-stats-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;}
@media (min-width: 768px) { .value-stats-grid {grid-template-columns: repeat(4, 1fr);} }
.value-stat-box {padding: 12px 16px; border-top: 2px solid #0084dd;}
.value-stat-header {color: #89b7d4; font-size: 0.9em; font-weight: 500;}
.value-stat-data {color: #eee; font-size: 1.35em; font-weight: 600; line-height: 1.15em;}
.value_svg_container {width: 44px; height: 44px; margin-right: 10px; flex-shrink: 0;}
.value_svg svg {width: 100%; height: 100%; display: block;}
.ownership-stats-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px;}
@media (min-width: 768px) { .ownership-stats-grid {grid-template-columns: repeat(3, 1fr);} }
@media (min-width: 992px) { .ownership-stats-grid {grid-template-columns: repeat(6, 1fr);} }
.ownership-stat-box {padding: 12px 16px;}
.item_page_chart_container {background-color: #1a1d21; height: 400px; position: relative; padding: 10px; display: flex; flex-direction: column;}
.tab-content > .item_page_chart_container.active {display: flex;} /* beat bootstrap's .tab-content > .active {display:block} so the canvas wrap can flex-grow */
@media (min-width: 768px) {.item_page_chart_container {height: 480px;}}
.item_page_chart_container .chart_canvas_wrap {position: relative; flex: 1 1 auto; min-height: 0;}
.chart_toolbar {flex: 0 0 auto; padding: 2px 4px 8px 4px;}
.chart_range_buttons button {background-color: #2b2f33; border: 1px solid #3a3f44; color: #c8cdd1; font-size: 12px; padding: 2px 9px; margin-right: 4px; border-radius: 3px; cursor: pointer; outline: none;}
.chart_range_buttons button.active {background-color: #f0f0f0; border-color: #f0f0f0; color: #16181b; font-weight: 600;}
.chart_range_buttons button:hover:not(.active) {background-color: #383d42;}
.chart_date_range {color: #c8cdd1; font-size: 12px; border: 1px solid #3a3f44; border-radius: 3px; padding: 2px 10px; background-color: #2b2f33;}
.chart_date_range:empty {display: none;}
.chart_legend {flex: 0 0 auto; text-align: center; padding-top: 8px; font-size: 12px; color: #c8cdd1;}
.chart_legend .legend_entry {margin: 0 12px; white-space: nowrap;}
.chart_legend .legend_line {display: inline-block; width: 18px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; margin-top: -2px;}
.chart_legend .legend_dot {display: inline-block; width: 9px; height: 9px; border-radius: 50%; vertical-align: middle; margin-right: 6px; margin-top: -2px;}
.owners-table-scroll {max-height: 420px; min-height: 380px; overflow-y: auto;}
.owners-table {color: #ccc; margin-bottom: 4px;}
.owners-table thead th {color: #c8c8c8; border-top: none; border-bottom: 1px solid rgba(0, 0, 0, 0.6); font-size: 0.85em; position: sticky; top: 0; background-color: #272b30; text-align: left; vertical-align: top;}
.owners-table td {border-top: 0; border-color: #2c3136; vertical-align: middle; font-size: 0.9em; padding: 3px 5px; height: 30px;}
.owners-table a {color: #cfd8dc;}
.owners-table a:hover {color: #fff; text-decoration: none;}
.more-items-slider {display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px;}
.more-items-card {flex: 0 0 130px; max-width: 130px;}
.more-items-card a {text-decoration: none;}

/* ---- global search: limited item cards ---- */
/* minmax(0,1fr) lets tracks shrink below long nowrap names (1fr alone causes
   grid blowout: cards overflow the modal off the page edge) */
.search-item-card-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
@media (min-width: 576px) { .search-item-card-grid {grid-template-columns: repeat(3, minmax(0, 1fr));} }
@media (min-width: 768px) { .search-item-card-grid {grid-template-columns: repeat(4, minmax(0, 1fr));} }
@media (min-width: 992px) { .search-item-card-grid {grid-template-columns: repeat(6, minmax(0, 1fr));} }
.search-item-card {min-width: 0;}
.search-item-card a {text-decoration: none; display: block;}
.search-item-card .item_card_name {font-size: 0.85em; font-weight: 600;}
.search-player-card-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px;}
@media (min-width: 576px) { .search-player-card-grid {grid-template-columns: repeat(3, minmax(0, 1fr));} }
@media (min-width: 992px) { .search-player-card-grid {grid-template-columns: repeat(4, minmax(0, 1fr));} }
.search-player-card {min-width: 0;}
.search-player-card a {text-decoration: none; display: block; color: inherit;}
.search-player-card a:hover {text-decoration: none; color: white;}
.search-player-card img {object-fit: cover;}

/* ---- mini DataTables (owner lists) ---- */
.koro-dt-controls {gap: 8px; margin-bottom: 8px;}
.koro-dt-length {display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.82rem; color: #9aa0a6; white-space: nowrap;}
.koro-dt-length .custom-select {width: auto; background-color: #23272b; color: #ddd; border-color: #1b1e21;}
.koro-dt-search {display: flex; align-items: center; gap: 6px; margin: 0; font-size: 0.82rem; color: #9aa0a6;}
.koro-dt-search .form-control {width: 160px; background-color: #23272b; color: #ddd; border-color: #1b1e21;}
.koro-dt-search .form-control:focus {background-color: #23272b; color: #fff; box-shadow: none; border-color: #0084dd;}
.koro-dt-table th {white-space: nowrap; user-select: none;}
.koro-dt-table th.sorting, .koro-dt-table th.sorting_asc, .koro-dt-table th.sorting_desc {cursor: pointer; position: relative; padding-right: 20px;}
.koro-dt-table th.sorting::after, .koro-dt-table th.sorting_asc::after, .koro-dt-table th.sorting_desc::after {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%); font-size: 0.65em; color: #5e676e; content: "\25B2\A\25BC"; white-space: pre; line-height: 0.9;}
.koro-dt-table th.sorting_asc::after {content: "\25B2"; color: #ddd;}
.koro-dt-table th.sorting_desc::after {content: "\25BC"; color: #ddd;}
.koro-dt-table td {vertical-align: middle;}
.koro-dt-avatar {width: 38px; padding-right: 0 !important;}
.koro-dt-player {color: #e8e8e8; font-weight: 600;}
.koro-dt-player:hover {color: #fff;}
.koro-dt-footer {gap: 8px; margin-top: 4px; padding-bottom: 6px;}
.koro-dt-info {font-size: 0.8rem; color: #9aa0a6;}
.koro-dt .pagination .page-link {background-color: #23272b; border-color: #1b1e21; color: #9aa0a6;}
.koro-dt .pagination .page-item.active .page-link {background-color: #0084dd; border-color: #0084dd; color: #fff;}
.koro-dt .pagination .page-item.disabled .page-link {background-color: #23272b; color: #5e676e;}
.koro-trade-btn {background-color: #0084dd; color: #fff; font-size: 0.75rem; font-weight: 600; padding: 2px 12px;}
.koro-trade-btn:hover {background-color: #0a95f5; color: #fff;}

/* ---- generic toggle switch (player page Stack Hoards etc.) ---- */
.switch {display: inline-flex; align-items: center; color: #c8cdd1; font-weight: 600; font-size: 0.9rem; cursor: pointer; margin-bottom: 0; -webkit-user-select: none; user-select: none;}
.switch .switch-input {position: absolute; opacity: 0; width: 0; height: 0;}
.switch .switch-slider {position: relative; display: inline-block; width: 36px; height: 20px; background-color: #495057; border-radius: 10px; transition: background-color 0.15s; flex: 0 0 auto; margin-left: 10px;}
.switch .switch-slider::before {content: ""; position: absolute; left: 2px; top: 2px; width: 16px; height: 16px; background-color: #fff; border-radius: 50%; transition: transform 0.15s;}
.switch .switch-input:checked + .switch-slider {background-color: #0084dd;}
.switch .switch-input:checked + .switch-slider::before {transform: translateX(16px);}

/* ---- player page badges ---- */
.roli_badge {padding: 3px; line-height: 0; display: inline-block; width: 62px; height: 62px;}
.roli_badge svg {display: block; width: 100%; height: 100%;}
#badges_container {padding: 2px 4px;}
#badges_expand svg {transition: transform 0.15s;}
#badges_expand.expanded svg {transform: rotate(180deg);}

/* ---- player inventory controls ---- */
#inventory_controls label {color: #aaa; font-size: 0.85rem; margin-bottom: 4px;}
#inventory_controls .dropdown-item {cursor: pointer;}

/* ---- KoroBadges page (1:1 with RoliBadges) ---- */
.badge_collection_container { background-color: #1f2327; padding: 0px 16px 16px 0px; }
.badge_outer_container { width: 100%; padding: 16px 0px 0px 16px; }
@media (min-width: 576px)  { .badge_outer_container { width: 50%; } }
@media (min-width: 768px)  { .badge_outer_container { width: 33.3333%; } }
@media (min-width: 992px)  { .badge_outer_container { width: 25%; } }
@media (min-width: 1200px) { .badge_outer_container { width: 20%; } }
.badge_inner_container {
  box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.15);
  background-color: #27333c;
  padding: 9px;
  width: 100%;
  min-height: 180px;
}
.badge_title { color: #eee; font-size: 17px; font-weight: 500; line-height: 1.2; }
.badge_title_container { margin-left: 9px; margin-top: auto; margin-bottom: auto; }
.badge_description { padding: 6px 6px 0px 6px; font-size: 14px; line-height: 1.3; color: #adadad; }
.badge_description a { color: #4db7d6; }
.border_top_booster            { border-top: 2px #f47fff solid; }
.border_top_koro_award_winner  { border-top: 2px #d9b75d solid; }
.border_top_koro_award_nominee { border-top: 2px #d1d1d1 solid; }
.border_top_artifact           { border-top: 2px #ad2d36 solid; }
.border_top_legendary          { border-top: 2px #e78224 solid; }
.border_top_epic               { border-top: 2px #ab0be1 solid; }
.border_top_rare               { border-top: 2px #038dbe solid; }
.border_top_uncommon           { border-top: 2px #0bab52 solid; }
.border_top_common             { border-top: 2px #7a8288 solid; }
.badge_overlay_unobtained { opacity: 0.45; }
/* gold checkmark on obtained badges (player KoroBadges page) */
.checkmark {display:inline-block; width: 22px; height:22px; transform: rotate(45deg); position: absolute; bottom: 6px; right: 6px; filter: drop-shadow(0px 0px 1px #000); opacity: 90%;}
.checkmark_circle {position: absolute; width:22px; height:22px; border-radius:11px; left:0; top:0; background: linear-gradient(135deg, #fbd000 0%, #a78611, 70%, #d6b00a 100%);}
.checkmark_stem {position: absolute; width:3px; height:9px; background-color:#eee; left:11px; top:6px;}
.checkmark_kick {position: absolute; width:3px; height:3px; background-color:#eee; left:8px; top:12px;}

/* ---- inventory card stat rows + UAID / Owned Copies buttons ---- */
.item_card_stat_header { font-size: 0.875em; color: #7a8288; }
a.inv-card-link:hover .item_card_stat_header { color: #adadad; text-decoration: none; }
.inv_owner_since_time { color: #7fba6d !important; }
.btn-light-blue { background-image: linear-gradient(#1a90e3, #1885d2 60%, #195daf); background-repeat: no-repeat; filter: none; color: #fff; }
.btn-light-blue:hover, .btn-light-blue:focus { color: #fff; filter: brightness(1.08); }
.btn-bricky-green { background-image: linear-gradient(#239e56, #1f8b4c 60%, #166537); background-repeat: no-repeat; filter: none; color: #fff; }
.btn-bricky-green:hover, .btn-bricky-green:focus { color: #fff; filter: brightness(1.08); }

/* ---- shared page header + stat pane (badges, uaid) — official rules ---- */
.page-badges .page_title, .page-uaid .page_title { color: #ddd; font-size: 1.6em; font-weight: 500; margin-bottom: 0px; margin-right: 0.175em; overflow-wrap: anywhere; }
.page_subtitle { color: #5bc0de; margin-right: 0.33em; font-size: 1.4em; font-weight: 300; }
.page_title_offsite_link_icon { width: 1.6em; line-height: 1em; color: #ddd; }
@media (min-width: 576px) {
  .page-badges .page_title, .page-uaid .page_title { font-size: 1.8em; }
  .page_subtitle { font-size: 1.45em; }
}
.page-uaid .section_header { color: #ddd; font-size: 1.55em; font-weight: 500; margin-bottom: 0px; }
.page-uaid .primary-stat-container { margin-top: 12px; }
@media (min-width: 768px) { .page-uaid .primary-stat-container { margin-top: 38px; } }
@media (min-width: 992px) { .page-uaid .primary-stat-container { margin-top: 36px; } }
.page-uaid .primary-stat-header { color: #7A8288; font-weight: 500; font-size: 0.85em; }
.page-uaid .primary-stat-data { color: #eee; font-weight: 600; font-size: 1.0em; line-height: 1.15em; }
@media (min-width: 576px) { .page-uaid .primary-stat-header { font-size: 0.7em; } .page-uaid .primary-stat-data { font-size: 0.9em; } }
@media (min-width: 768px) { .page-uaid .primary-stat-header { font-size: 0.85em; } .page-uaid .primary-stat-data { font-size: 1.1em; } }
@media (min-width: 992px) { .page-uaid .primary-stat-header { font-size: 0.92em; } .page-uaid .primary-stat-data { font-size: 1.2em; } }
@media (max-width: 399px) { .page-uaid .stat_pane_stat_column { max-width: 160px; } }
@media (min-width: 400px) { .page-uaid .stat_pane_stat_column { max-width: 170px; } }
@media (min-width: 576px) { .page-uaid .stat_pane_stat_column { max-width: 230px; } }
@media (min-width: 768px) { .page-uaid .stat_pane_stat_column { max-width: 220px; } }
@media (min-width: 992px) { .page-uaid .stat_pane_stat_column { max-width: 310px; } }
@media (min-width: 1200px) { .page-uaid .stat_pane_stat_column { max-width: 330px; } }
.page-uaid .card { background-color: #30363c; }
.page-uaid .card a { color: #4db7d6; }
.page-uaid .primary-stat-data a { color: #eee; }

/* ---- About This Item (item page) ---- */
.about-item-anchor-target { scroll-margin-top: 70px; }
.about-item-card { background-color: #30363c; box-shadow: 2px 2px 3px 2px rgba(0,0,0,0.15); }
.about-item-kicker { color: #7a8288; font-size: 0.8em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.about-item-overview { color: #ccc; line-height: 1.5; }
.about-item-description { color: #aab2b8; line-height: 1.5; white-space: pre-line; }
.about-item-divider { border-top: 1px solid #3d444b; margin: 14px 0; }
.about-item-fact { background-color: #232a30; border: 1px solid #3d444b; border-radius: 3px; color: #ccc; padding: 4px 10px; font-size: 0.9em; cursor: pointer; }
.about-item-fact:hover { background-color: #2c343b; }
.about-item-fact-label { color: #7a8288; }
.about-item-more-info-link { color: #4db7d6; }

/* Icon inside pill buttons (Trade Ads etc) */
.button_icon_svg svg { width: 1.05em; height: 1.05em; vertical-align: -0.18em; margin-right: 4px; }

/* Account verification page (verify.html) */
.external_link_button { position: relative; padding-right: 1.9em; }
.external_link_button_svg { position: absolute; top: 3px; right: 3px; color: #cfe3f1; }
#navbar_player_menu_pfp img { display: block; }
.page-verify #verify_player_results .search-player-card a { color: inherit; }

/* Hide alt text while remote thumbnails/avatars are still loading
   (alt text used to flash e.g. "Player Thumbnail" until Avatar.ashx answered).
   Screen readers still announce the alt attribute. */
img { color: transparent; }