/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[3]!./src/components/Navbar/navbar.module.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.navbar_navbar_ctn__w7Z7b {
  background-color: var(--black);
  width: 100%;
  display: flex;
  position: relative;
}

.navbar_navbar_inner_ctn__7sjDH {
  padding: 0 20px;
  height: var(--menubar-height);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar_logo_ctn__Kg4Bf {
  width: 142px;
  position: relative;
  height: 40px;
}

.navbar_logo_ctn__Kg4Bf img {
  object-fit: contain;
}

.navbar_right_menu_ctn__HcD_u {
  display: flex;
  align-items: center;
}

.navbar_payout_address__zvhe3 {
  font-size: 12px;
  margin-right: 20px;
  cursor: pointer;
}

/****************************************  HAMBURGER  ****************************************/

.navbar_menubtn_ctn_outer__YwbC4 {
  position: relative;
  height: 100%;
  width: 40px;
  display: flex;
  align-items: center;
}

.navbar_menubtn_ctn__yS1Kv {
  opacity: 0;
  top: 0px;
  right: 0px;
  width: 40px !important;

  margin: 0 !important;
  border: none !important;
  background-color: transparent;
  padding: 0 !important;
}
.navbar_menubtn_ctn__yS1Kv:checked + .navbar_menu_btn__0ItmN > span {
  transform: rotate(45deg);
}
.navbar_menubtn_ctn__yS1Kv:checked + .navbar_menu_btn__0ItmN > span::before {
  top: 0;
  transform: rotate(0deg);
  width: 100%;
}
.navbar_menubtn_ctn__yS1Kv:checked + .navbar_menu_btn__0ItmN > span::after {
  top: 0;
  transform: rotate(90deg);
  width: 100%;
}

.navbar_menu_btn__0ItmN {
  position: absolute;
  right: 0px;
  width: 30px;
  height: 40px;
  cursor: pointer;
  z-index: 99999;
}
.navbar_menu_btn__0ItmN > span,
.navbar_menu_btn__0ItmN > span::before,
.navbar_menu_btn__0ItmN > span::after {
  display: block;
  position: absolute;
  width: 100%;
  height: 3px;
  background-color: #fff;
  transition-duration: 0.25s;
  top: 19px;
  border-radius: 4px;
}
.navbar_menu_btn__0ItmN > span::before {
  content: '';
  top: -8px;
  width: 80%;
}
.navbar_menu_btn__0ItmN > span::after {
  content: '';
  top: 8px;
  width: 60%;
}

.navbar_menu_items_ctn__vfSai {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: -80px;
  opacity: 0;
  top: var(--menubar-height);
  z-index: 9999;
  background-color: var(--black);
  height: calc(100vh - var(--menubar-height));
  padding: 20px;
  width: var(--sidebar-width);
  align-items: flex-end;
  transition: all ease-in-out 200ms;
}

.navbar_menu_item__DPdUH {
  font-family: 'Odachi';
  letter-spacing: 2px;
  cursor: pointer;
  margin: 0;
  margin-bottom: 10px;
  font-size: 28px;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  color: #fff;
  text-decoration: none;
}

.navbar_menu_item__DPdUH:hover {
  color: var(--blue);
}

.navbar_menu_item__DPdUH div {
  display: flex;
  align-items: center;
}

.navbar_menu_item__DPdUH img {
  margin-left: 5px;
}

.navbar_menu_item__DPdUH:hover img {
  filter: invert(28%) sepia(100%) saturate(1353%) hue-rotate(182deg) brightness(94%) contrast(103%);
}

/*!***********************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[3]!./src/components/Widget/widget.module.css ***!
  \***********************************************************************************************************************************************************************************************************************************************************************************/
.widget_widget_ctn__K7ha3 {
  width: var(--sidebar-width);
  min-height: 500px;
}

.widget_paybutton_frame__S6qDn {
  height: 500px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.widget_credit_hint__PrVpI {
  position: absolute;
  top: 0px;
  left: 0;
  right: 0;
  transform: none;
  font-size: 12px;
  color: #ccc;
  width: 100%;
  text-align: center;
}

.widget_widget_off_ctn__HnW2s {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  height: 100%;
  padding: 20px;
  height: 500px;
}

.widget_widget_off_inner__d0LHB {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  height: 100%;
  padding: 20px;
  border: 1px dotted #fff;
  width: 100%;
}

@media (max-width: 990px) {
  .widget_widget_ctn__K7ha3 {
    position: relative;
    min-height: 100px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .widget_paybutton_frame__S6qDn {
    height: 100px;
  }

  .widget_widget_off_ctn__HnW2s {
    height: 100px;
  }
}

/*!************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[3]!./src/components/WelcomeModal/welcome-modal.module.css ***!
  \************************************************************************************************************************************************************************************************************************************************************************************************/
.welcome-modal_modal_ctn__68gQz {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - var(--menubar-height));
  background-color: rgba(14, 13, 17, 0.8);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  flex-direction: column;
  z-index: 999999;
  padding-top: 100px;
}

.welcome-modal_modal_inner_ctn__mfkcs {
  z-index: 999;
  width: 100%;
  max-width: 950px;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #9f9f9f;
  padding: 40px;
  border-radius: 3px;
  background: var(--black);
  flex-direction: column;
  position: relative;
  z-index: 1;
  font-size: 20px;
  line-height: 1.8em;
}

.welcome-modal_modal_inner_ctn__mfkcs::after {
  content: '';
  position: absolute;
  background: linear-gradient(0deg, rgba(255, 0, 174, 0.8) 0%, rgba(0,116,194,0) 100%);
  width: 80%;
  height: 50px;
  bottom: -51px;
  z-index: -3;
  left: 10%;
  transform: rotate(180deg);
}

.welcome-modal_odachi_header__woom8 {
  display: flex;
  flex-direction: column;
  font-family: 'Odachi';
  z-index: 99;
  text-align: center;
  width: 100%;
  max-width: 600px;
  position: relative;
  padding-bottom: 20px;
}

.welcome-modal_odachi_header__woom8::after {
  content: '';
  position: absolute;
  background: linear-gradient(0deg, rgba(0,116,194,0.8) 0%, rgba(0,116,194,0) 100%);
  width: 80%;
  height: 50px;
  bottom: 0;
  z-index: -1;
  left: 10%;
}

.welcome-modal_odachi_header__woom8 h4 {
  font-size: 60px;
}

.welcome-modal_odachi_header__woom8 span {
  font-size: 30px;
  margin-bottom: -5px;
}

.welcome-modal_btn_ctn___8cnq {
  margin-top: 30px;
  z-index: 99;
}

.welcome-modal_how_to_ctn__KKYXm {
  padding-left: 15px;
  text-align: left;
}

.welcome-modal_how_to_ctn__KKYXm li {
  margin-bottom: 15px;
}

.welcome-modal_how_to_ctn__KKYXm li:last-child {
  margin-bottom: 0px;
}

.welcome-modal_input_ctn__v93Zw {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-top: 20px;
  text-align: left;
}

.welcome-modal_input_ctn__v93Zw label {
  font-size: 14px;
  margin-bottom: 10px;
}

.welcome-modal_input_ctn__v93Zw input {
  height: 50px;
  padding: 0 10px;
}

.welcome-modal_input_row__MpSOn {
  display: flex;
  align-items: center;
}

.welcome-modal_input_row__MpSOn input {
  flex: 1 1;
}

.welcome-modal_cashtab_btn__H76pg {
  height: 50px;
  padding: 0 12px;
  margin-left: 10px;
  background: #2b2b2b;
  border: 1px solid #555;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  box-sizing: border-box;
  font: inherit;
}

.welcome-modal_cashtab_btn__H76pg:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.welcome-modal_cashtab_status__5hotl {
  margin-top: 8px;
  font-size: 12px;
  opacity: 0.6;
}

.welcome-modal_validation_msg__Cy6MN {
  margin-top: 6px;
  font-size: 12px;
  opacity: 0.9;
}

.welcome-modal_validation_msg__Cy6MN.welcome-modal_valid__SPP_i { color: #3ddc97; }
.welcome-modal_validation_msg__Cy6MN.welcome-modal_invalid__pT1AB { color: #ff4d4d; }

.welcome-modal_cashtab_main_btn__WP8xQ {
  margin-left: 10px;
  display: inline-block;
}

.welcome-modal_inner_btn_ctn__bH3pb {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.welcome-modal_back_btn__TjcRV {
  font-size: 14px;
  margin: 20px;
  cursor: pointer;
  opacity: 0.5;
}

.welcome-modal_back_btn__TjcRV:hover {
  opacity: 1;
}

.welcome-modal_loader__wTH0Z {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.2);
  border-top-color: #ff00ae;
  border-radius: 50%;
  animation: welcome-modal_spin__kQHCW 0.8s linear infinite;
  display: inline-block;
}

@keyframes welcome-modal_spin__kQHCW { to { transform: rotate(360deg); } }

/* spectate uses back_btn styling */

@media (max-width: 990px) {
  .welcome-modal_modal_ctn__68gQz {
    width: 100%;
    min-height: 100vh;
    height: unset;
  }
}

/*!*************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[3]!./src/components/Tooltip/tooltip.module.css ***!
  \*************************************************************************************************************************************************************************************************************************************************************************************/

/* antd anchor to attach tooltip (invisible) */
.tooltip_anchor___65ed {
	position: absolute;
	left: 50%;
	bottom: 2px;
	transform: translateX(-50%);
	display: block;
	width: 0;
	height: 0;
}

/* antd overlay container customizations */
.tooltip_overlay__fiTAP .ant-tooltip-inner {
	background: rgba(17, 17, 17, 0.95);
	border: 1px solid #444;
	border-radius: 8px;
	min-width: 180px;
	max-width: 260px;
	color: #fff;
	padding: 8px 10px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.tooltip_overlay__fiTAP .ant-tooltip-arrow {
	--antd-arrow-background-color: rgba(17, 17, 17, 0.95);
}

.tooltip_tooltip_inner__GHea3 {
	font-size: 12px;
	line-height: 1.35;
	text-align: center;
}

.tooltip_tooltip_inner__GHea3 h4 {
	margin: 0 0 4px 0;
	font-size: 12px;
	font-weight: 700;
}

.tooltip_tooltip_inner__GHea3 p {
	margin: 0;
}

	/* Style helper classes only when used inside the tooltip content */
	.tooltip_overlay__fiTAP .tooltip_section {
		margin-top: 8px;
	}

	.tooltip_overlay__fiTAP .timer_label {
		font-size: 11px;
		opacity: 0.9;
		letter-spacing: 0.6px;
		margin-bottom: 6px;
		text-transform: uppercase;
	}

	.tooltip_overlay__fiTAP .tooltip_timer {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 6px 10px;
		border: 1px solid #555;
		border-radius: 6px;
		background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(0,0,0,0.08));
		box-shadow: inset 0 0 0 1px rgba(255,255,255,0.03);
	}

	.tooltip_overlay__fiTAP .timer_digits {
		font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 1px;
	}



/*!*******************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[3]!./src/components/Chat/chat.module.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************************/
.chat_chat_ctn__EgWdg {
  position: relative;
  z-index: 10;
  pointer-events: auto;
}

/* Left chat column width with animated collapse */
.chat_left__HTVdv {
  width: 320px;
  transition: width 0.25s ease;
}
.chat_left__HTVdv:not(.chat_open__Mellp) {
  width: 0px;
}
.chat_left__HTVdv:not(.chat_open__Mellp) .chat_chat_panel__nO6A0 {
  visibility: hidden;
}

.chat_sidebar__75x2x {
  position: relative;
  z-index: 1;
}

/* Left collapses wrapper width to zero when closed; bottom height managed by parent */
.chat_left__HTVdv .chat_panel_wrapper__5msLt {
  width: 0;
  transform: translateX(-100%);
  transition: transform 0.25s ease, width 0.25s ease;
}
.chat_left__HTVdv.chat_open__Mellp .chat_panel_wrapper__5msLt {
  transform: translateX(0);
  width: 320px;
}

.chat_bottom__OdnMD .chat_panel_wrapper__5msLt {
  transform: translateY(100%);
  transition: transform 0.25s ease;
  width: 100%;
}
.chat_bottom__OdnMD.chat_open__Mellp .chat_panel_wrapper__5msLt {
  transform: translateY(0);
}

.chat_open_btn___iUFI {
  position: absolute;
  top: 50%;
  left: 10px;
  transform: translate(0, -50%);
  background: rgba(0,0,0,0.75);
  border: 1px solid #444;
  color: #fff;
  width: 28px;
  height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  z-index: 5;
}
/* Center bottom open button horizontally */
.chat_bottom__OdnMD .chat_open_btn___iUFI {
  top: 0px;
  left: 50%;
  right: auto;
  transform: translate(-50%, 0);
}

.chat_toggle_btn__cAGd6 {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translate(0, -50%);
  background: rgba(0,0,0,0.0);
  border: 1px solid rgb(69 69 69 / 50%);
  color: #fff;
  width: 28px;
  height: 37px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Center bottom close button horizontally */
.chat_bottom__OdnMD .chat_toggle_btn__cAGd6 {
  top: 0px;
  left: 50%;
  right: auto;
  transform: translate(-50%, 0);
}

.chat_panel_wrapper__5msLt {
  position: relative;
}

.chat_chat_panel__nO6A0 {
  width: 100%;
  max-height: calc(100vh - var(--menubar-height));
  background: #0f0f0f;
  border-right: 1px solid #333;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
}

/* Bottom panel limits height */
.chat_bottom__OdnMD .chat_chat_panel__nO6A0 {
  max-height: 28vh;
}

.chat_sidebar__75x2x .chat_chat_panel__nO6A0 {
  width: 100%;
  max-height: 300px;
}

.chat_chat_header__28JFx {
  padding: 8px 10px;
  border-bottom: 1px solid #222;
  font-size: 14px;
}

.chat_tabs_row__Ig8MI {
  display: flex;
  gap: 4px;
  padding: 6px 6px 0 6px;
  border-bottom: 1px solid #222;
}
.chat_tab_btn__ViJsT {
  background: #1a1a1a;
  border: 1px solid #333;
  color: #fff;
  padding: 6px 10px;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  font-size: 12px;
}
.chat_tab_btn_active__0jw3U {
  background: #242424;
  border-bottom-color: #242424;
}

.chat_chat_list__TeU__ {
  flex: 1 1;
  overflow-y: auto;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat_msg_row__jWkRc {
  display: flex;
  gap: 8px;
}

.chat_msg_avatar__Zm_Fo {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #333;
  flex: 0 0 18px;
}

.chat_msg_body__lFBZb {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chat_msg_meta__AEbCv {
  display: flex;
  gap: 8px;
  font-size: 11px;
  color: #bbb;
}

.chat_msg_name__U33lR { font-weight: 600; color: #fff; }
.chat_msg_time__9ZOsU { opacity: 0.7; }

.chat_msg_text__pko3_ {
  font-size: 13px;
  color: #eaeaea;
  word-break: break-word;
}

.chat_chat_input_row__DPb4E {
  padding: 8px;
  display: flex;
  gap: 8px;
  border-top: 1px solid #222;
}

.chat_chat_input__dQnK9 {
  flex: 1 1;
  height: 32px;
  background: #121212;
  border: 1px solid #333;
  color: #fff;
  padding: 0 8px;
}

.chat_send_btn__hxcJI {
  background: #222;
  border: 1px solid #444;
  color: #fff;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.chat_event_row__c1yhR {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}
.chat_event_avatar__rKjAP {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #333;
  margin-top: 4px;
}
.chat_event_text__dkURL {
  font-size: 13px;
  color: #eaeaea;
}
.chat_event_meta__DYc48 {
  font-size: 11px;
  opacity: 0.7;
  margin-left: 4px;
}



/*!*******************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[11].oneOf[7].use[3]!./src/app/page.module.css ***!
  \*******************************************************************************************************************************************************************************************************************************************************************/
.page_main_ctn__gYT2y {
  width: 100%;
  position: relative;
  background-color: var(--black);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  max-width: 2600px;
  margin: auto;
}

.page_content_ctn__yG0gh {
  width: 100%;
  display: flex;
  flex-direction: row;
  position: relative;
  max-height: 2000px;
}

.page_grid_ctn__i_vEq {
  flex: 1 1 auto;
  min-width: 0; /* allow grid to shrink so sidebar stays visible */
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: var(--black);
  min-height: calc(100vh - var(--menubar-height));
}

/* Bottom chat wrapper that animates height and clips overflow */
.page_bottom_chat_container__qxGdo {
  position: relative;
  width: 100%;
  flex: 0 0 auto;
  margin-top: 0;
  overflow: hidden;
  transition: height 0.25s ease;
  background: transparent;
}

.page_unified_grid_container__P4Kj1 {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

.page_unified_grid_background__Qd_Mo {
  background-size: cover !important;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: -1;
  opacity: 0.7;
}

/* Full-screen overlay for reconnecting state */
.page_reconnecting_overlay__MiDm0 {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999999; /* above everything */
  pointer-events: all; /* consume clicks so no other UI can be interacted with */
}

/* Lightweight first-paint shell while app JS hydrates */
.page_loading_shell__vexzq {
  width: 100%;
  min-height: calc(100vh - var(--menubar-height));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #fff;
}
.page_loading_card__hcMZh {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  background: rgba(0,0,0,0.55);
  border: 1px solid #333;
  border-radius: 10px;
  padding: 22px 26px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.page_loading_logo__PIF8w {
  filter: drop-shadow(0 0 12px rgba(255,255,255,0.08));
}
.page_loading_logo_box__YOXmD {
  position: relative;
  width: 240px; /* wide box to preserve horizontal logo */
  height: 100px; /* avoid stretching tall */
}
.page_loading_text__vxu89 { font-size: 16px; opacity: 0.9; display: inline-flex; align-items: center; gap: 2px; }
.page_loading_dots__I0S6F { display: inline-flex; margin-left: 4px; }
.page_loading_dot__kPRbP { animation: page_loading_blink__ZR5vC 1.4s infinite; }
.page_loading_dot__kPRbP:nth-child(2) { animation-delay: 0.2s; }
.page_loading_dot__kPRbP:nth-child(3) { animation-delay: 0.4s; }
@keyframes page_loading_blink__ZR5vC { 0%, 80%, 100% { opacity: 0.2 } 40% { opacity: 1 } }

.page_loading_bar__1SLHI { width: 220px; height: 6px; border: 1px solid #444; border-radius: 999px; background: #0b0b0b; overflow: hidden; }
.page_loading_bar_fill__RNbBA { display: block; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, transparent 0%, #0074c2 20%, #00a3ff 50%, #0074c2 80%, transparent 100%); background-size: 200% 100%; animation: page_loading_shimmer__wF4AV 1.2s linear infinite; animation-iteration-count: infinite !important; animation-play-state: running !important; will-change: background-position; }
@keyframes page_loading_shimmer__wF4AV { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.page_reconnecting_box__spS3e {
  padding: 16px 20px;
  background: #111;
  border: 1px solid #444;
  border-radius: 8px;
  color: #fff;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.page_reconnecting_spinner__n_KMr {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255,255,255,0.25);
  border-top-color: rgba(255,255,255,0.9);
  border-radius: 50%;
  animation: page_spin__W_8_q 0.9s linear infinite;
}
@keyframes page_spin__W_8_q {
  to { transform: rotate(360deg); }
}

.page_unified_grid__V9A9n {
  width: 100%;
  height: calc(98vh - var(--menubar-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  max-width: calc(98vh - var(--menubar-height));
  max-height: calc(98vh - var(--menubar-height));
  position: relative;
}

.page_dev_tools_bar__Xog7a {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 0;
  position: relative;
}

.page_sidebar_ctn__wJJF9 {
  width: var(--sidebar-width);
  position: relative;
  background-color: var(--black);
  height: calc(100vh - var(--menubar-height));
  overflow-y: scroll;
  overflow-x: hidden;
  animation: page_slidein__6z7SD 1s forwards;
  text-align: center;
}



.page_grid_header__c4rAP {
  width: 100%;
  text-align: center;
  border: 2px solid var(--black);
  background-color: var(--black);
  border-bottom: none;
  display: flex;
  flex-direction: column;
  animation: page_scale-in-center__P2FCM 1s forwards;
  margin-bottom: 0;
}

.page_grid_header__c4rAP h3 {
  font-family: 'Odachi';
  font-size: 26px;
  margin: 0;
  color: #fff;
  font-weight: normal;
  padding: 2px 0 4px 0;
}

.page_grid_status__ctyh_ {
  font-size: 11px;
  padding: 3px 0;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 1px;
}
.page_dev_tools__5sh_g {
  padding: 0;
  position: absolute;
  top: -80px; /* lift above grid area */
}

.page_dev_btn__a_Iy2 {
  margin-top: 6px;
  background: #222;
  color: #fff;
  border: 1px solid #444;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.page_dev_btn__a_Iy2:hover {
  background: #333;
}

.page_dev_tools__5sh_g {
  padding: 8px 0 12px 0;
}

.page_dev_btn__a_Iy2 {
  margin-top: 6px;
  background: #222;
  color: #fff;
  border: 1px solid #444;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
}

.page_dev_btn__a_Iy2:hover {
  background: #333;
}

.page_inner_subgrid_ctn___UuxG {
  width: 100%;
  height: auto;
  max-height: var(--grid-width);
  display: flex;
  justify-content: center;
}

.page_open___QBda {
  background-color: var(--green);
  color: var(--darkgreen);
}

.page_grid__f5Kdy {
  display: grid;
  width: 100%;
  position: relative;
  background-color: var(--black);
  border: 2px solid var(--black);
  box-sizing: border-box; /* include border in width to avoid overflow-induced scrollbars */
  aspect-ratio: 1 / 1;
  overflow: hidden;
  animation: page_scale-in-center__P2FCM 1s forwards;
  border-top: 1px solid var(--black);
}

/* Zoomable grid wrappers */
.page_grid_viewport__utQaE {
  width: 100%;
  height: auto;
  flex: 1 1 auto;
  min-height: 0; /* allow flex child to shrink and enable scrolling */
  position: relative;
  overflow: auto;
  /* Reserve space for scrollbars so clientWidth/Height don't change when they appear */
  scrollbar-gutter: stable both-edges;
  border-top: 1px solid var(--black);
  scroll-behavior: auto;
}

.page_unified_grid_container__P4Kj1 {
  overflow: visible; /* allow toolbar to render outside grid bounds */
}

.page_grid_zoom_content__gbicA {
  width: 100%;
  height: auto;
  /* Width/height are dynamically resized (no transform) for crisp rendering */
  /* Disable transitions to avoid visible oscillation if a measurement jitters by 1px */
  transition: none;
  will-change: auto;
}

.page_zoom_toolbar__6PMdg {
  position: absolute;
  top: -20px;
  right: 5px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 20;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid #333;
  border-radius: 6px;
  padding: 6px 8px;
  -webkit-backdrop-filter: blur(2px);
          backdrop-filter: blur(2px);
}

.page_zoom_btn__zAls7 {
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid #444;
  background: #1e1e1e;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.page_zoom_btn__zAls7:active { transform: scale(0.96); }

.page_zoom_btn__zAls7:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(40%);
}

.page_zoom_input__9qxfs {
  width: 130px;
}

.page_cell__kEKND {
  width: 100%;
  aspect-ratio: 1 / 1;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border-right: 1px solid #000;
  border-bottom: 1px solid #000;
  box-sizing: border-box;
  z-index: 5 !important;
}

/* Centered icon overlay for notable cells; does not affect layout */
.page_cell_icon__mHVE5 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 8; /* above base cell, below hover ring (::before, z-index: 9) */
}

.page_cell_icon__mHVE5 svg {
  width: 90%;
  height: 90%;
}

.page_cell_icon__staking__PWDoq {
  color: #000000;
  z-index: 10;
}

.page_cell_icon__fortification__O0nFJ {
  color: #ffffff;
}

.page_cell_disabled__qI0hy {
  /* opacity: 0.6; */
  background-color: #8c8c8c;
  cursor: not-allowed;
}

/* Explicit visual for permanently/prolongedly protected cells */
.page_cell_protected__Z9BIO {
  /* Distinct textured look so it never resembles dark player colors */
  background-color: #121212 !important;
  background-image:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.06) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.06) 50%,
      rgba(255, 255, 255, 0.06) 75%,
      transparent 75%,
      transparent
    ),
    linear-gradient(45deg,
      rgba(0, 0, 0, 0.35) 25%,
      transparent 25%,
      transparent 50%,
      rgba(0, 0, 0, 0.35) 50%,
      rgba(0, 0, 0, 0.35) 75%,
      transparent 75%,
      transparent
    );
  background-size: 8px 8px;
  background-position: 0 0, 4px 4px;
  cursor: not-allowed !important;
  border: none !important;
}

.page_cell__kEKND:hover {
  filter: brightness(0.7);
}

/* Hover ring similar to ecash-land */
/* .cell:hover::before {
  content: '';
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 100px;
  border: 1px solid #bcbcbc;
  z-index: 99999;
  user-select: none;
  pointer-events: none;
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.35);
}

.cell_disabled:hover {
  filter: grayscale(100%) brightness(0.9) !important;
  box-shadow: inset 0 0 0 2px rgba(255, 68, 68, 0.8);
} */

.page_cell_clicked__48Jd2 {
  animation: page_cell_grow__tLYQZ 0.2s ease-in-out !important;
  transition: none !important;
  z-index: 10 !important;
}

.page_cell_clicked_occupied__MBdBr {
  animation: page_cell_grow_red__naESC 0.3s ease-out !important;
  transition: none !important;
  transform-origin: bottom right;
  z-index: 10 !important;
}

/* Capture animation inspired by ecash-land */
.page_animate_cell__PQJPD {
  animation: page_add_cell__rUj8a 1.1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  transition: all ease-in-out 200ms;
  position: relative;
  z-index: 999999 !important;
}

.page_animate_cell__PQJPD::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.8) 0%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: page_capture_glow__GfTRV 1.1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  pointer-events: none;
  z-index: 999998;
}

@keyframes page_add_cell__rUj8a {
  0% {
    transform: scale(1) rotate(0deg);
  }
  25% {
    transform: scale(1.2) rotate(-90deg);
  }
  50% {
    transform: scale(3) rotate(-180deg);
  }
  75% {
    transform: scale(2) rotate(-270deg);
  }
  100% {
    transform: scale(1) rotate(-360deg);
  }
}

@keyframes page_capture_glow__GfTRV {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(2);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(3);
    opacity: 0;
  }
}



/* Enhanced capture effects with particles */
.page_animate_cell__PQJPD::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  background: 
    radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.8) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.6) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.4) 0%, transparent 50%);
  transform: translate(-50%, -50%) scale(0);
  animation: page_capture_particles__nkrPn 1.1s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
  pointer-events: none;
  z-index: 999997;
}

@keyframes page_capture_particles__nkrPn {
  0% {
    transform: translate(-50%, -50%) scale(0) rotate(0deg);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2) rotate(360deg);
    opacity: 0;
  }
}

/* Reset animation inspired by ecash-land delete */
.page_animate_cell_reset__ezYlk {
  animation: page_delete_cell__DCMTF 0.9s ease-in-out forwards;
  transition: all ease-in-out 200ms;
}

@keyframes page_delete_cell__DCMTF {
  0% {
    transform: scale(1);
    z-index: 999999;
  }
  50% {
    transform: scale(2);
    z-index: 999999;
  }
  100% {
    transform: scale(0.1);
    z-index: 2;
  }
}

/* Recently updated glow that fades out */
.page_recent_glow__dtYZG {
  box-shadow: inset 0 0 0 2px rgba(1, 232, 97, 0.85), 0 0 10px rgba(1, 232, 97, 0.45);
  animation: page_recent_glow_fade__bkzUe 2.2s ease-out forwards;
}

@keyframes page_recent_glow_fade__bkzUe {
  0% { box-shadow: inset 0 0 0 2px rgba(1, 232, 97, 0.85), 0 0 16px rgba(1, 232, 97, 0.55); }
  100% { box-shadow: inset 0 0 0 1px rgba(1, 232, 97, 0.15), 0 0 0 rgba(1, 232, 97, 0); }
}

/* Staking node visuals */
.page_stakingCell__Zu0HM {
  position: relative;
  outline: 1px solid rgba(255, 215, 0, 0.6);
  box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.4), 0 0 8px rgba(255, 215, 0, 0.35);
  animation: page_staking_glow__RLzgQ 2.4s ease-in-out infinite;
}

.page_stakingCell__Zu0HM::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 2px;
  border: 3px solid rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 12px rgba(255, 215, 0, 0.7);
  animation: page_staking_pulse__KbVXR 2.6s ease-in-out infinite;
  pointer-events: none;
  z-index: 8;
}

.page_stakingCell__Zu0HM::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30%;
  height: 30%;
  transform: translate(-50%, -50%) scale(0.7);
  border-radius: 50%;
  border: 2px solid rgba(255, 215, 0, 0.7);
  animation: page_staking_ripple__WAeD6 1.9s ease-out infinite;
  pointer-events: none;
  z-index: 7;
}

@keyframes page_staking_pulse__KbVXR {
  0% {
    transform: scale(1);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.2);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.9;
  }
}

@keyframes page_staking_glow__RLzgQ {
  0% {
    box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.45), 0 0 6px rgba(255, 215, 0, 0.35);
  }
  50% {
    box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.2), 0 0 12px rgba(255, 215, 0, 0.6);
  }
  100% {
    box-shadow: inset 0 0 0 2px rgba(255, 215, 0, 0.45), 0 0 6px rgba(255, 215, 0, 0.35);
  }
}

@keyframes page_staking_ripple__WAeD6 {
  0% {
    transform: translate(-50%, -50%) scale(0.6);
    opacity: 0.9;
  }
  70% {
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 0.2;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.8);
    opacity: 0;
  }
}

/* Cluster owner border glow: only draw on outer border cells */
.page_stakingClusterOwned___8_T4 {
  --cluster-color: #f2c94c;
}

/* Thin overlay elements for per-edge glow */
.page_cluster_border__tW_ym {
  position: absolute;
  pointer-events: none;
  background: none;
  content: '';
  background-color: var(--cluster-color);
  filter: brightness(0.8);
  z-index: 9;
}
.page_cluster_border_top__TW7pe {
  top: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
}
.page_cluster_border_right__YAK1W {
  top: -1px;
  right: -1px;
  bottom: -1px;
  width: 2px;
}
.page_cluster_border_bottom__jda3N {
  bottom: -1px;
  left: -1px;
  right: -1px;
  height: 2px;
}
.page_cluster_border_left__plogg {
  top: -1px;
  left: -1px;
  bottom: -1px;
  width: 2px;
}

@keyframes page_cluster_pulse__Y_SfF {
  0% { opacity: 0.85; filter: saturate(1); }
  50% { opacity: 0.35; filter: saturate(1.2); }
  100% { opacity: 0.85; filter: saturate(1); }
}


@keyframes page_cell_grow_red__naESC {
  0% {
    transform: scale(1);
    background-color: inherit;
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
  }
  20% {
    transform: scale(1.3);
    background-color: #ff4444;
    box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.8);
  }
  40% {
    transform: scale(1.8);
    background-color: #ff0000;
    box-shadow: 0 0 0 4px rgba(255, 68, 68, 0.6);
  }
  60% {
    transform: scale(2.2);
    background-color: #ff4444;
    box-shadow: 0 0 0 6px rgba(255, 68, 68, 0.4);
  }
  80% {
    transform: scale(1.5);
    background-color: #ff0000;
    box-shadow: 0 0 0 8px rgba(255, 68, 68, 0.2);
  }
  100% {
    transform: scale(1);
    background-color: #ff4444;
    box-shadow: 0 0 0 0 rgba(255, 68, 68, 0);
  }
}

@keyframes page_cell_grow__tLYQZ {
  0% {
    transform: scale(2);
  }
  100% {
    transform: scale(1);
  }
}

.page_user_address_ctn__dvKGD {
  padding: 20px;
}

/* Selected cells: show a strong glow ring using the current player's color */
.page_selected_cell__m6XW9 {
  position: relative;
}
.page_selected_cell__m6XW9::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  /* background-color: #ffffff; */
  opacity: 1;
  pointer-events: none;
  z-index: 11;
  border: 1px solid #ffffff;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  /* animation: selected_pulse 1.6s ease-in-out infinite; */
}

/* Additional subtle texture overlay for selected cells owned by another player */
.page_selected_cell__occupied__HKYXF::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 7; /* below icons (8) and cluster borders (9), above base cell */
  background-image:
    repeating-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.14) 0px,
      rgba(255, 255, 255, 0.14) 1px,
      rgba(0, 0, 0, 0.08) 1px,
      rgba(0, 0, 0, 0.08) 2px,
      transparent 2px,
      transparent 8px
    );
}

/* .selected_cell::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 6px;
  pointer-events: none;
  z-index: 10;
  box-shadow:
    0 0 18px var(--sel-color, #0074c2),
    0 0 36px var(--sel-color, #0074c2);
  animation: selected_pulse 1.6s ease-in-out infinite;
} */

@keyframes page_selected_pulse__h88_O {
  0%   { opacity: 1; }
  50%  { opacity: 0; }
  100% { opacity: 1; }
}

.page_user_address_ctn__dvKGD h5 {
  margin: 0;
  font-weight: normal;
  margin-bottom: 1px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10px;
  font-size: 16px;
}

.page_payout_address__BNmJs {
  width: 100%;
  padding: 10px 10px;
  border: 1px solid #fff;
  font-size: 16px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

.page_payout_address_link___kBhI {
  color: #9dd1ff;
  text-decoration: none;
  display: inline-block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
}

.page_payout_address_link___kBhI:hover {
  text-decoration: underline;
}

.page_edit_payout_address__kN_Co {
  cursor: pointer;
  display: flex;
  align-items: center;
  position: relative;
  width: 15px;
  height: 15px;
}

.page_edit_payout_address__kN_Co img {
  object-fit: contain;
}

.page_edit_payout_address__kN_Co:hover img {
  filter: invert(23%) sepia(42%) saturate(4546%) hue-rotate(188deg) brightness(109%) contrast(101%);
}

.page_customization_ctn__gnfa8 {
  padding: 20px;
  border-top: 1px solid #333;
  text-align: left;
}

.page_customization_ctn__gnfa8 h5 {
  margin: 0 0 10px 0;
  font-weight: normal;
  font-size: 16px;
}

.page_customization_preview_row__1sV6a {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 12px;
}

.page_preview_item__AkmNR {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,0.05);
  padding: 6px 8px;
  border-radius: 4px;
}

.page_preview_label__e29ca {
  opacity: 0.7;
  font-size: 12px;
}

.page_color_swatch__38UaN {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #333;
}

.page_icon_preview__FYCjQ {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.page_icon_preview__FYCjQ svg {
  width: 18px;
  height: 18px;
}

.page_preview_value__RMRzg {
  font-family: monospace;
  font-size: 12px;
  color: #9dd1ff;
}

/* Modal styles */
.page_custom_modal_ctn__RpEkg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.page_custom_modal_inner_ctn__kdfZe {
  width: 100%;
  max-width: 900px; /* slightly wider to fit 3 upgrade options comfortably */
  background: var(--black);
  border: 1px solid #9f9f9f;
  border-radius: 4px;
  padding: 20px 20px 16px 20px;
}

.page_custom_modal_header__bOzVT h4 {
  font-family: 'Odachi';
  margin: 0 0 10px 0;
  font-weight: normal;
  font-size: 38px;
}

.page_custom_modal_content__agxte {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.page_custom_section__Ulafb label {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  opacity: 0.9;
}

.page_color_inputs_row__3tdXy {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative; /* allow floating error without layout shift */
}

.page_color_inputs_row__3tdXy input[type="color"] {
  width: 48px;
  height: 40px;
  padding: 0;
  border: 1px solid #333;
  background: #111;
}

.page_hex_input__hz3dP {
  height: 40px;
  padding: 0 10px;
  border: 1px solid #444;
  background: #111;
  color: #fff;
  font-family: monospace;
}

/* Floating input error styles (no layout shift) */
.page_input_with_error__wSGSW {
  position: relative;
  display: inline-block;
}

.page_error_float__ayUiG {
  position: absolute;
  top: 50%;
  left: calc(100% + 8px);
  transform: translateY(-50%);
  font-size: 12px;
  color: #ff7676;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.95;
}

.page_error_float_right__7uhVV {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  font-size: 12px;
  color: #ff7676;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.95;
}

.page_icon_grid__Bw0HS {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 12px;
  gap: 12px;
}

.page_icon_option__cymzm, .page_icon_option_disabled__HNz40 {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px;
  border: 1px solid #333;
  border-radius: 4px;
  background: rgba(255,255,255,0.03);
  color: #fff;
  cursor: pointer;
  position: relative; /* allow badges */
}

.page_icon_option_disabled__HNz40 {
  opacity: 0.4;
  cursor: not-allowed;
}

.page_icon_option__cymzm svg, .page_icon_option_disabled__HNz40 svg {
  width: 36px;
  height: 36px;
}

.page_icon_option_inner__8cX2q {
  display: flex;
  align-items: center;
  justify-content: center;
}

.page_icon_option_label__CKA1H {
  font-weight: 600;
}

.page_icon_option_desc__7F3nX {
  font-size: 12px;
  opacity: 0.85;
  text-align: center;
}

.page_icon_option_cost__qymy5 {
  margin-top: 4px;
  font-size: 12px;
  opacity: 0.9;
}



.page_icon_option__selected__D2XZ0 {
  outline: 2px solid #0074c2;
  box-shadow: 0 0 10px rgba(0, 116, 194, 0.45);
}

/* Highlight for the cell's currently applied upgrade (distinct from selection) */
.page_icon_option__current__7G8rq {
  border-color: #ffd54d;
  box-shadow: 0 0 0 2px rgba(255, 213, 77, 0.35), 0 0 8px rgba(255, 213, 77, 0.25);
}

.page_icon_option_badge__rYRDe {
  position: absolute;
  top: 4px;
  right: 4px;
  background: #ffd54d;
  color: #000;
  font-size: 10px;
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 600;
  letter-spacing: 0.5px;
  pointer-events: none;
}

.page_custom_modal_actions___CXPT {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.page_actions_top__m7sp6 {
  display: grid;
  grid-template-columns: 1fr auto 1fr; /* left spacer/reset · centered paybutton · right close */
  align-items: center;
  min-height: 48px; /* reserve space so dialog height doesn't change when PayButton appears */
}

.page_cancel_btn__abuhX {
  background: transparent;
  border: 1px solid #999;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  justify-self: start; /* prevent grid stretch so it matches Close size */
}

.page_cancel_btn__abuhX:hover {
  background: rgba(255,255,255,0.06);
}

.page_simulate_btn__C9zMj {
  background: #222;
  border: 1px solid #444;
  color: #fff;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-bottom: 6px;
}

.page_simulate_btn__C9zMj:hover { background: #333; }

.page_paybutton_ctn__3UfLJ {
  display: flex;
  justify-content: center;
}

.page_right_align__A1QGw {
  justify-self: end;
}

.page_leaderboard_ctn__ktts6 {
  padding: 20px;
  border-top: 1px solid #333;
  max-height: 440px; /* show ~10 rows before scroll */
  overflow-y: auto;
}

.page_leaderboard_ctn__ktts6 h5 {
  margin: 0;
  font-weight: normal;
  margin-bottom: 15px;
  font-size: 16px;
  text-align: left;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 3;
  background: var(--black);
  padding: 4px 0 8px 0;
  border-bottom: 1px solid #222;
}

.page_leaderboard_list__RnftH {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page_leaderboard_item__ue_LM:hover {
  background-color: #262626;
}

.page_leaderboard_item__ue_LM {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background-color: rgba(255, 255, 255, 0.05);
  border-radius: 4px;
  font-size: 12px;
  position: relative; /* allow absolute centering of address */
}

/* Subtle highlight for current user's leaderboard row */
.page_leaderboard_item__me__1ToTw {
  position: relative;
  background-color: rgba(0, 116, 194, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0, 116, 194, 0.45), 0 0 10px rgba(0, 116, 194, 0.15);
}
.page_leaderboard_item__me__1ToTw::after {
  content: 'you';
  position: absolute;
  right: 8px;
  top: -8px;
  font-size: 10px;
  color: #9dd1ff;
  opacity: 0.85;
}

.page_leaderboard_rank__eEkzo {
  font-weight: bold;
  color: #0074c2;
  min-width: 25px;
}

.page_leaderboard_mark__dqPKY {
  display: flex;
  align-items: center;
  gap: 4px;
}

.page_leaderboard_color__QShvi {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #333;
}

.page_leaderboard_forticon__yKF9I {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  height: 12px;
  color: #fff;
}

.page_leaderboard_forticon__yKF9I svg {
  width: 12px;
  height: 12px;
}

.page_leaderboard_address__yO690 {
  /* Absolutely center address/display name across full row regardless of side column widths */
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: monospace;
  color: #ccc;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  max-width: calc(100% - 200px); /* leave room for rank/mark on left and cells on right */
  pointer-events: none; /* prevent overlap from blocking interactions with row */
}

/* On narrower viewports, reduce the reserved side width allowance */
@media (max-width: 600px) {
  .page_leaderboard_address__yO690 {
    max-width: calc(100% - 150px);
  }
}

.page_leaderboard_cells__LRpfA {
  font-weight: bold;
  color: #fff;
  min-width: 60px;
  text-align: right;
  margin-left: auto; /* push cells column to far right when address is absolute */
}

@media (max-width: 990px) {
  .page_content_ctn__yG0gh {
    flex-direction: column;
    height: unset;
    max-height: unset;
  }

  .page_sidebar_ctn__wJJF9 {
    width: 100%;
    height: auto;
  }

  .page_grid_ctn__i_vEq {
    width: 100%;
    min-height: unset;
    align-items: flex-start;
    margin-bottom: 50px;
    margin-top: 20px;
  }

  .page_unified_grid__V9A9n {
    max-width: min(100vw, 90vh);
    max-height: min(100vw, 90vh);
    height: min(100vw, 90vh);
  }

  .page_cell__kEKND {
    border-radius: 0px;
  }

  .page_grid__f5Kdy {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}

@media (max-width: 600px) {

  .page_grid__f5Kdy {
    width: 100%;
    aspect-ratio: 1 / 1;
  }
}

/* Starting zone styling */
.page_starting_zone_cell__ppapt {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page_starting_zone_cell__ppapt::after {
  content: 'SZ';
  font-size: 7px;
  font-weight: bold;
  color: #000;
}

/* Objective-based border highlighting - shows where player can move next */
.page_starting_zone_cell__outer_border__PAlLs {
  position: relative;
}

.page_starting_zone_cell__outer_border__PAlLs::before {
  content: '';
  position: absolute;
  inset: -2px;
  border: 3px solid #00ff88;
  background-color: rgba(0, 255, 136, 0.3);
  border-radius: 2px;
  pointer-events: none;
  z-index: 10;
  animation: page_starting-zone-pulse__riR9l 2s ease-in-out infinite;
}

@keyframes page_starting-zone-pulse__riR9l {
  0%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;
  }
}