:root {
			--black: #F4F7FB55;
			--neon: #3B82F6;
			--neon-dim: #3B82F6;
			--neon-glow: 0 0 6px #3B82F699, 0 0 14px #3B82F644;
			--neon-glow-soft: 0 0 4px #3B82F633, 0 0 10px #3B82F618;
			--blue-grad: linear-gradient(90deg, #3B82F6, #60A5FA, #3B82F6);
			--card-border: 1px solid #3B82F6;
			--text-gray: #1E3A8A;
			
			/* Themeable */
			--bg-page:        #F4F7FB;
			--bg-card:        #DDE8F8;
			--bg-section:     #FFFFFF;
			--text-primary:   #1E3A8A;
			--box-shadow: #fcfcfc55;
			--text-secondary: #4A5875;
			--text-muted:     #5A6B88;
			--text-label:     #607888;
			--bar-track:      #0d1f2d;
			--text-mid:       var(--text-mid);
		}
		
		html.dark {
			--black: #00000055;
			--bg-page:        #161a1e;
			--bg-card:        #232d3d;
			--bg-section:     #161a1e;
			--text-primary:   #C8DCF4;
			--text-secondary: #92A8CC;
			--text-muted:     #9AAAD0;
			--text-label:     #7080A0;
			--text-gray:      #92A8CC;
			--bar-track:      #080d12;
			--text-mid:       #8899bb;
			--box-shadow: #3B82F655;
		}

		*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

		html { scroll-behavior: smooth; }

		html, body, * {
			scrollbar-width: none;
		}
		html::-webkit-scrollbar,
		body::-webkit-scrollbar,
		*::-webkit-scrollbar {
			display: none;
		}

		body {
			background: var(--bg-page);
			background-image:
				linear-gradient(rgba(59,130,246,0.025) 1px, transparent 1px),
				linear-gradient(90deg, rgba(59,130,246,0.025) 1px, transparent 1px);
			background-size: 40px 40px;
			color: var(--text-gray);
			font-family: 'Exo 2', sans-serif;
			min-height: 100vh;
			overflow-x: hidden;
		}

		/* Scanline overlay — removed for clean theme */
		body::before { display: none; }


		/* ── HEADER ── */
		header {
			position: relative;
			z-index: 10;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 64px 10px 48px;
			border-bottom: 1px solid #3B82F6;
			box-shadow: 0 1px 0 0 #3B82F666, 0 2px 16px 0 #3B82F618;
			background: linear-gradient(180deg, var(--bg-page) 0%, var(--bg-card) 100%);
		}

		.header-badge {
			font-family: 'Exo 2', sans-serif;
			font-size: 11px;
			letter-spacing: 6px;
			color: var(--neon);
			text-transform: uppercase;
			margin-bottom: 22px;
			text-shadow: var(--neon-glow);
			opacity: 0.8;
		}

		.title-mech {
			font-family: 'Orbitron', sans-serif;
			font-size: clamp(2.4rem, 7vw, 5.5rem);
			font-weight: 900;
			color: var(--neon);
			text-transform: uppercase;
			letter-spacing: 0.12em;
			text-shadow: var(--neon-glow);
			line-height: 1;
			text-align: center;

		}

		.title-db {
			font-family: 'Orbitron', sans-serif;
			font-size: clamp(1.8rem, 5vw, 4rem);
			font-weight: 900;
			text-transform: uppercase;
			letter-spacing: 0.18em;
			background: var(--blue-grad);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-align: center;
			margin-top: 6px;
			filter: drop-shadow(0 0 10px #3B82F688);
		}

		/* ── MAIN CONTENT ── */
		main {
			position: relative;
			z-index: 10;
			max-width: 1100px;
			margin: 0 auto;
			padding: 52px 24px 80px;
		}

		/* ── CARD GRID ── */
		.card-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
		}

		/* Last card centered if odd */
		.card:last-child:nth-child(odd) {
			grid-column: 1 / -1;
			max-width: 520px;
			margin: 0 auto;
			width: 100%;
		}

		.card {
			background: linear-gradient(145deg, color-mix(in srgb,var(--bg-card) 85%,#3B82F6 15%) 0%, color-mix(in srgb,var(--bg-card) 93%,#3B82F6 7%) 40%, var(--bg-page) 100%);
			border: 1px solid var(--neon);
			box-shadow: var(--neon-glow-soft), inset 0 0 20px rgba(59,130,246,0.03);
			border-radius: 4px;
			padding: 28px 28px 24px;
			cursor: pointer;
			text-decoration: none;
			display: block;
			position: relative;
			overflow: hidden;
			transition: box-shadow 0.25s, transform 0.2s, border-color 0.25s;
			-webkit-tap-highlight-color: transparent;
		}

		.card::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, transparent 60%);
			opacity: 0;
			transition: opacity 0.3s;
		}

		.card::after {
			content: '';
			position: absolute;
			top: 0;
			left: -100%;
			width: 60%;
			height: 100%;
			background: linear-gradient(90deg, transparent, rgba(59,130,246,0.07), transparent);
			transition: left 0.5s ease;
}
@media (hover: hover)
{
	.card:hover {
		box-shadow: 0 0 6px #3B82F666, 0 0 16px #3B82F633, 0 0 28px #3B82F644, inset 0 0 16px rgba(59,130,246,0.03);
			border-color: #3B82F6;
			transform: translateY(-3px);
		}
		
		.card:hover::before { opacity: 1; }
		.card:hover::after { left: 140%; }    
}
		.card-num {
			font-family: 'Orbitron', sans-serif;
			font-size: 11px;
			letter-spacing: 1px;
			color: #3B82F6aa;
			margin-bottom: 14px;
			display: inline-block;
			border: 1px solid #3B82F633;
			border-radius: 3px;
			padding: 3px 9px;
			background: rgba(59,130,246,0.05);
		}

		.card-title {
			font-family: 'Orbitron', sans-serif;
			font-size: clamp(0.85rem, 2vw, 1.05rem);
			font-weight: 700;
			color: var(--neon);
			text-transform: uppercase;
			letter-spacing: 0.08em;
			text-shadow: 0 0 6px #3B82F655;
			margin-bottom: 8px;
			line-height: 1.3;
		}

		.card-sub {
			font-family: 'Exo 2', sans-serif;
			font-size: 12.5px;
			color: var(--text-muted);
			letter-spacing: 0.5px;
			line-height: 1.5;
		}

		/* Arrow accent */
		.card-arrow {
			position: absolute;
			bottom: 18px;
			right: 22px;
			font-size: 14px;
			color: #3B82F644;
			font-family: 'Orbitron', sans-serif;
			transition: color 0.25s, transform 0.25s;
			-webkit-transition: color 0.25s, transform 0.25s;
			-moz-transition: color 0.25s, transform 0.25s;
			-ms-transition: color 0.25s, transform 0.25s;
			-o-transition: color 0.25s, transform 0.25s;
}
@media (hover: hover) and (pointer: fine)
{

	.card:hover .card-arrow {
		color: var(--neon);
			transform: translateX(4px);
			-webkit-transform: translateX(4px);
			-moz-transform: translateX(4px);
			-ms-transform: translateX(4px);
			-o-transform: translateX(4px);
		}
}

		/* ── FOOTER ── */
		footer {
			position: relative;
			z-index: 10;
			border-top: 1px solid #3B82F633;
			padding: 24px;
			text-align: center;
			font-size: 11px;
			letter-spacing: 3px;
			color: #3B82F644;
			text-transform: uppercase;
			font-family: 'Orbitron', sans-serif;
			line-height: 2;
		}


		/* Responsive */
		@media (max-width: 600px) {
			.card-grid { grid-template-columns: 1fr; }
			.card:last-child:nth-child(odd) { grid-column: auto; max-width: 100%; }
		}
		.footer-link {
			color: #3B82F644;
			text-decoration: none;
			font-size: 11px;
			letter-spacing: 3px;
			font-family: 'Orbitron', sans-serif;
			text-transform: uppercase;
			cursor: pointer;
			transition: color 0.2s, text-shadow 0.2s;
			-webkit-transition: color 0.2s, text-shadow 0.2s;
			-moz-transition: color 0.2s, text-shadow 0.2s;
			-ms-transition: color 0.2s, text-shadow 0.2s;
			-o-transition: color 0.2s, text-shadow 0.2s;
}
@media (hover: hover) {
	
	.footer-link:hover {
		color: var(--neon);
		text-shadow: 0 0 8px #3B82F688;
	}
}

		/* ── LEGAL PAGES ── */
		.legal-page {
			background-color: var(--bg-section);
			background-image:
				linear-gradient(rgba(59,130,246,0.025) 1px, transparent 1px),
				linear-gradient(90deg, rgba(59,130,246,0.025) 1px, transparent 1px);
			background-size: 40px 40px;
			min-height: 100vh;
		}

		.legal-wrap {
			max-width: 780px;
			margin: 0 auto;
			padding: 88px 28px 80px;
		}

		.back-btn {
			position: fixed;
			top: 28px;
			left: 32px;
			z-index: 500;
			background: var(--bg-card);
			border: 1px solid #3B82F655;
			color: #3B82F699;
			font-family: 'Orbitron', sans-serif;
			font-size: 11px;
			letter-spacing: 3px;
			padding: 8px 18px;
			cursor: pointer;
			text-transform: uppercase;
			transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s;
			display: inline-flex;
			align-items: center;
			border-radius: 4px;
			box-shadow: 0 2px 16px rgba(0,0,0,0.3);
			-webkit-tap-highlight-color: transparent;
		}
		@media (hover: hover)
		{

			.back-btn:hover {
				border-color: var(--neon);
			color: var(--neon);
			box-shadow: 0 0 12px #3B82F655;
			background: var(--bg-section);
		}
	}

		.legal-title {
			font-family: 'Orbitron', sans-serif;
			font-size: clamp(1.4rem, 4vw, 2.2rem);
			font-weight: 900;
			color: var(--neon);
			text-transform: uppercase;
			letter-spacing: 0.1em;
			text-shadow: 0 0 5px #3B82F666;
			margin-bottom: 44px;
			padding-bottom: 16px;
			border-bottom: 1px solid #3B82F633;
		}

		.legal-section {
			margin-bottom: 36px;
		}

		.legal-num {
			font-family: 'Orbitron', sans-serif;
			font-size: 13px;
			font-weight: 700;
			color: var(--neon);
			letter-spacing: 0.08em;
			text-transform: uppercase;
			margin-bottom: 12px;
			text-shadow: 0 0 4px #3B82F644;
		}

		.legal-section p {
			font-family: 'Exo 2', sans-serif;
			font-size: 14px;
			color: var(--text-secondary);
			line-height: 1.75;
			margin-bottom: 10px;
		}

		.legal-section ul {
			list-style: none;
			padding-left: 16px;
			margin-bottom: 10px;
		}

		.legal-section ul li {
			font-family: 'Exo 2', sans-serif;
			font-size: 14px;
			color: var(--text-secondary);
			line-height: 1.75;
			padding-left: 16px;
			position: relative;
		}

		.legal-section ul li::before {
			content: '›';
			position: absolute;
			left: 0;
			color: #3B82F666;
		}
		.bots-doc {
			max-width: 600px;
			border: 1px solid #3B82F633;
			border-radius: 4px;
			padding: 28px 32px;
			background: var(--bg-card);
		}

		.bots-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 6px 12px;
		}

		.bots-grid span {
			font-family: 'Exo 2', sans-serif;
			font-size: 12px;
			color: var(--text-secondary);
			letter-spacing: 0.3px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		@media (max-width: 600px) {
			.bots-grid { grid-template-columns: repeat(2, 1fr); }
		}
		/* ── COMMUNITY SECTION ── */
		.community-section {
			position: relative;
			z-index: 10;
			max-width: 1100px;
			margin: 0 auto;
			padding: 0 24px 48px;
		}

		.community-divider {
			height: 1px;
			background: linear-gradient(90deg, transparent, #3B82F633, transparent);
			margin-bottom: 32px;
		}

		.community-inner {
			display: flex;
			flex-wrap: wrap;
			gap: 32px 48px;
		}

		.comm-block {
			display: flex;
			flex-direction: column;
			gap: 10px;
			min-width: 300px;
		}

		.comm-label {
			font-family: 'Orbitron', sans-serif;
			font-size: 9px;
			letter-spacing: 4px;
			text-transform: uppercase;
			color: #3B82F655;
			margin-bottom: 2px;
		}

		.comm-row {
			display: flex;
			align-items: center;
			gap: 8px;
		}

		.discord-icon {
			width: 16px;
			height: 16px;
			color: #3B82F6;
			flex-shrink: 0;
			opacity: 0.85;
		}

		.comm-name {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			color: var(--text-muted);
			letter-spacing: 0.3px;
			flex: 1;
		}

		.comm-actions {
			display: flex;
			gap: 4px;
		}

		.comm-btn {
			background: none;
			border: 1px solid #3B82F625;
			color: #3B82F655;
			width: 26px;
			height: 26px;
			border-radius: 3px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
			padding: 0;
		}

		@media (hover: hover)
		{
			.comm-btn:hover {
				border-color: var(--neon);
				color: var(--neon);
				box-shadow: 0 0 6px #3B82F644;
			}
		}

		.comm-btn.copied {
			border-color: var(--neon);
			color: var(--neon);
		}
		.comm-form-icon {
			color: #3B82F666;
			flex-shrink: 0;
		}

		.awards-img-wrap {
			max-width: 700px;
			overflow-x: auto;
			-webkit-overflow-scrolling: touch;
			border-radius: 6px;
			scrollbar-width: thin;
			scrollbar-color: #3B82F655 transparent;
		}
		.awards-img-wrap::-webkit-scrollbar { height: 5px; }
		.awards-img-wrap::-webkit-scrollbar-track { background: transparent; }
		.awards-img-wrap::-webkit-scrollbar-thumb { background: #3B82F655; border-radius: 3px; }
		.awards-img-wrap::-webkit-scrollbar-thumb:hover { background: #3B82F699; }

		.awards-img {
			width: 100%;
			height: auto;
			border-radius: 6px;
			border: 1px solid #3B82F644;
			display: block;
		}

		@media (max-width: 600px) {
			.awards-img {
				width: 200%;
				max-width: none;
			}
		}
		/* ── CALENDAR ── */
		.cal-wrap { max-width: 900px; }

		.cal-desc {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			color: var(--text-label);
			letter-spacing: 0.5px;
			margin-bottom: 32px;
		}

		.cal-lists {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 32px;
		}

		.cal-col-header {
			font-family: 'Orbitron', sans-serif;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 4px;
			text-transform: uppercase;
			color: var(--neon);
			text-shadow: 0 0 6px #3B82F644;
			margin-bottom: 14px;
		}

		.cal-input-row {
			display: flex;
			gap: 8px;
			margin-bottom: 16px;
		}

		.cal-input {
			flex: 1;
			background: var(--bg-card);
			border: 1px solid #3B82F633;
			color: var(--text-mid);
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			padding: 7px 12px;
			border-radius: 3px;
			outline: none;
			transition: border-color 0.2s;
		}

		.cal-input:focus {
			border-color: #3B82F677;
		}

		.cal-input::placeholder { color: #405568; }

		.cal-add-btn {
			background: none;
			border: 1px solid #3B82F644;
			color: #3B82F699;
			font-size: 18px;
			line-height: 1;
			width: 34px;
			height: 34px;
			border-radius: 3px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
			flex-shrink: 0;
		}

		.cal-add-btn:hover {
			border-color: var(--neon);
			color: var(--neon);
			box-shadow: 0 0 8px #3B82F644;
		}

		.cal-list {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 6px;
		}

		.cal-item {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 8px 12px;
			background: var(--bg-card);
			border: 1px solid #3B82F644;
			border-radius: 3px;
		}

		.cal-item-num {
			font-family: 'Orbitron', sans-serif;
			font-size: 9px;
			color: #3B82F644;
			letter-spacing: 1px;
			min-width: 20px;
		}

		.cal-item-name {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			color: var(--text-muted);
			flex: 1;
		}

		.cal-del-btn {
			background: none;
			border: none;
			color: #ff444422;
			font-size: 14px;
			cursor: pointer;
			padding: 0 2px;
			line-height: 1;
			transition: color 0.2s;
			flex-shrink: 0;
		}

		.cal-del-btn:hover { color: #ff5555cc; }

		@media (max-width: 600px) {
			.cal-lists { grid-template-columns: 1fr; }
		}
		/* ── ROLE CARDS ── */
		.role-grid {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 20px;
			max-width: 600px;
			align-items: start;
		}

		.role-card {
			background: var(--bg-card);
			border: 1px solid #3B82F633;
			border-radius: 4px;
			padding: 32px 24px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 16px;
			cursor: default;
			transition: border-color 0.25s, box-shadow 0.25s;
			-webkit-tap-highlight-color: transparent;
		}

		.role-card:hover {
			border-color: var(--neon);
			box-shadow: 0 0 6px #3B82F666, 0 0 16px #3B82F633, 0 0 28px #3B82F644, inset 0 0 16px rgba(59,130,246,0.03);
			transform: translateY(-3px);
		}

		.role-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			filter: drop-shadow(0 2px 6px rgba(59,130,246,0.18));
			transition: filter 0.25s;
		}
		.role-card:hover .role-icon {
			filter: drop-shadow(0 3px 14px rgba(59,130,246,0.5));
		}

		/* Light mode — recolor weapon/mech hex icons to match light palette.
			 PNGs are dark-navy hex w/ white outline+glyph. Invert + hue-rotate flips
			 the value channel while preserving the blue hue → light hex w/ navy glyph. */
		html:not(.dark) .role-icon img {
			filter: invert(1) hue-rotate(180deg);
		}
		html:not(.dark) .role-card:hover .role-icon img {
			filter: invert(1) hue-rotate(180deg) drop-shadow(0 2px 8px rgba(59,130,246,0.35));
		}

		.role-name {
			font-family: 'Orbitron', sans-serif;
			font-size: 12px;
			font-weight: 700;
			letter-spacing: 3px;
			text-transform: uppercase;
			color: var(--text-secondary);
		}

		@media (max-width: 600px) {
			.role-grid { grid-template-columns: 1fr; }
		}
		/* ── ROLE CARD UPDATES ── */
		.mech-wrap { max-width: 1000px; }

		.role-card-top {
			display: flex;
			align-items: center;
			gap: 12px;
			width: 100%;
			margin-bottom: 4px;
		}

		.role-card { flex-direction: column; align-items: flex-start; padding: 20px 20px 16px; }

		/* Individual mech card */
		.mech-entry {
			background: var(--bg-card);
			border: 1px solid #3B82F644;
			border-radius: 4px;
			overflow: hidden;
		}

		.mech-entry-header {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 10px 14px;
			cursor: pointer;
			user-select: none;
		}

		.mech-entry-header:hover { background: var(--bg-card); }

		.mech-entry-img {
			width: 44px;
			height: 44px;
			object-fit: cover;
			border-radius: 3px;
			border: 1px solid #3B82F644;
			flex-shrink: 0;
		}

		.mech-entry-img-placeholder {
			width: 44px;
			height: 44px;
			border-radius: 3px;
			border: 1px solid #3B82F644;
			background: var(--bg-card);
			display: flex;
			align-items: center;
			justify-content: center;
			flex-shrink: 0;
			color: #3B82F633;
			font-size: 18px;
		}

		.mech-entry-title { flex: 1; }
		.mech-entry-name {
			font-family: 'Orbitron', sans-serif;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 2px;
			color: var(--text-mid);
			text-transform: uppercase;
		}
		.mech-entry-meta {
			font-family: 'Exo 2', sans-serif;
			font-size: 11px;
			color: var(--text-label);
			margin-top: 2px;
		}

		.mech-entry-tier {
			font-family: 'Orbitron', sans-serif;
			font-size: 13px;
			font-weight: 900;
			padding: 3px 9px;
			border-radius: 2px;
			border: 1px solid;
		}
		.tier-S { color: #e74c3c; border-color: #e74c3c66; }
		.tier-A { color: #e67e22; border-color: #e67e2266; }
		.tier-B { color: #f1c40f; border-color: #f1c40f66; }
		.tier-C { color: #2ecc71; border-color: #2ecc7166; }
		.tier-D { color: #3498db; border-color: #3498db66; }

		.tier-info-btn {
			width: 22px; height: 22px; border-radius: 50%;
			border: 1.5px solid #666; color: #999;
			background: none; cursor: pointer;
			font-size: 13px; font-weight: 700; font-family: serif;
			display: inline-flex; align-items: center; justify-content: center;
			flex-shrink: 0;
			transition: border-color 0.2s, color 0.2s;
		}
		.tier-info-btn:hover { border-color: #bbb; color: #fff; }

		.tier-info-popup {
			display: none;
			position: fixed;
			z-index: 2000;
			background: var(--bg-section);
			border: 1px solid #c5b8e8;
			border-radius: 8px;
			padding: 16px 20px 14px;
			min-width: 290px;
			margin-right: 10px;
			box-shadow: 0 8px 32px rgba(59,130,246,0.1);
			font-family: 'Exo 2', sans-serif;
			overscroll-behavior: contain;
		}
		.tier-info-popup.active { display: block; }
		.tier-info-row { margin: 5px 0; font-size: 13.5px; color: var(--text-primary); line-height: 1.5; }
		.tier-info-row strong { font-weight: 700; }
		.tier-info-note {
			margin-top: 11px; padding-top: 11px;
			border-top: 1px solid #2e3a50;
			font-size: 13px; color: var(--text-mid); line-height: 1.5;
		}

		.mech-entry-chevron {
			color: #3B82F644;
			font-size: 11px;
			transition: transform 0.2s;
		}
		.mech-entry.open .mech-entry-chevron { transform: rotate(90deg); }

		.mech-entry-body {
			display: none;
			padding: 0 14px 14px;
			border-top: 1px solid #3B82F611;
		}
		.mech-entry.open .mech-entry-body { display: block; }

		.mech-stat-grid {
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			gap: 10px 16px;
			margin-top: 12px;
		}
		.mech-stat-label {
			font-family: 'Orbitron', sans-serif;
			font-size: 8px;
			letter-spacing: 2px;
			color: #3B82F655;
			text-transform: uppercase;
			margin-bottom: 3px;
		}
		.mech-stat-value {
			font-family: 'Exo 2', sans-serif;
			font-size: 12px;
			color: var(--text-muted);
		}

		.mech-full-width {
			grid-column: 1 / -1;
		}

		.mech-del-btn {
			margin-top: 12px;
			background: none;
			border: 1px solid #ff444422;
			color: #ff444455;
			font-family: 'Orbitron', sans-serif;
			font-size: 8px;
			letter-spacing: 2px;
			text-transform: uppercase;
			padding: 5px 10px;
			border-radius: 3px;
			cursor: pointer;
			transition: border-color 0.2s, color 0.2s;
		}
		.mech-del-btn:hover { border-color: #ff5555; color: #ff5555; }

		/* ── MODAL ── */
		.modal-overlay {
			position: fixed;
			inset: 0;
			background: rgba(59,130,246,0.1);
			z-index: 200;
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20px;
		}

		.modal-close {
			background: none;
			border: none;
			color: #3B82F666;
			font-size: 16px;
			cursor: pointer;
			padding: 0;
			transition: color 0.2s;
		}
		.modal-close:hover { color: var(--neon); }

		.role-card-nav {
			cursor: pointer;
		}
		.role-card-nav:hover {
			border-color: var(--neon);
			box-shadow: 0 0 6px #3B82F666, 0 0 16px #3B82F633, 0 0 28px #3B82F644, inset 0 0 16px rgba(59,130,246,0.03);
			transform: translateY(-3px);
		}
		.role-card-arrow {
			margin-left: auto;
			color: #3B82F644;
			font-size: 13px;
			transition: color 0.2s, transform 0.2s;
		}
		.role-card-nav:hover .role-card-arrow {
			color: var(--neon);
			transform: translateX(3px);
		}

		.mech-role-header {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			margin-bottom: 28px;
			gap: 14px;
		}

		.sort-controls {
			display: flex;
			align-items: stretch;
			gap: 6px;
			align-self: center;
		}

		.sort-label {
			font-family: 'Exo 2', sans-serif;
			font-size: 11px;
			color: var(--text-muted);
			letter-spacing: 0.5px;
			margin-right: 2px;
			display: flex;
			align-items: center;
		}

		/* custom sort dropdown */
		.sort-dd { position: relative; display: inline-block; }
		.sort-dd-btn {
			position: relative;
			background: var(--bg-card);
			border: 1px solid #c5b8e8;
			color: var(--text-primary);
			font-family: 'Orbitron', sans-serif;
			font-size: 9px;
			letter-spacing: 2px;
			text-transform: uppercase;
			padding: 7px 28px 7px 10px;
			border-radius: 3px;
			cursor: pointer;
			user-select: none;
			min-width: 80px;
			transition: border-color 0.2s;
		}
		.sort-dd-btn::after {
			content: '';
			position: absolute;
			right: 10px; top: 50%;
			transform: translateY(-50%);
			border-left: 4px solid transparent;
			border-right: 4px solid transparent;
			border-top: 5px solid #c5b8e8;
		}
		.sort-dd.open .sort-dd-btn { border-color: var(--neon); }
		.sort-dd-list {
			display: none;
			position: absolute;
			top: calc(100% + 4px);
			left: 0;
			background: var(--bg-card);
			border: 1px solid #c5b8e8;
			border-radius: 3px;
			z-index: 9999;
			min-width: 100%;
			overflow: hidden;
		}
		.sort-dd.open .sort-dd-list { display: block; }
		.sort-dd-option {
			font-family: 'Orbitron', sans-serif;
			font-size: 9px;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: var(--text-primary);
			padding: 8px 14px;
			cursor: pointer;
			transition: background 0.15s;
			white-space: nowrap;
		}
		.sort-dd-option:hover { background: rgba(197,184,232,0.12); }
		.sort-dd-option.active { color: var(--neon); }

		.sort-dir-btn {
			background: none;
			border: 1px solid #c5b8e8;
			color: #3B82F6;
			font-size: 14px;
			width: 32px;
			border-radius: 3px;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: border-color 0.2s, background 0.2s;
			line-height: 1;
		}
		.sort-dir-btn:hover {
			border-color: var(--neon);
			background: var(--bg-card);
		}

		/* ── INFLUENCE PAGE ── */
		.inf-doc {
			max-width: 640px;
			border: 1px solid #3B82F633;
			border-radius: 4px;
			padding: 36px 40px 40px;
			background: var(--bg-card);
		}

		.inf-title {
			font-family: 'Orbitron', sans-serif;
			font-size: clamp(1.1rem, 3vw, 1.6rem);
			font-weight: 900;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--neon);
			text-shadow: 0 0 8px #3B82F655;
			text-align: center;
			margin-bottom: 28px;
			padding-bottom: 18px;
			border-bottom: 1px solid #3B82F644;
		}

		.inf-body {
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.inf-body p {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			color: var(--text-muted);
			line-height: 1.75;
		}

		.inf-section-head {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			color: #6080A0;
			font-style: italic;
		}

		.inf-formula-block {
			background: var(--bg-card);
			border: 1px solid #3B82F644;
			border-radius: 3px;
			padding: 16px 20px;
			margin: 4px 0;
		}

		.inf-formula-label {
			font-family: 'Orbitron', sans-serif;
			font-size: 8px;
			letter-spacing: 3px;
			text-transform: uppercase;
			color: #3B82F655;
			margin-bottom: 10px;
		}

		.inf-formula {
			font-family: 'Exo 2', sans-serif;
			font-size: 15px;
			color: var(--text-mid);
			letter-spacing: 0.5px;
			margin-bottom: 14px;
		}

		.inf-formula sub {
			font-size: 10px;
			color: var(--text-secondary);
		}

		.inf-list {
			list-style: none;
			padding: 0;
			margin: 0;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}

		.inf-list li {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			color: #6888A0;
			line-height: 1.65;
			padding-left: 16px;
			position: relative;
		}

		.inf-list li::before {
			content: '›';
			position: absolute;
			left: 0;
			color: #3B82F655;
		}

		.inf-var {
			font-family: 'Exo 2', sans-serif;
			font-weight: 600;
			color: var(--text-mid);
			letter-spacing: 0.3px;
		}

		.inf-muted {
			color: var(--text-label);
			font-size: 12px;
		}

		.inf-body em {
			font-style: italic;
			color: var(--text-secondary);
		}
		/* ── INCOME TABLE ── */
		.income-table-wrap {
			max-width: 640px;
			border: 1px solid #3B82F633;
			border-radius: 4px;
			overflow-x: auto;
			overflow-y: hidden;
			background: var(--bg-card);
			-webkit-overflow-scrolling: touch;
		}

		.income-table {
			width: 100%;
			border-collapse: collapse;
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
		}

		.income-table thead tr {
			background: var(--bg-card);
			border-bottom: 1px solid #3B82F633;
		}

		.income-table th {
			font-family: 'Orbitron', sans-serif;
			font-size: 9px;
			letter-spacing: 3px;
			text-transform: uppercase;
			color: #3B82F688;
			padding: 12px 18px;
			text-align: left;
			font-weight: 700;
		}

		.income-table th:not(:first-child) {
			text-align: right;
		}

		.income-table tbody tr {
			border-bottom: 1px solid #3B82F611;
			transition: background 0.15s;
		}

		.income-table tbody tr:hover {
			background: var(--bg-card);
		}

		.income-table td {
			padding: 10px 18px;
			color: var(--text-secondary);
		}

		.income-table td:not(:first-child) {
			text-align: right;
			font-variant-numeric: tabular-nums;
		}

		.income-total td {
			font-weight: 700;
			color: var(--text-mid) !important;
			border-top: 1px solid #3B82F633;
			background: var(--bg-card);
		}

		.income-total td:first-child {
			font-family: 'Orbitron', sans-serif;
			font-size: 10px;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: #3B82F699 !important;
		}

		.income-note {
			font-size: 11px;
			color: #555;
		}

		.income-disclaimer {
			margin-top: 14px;
			font-family: 'Exo 2', sans-serif;
			font-size: 14px;
			color: #c8b84a;
			letter-spacing: 0.3px;
			max-width: 640px;
		}
		/* ── FORTUNE VAULT ── */
		.fortune-entry {
			max-width: 700px;
			border: 1px solid #3B82F633;
			border-radius: 4px;
			background: var(--bg-card);
			padding: 28px 32px 24px;
			margin-bottom: 20px;
			display: flex;
			flex-direction: column;
			gap: 10px;
		}

		.fortune-entry-title {
			font-family: 'Orbitron', sans-serif;
			font-size: 12px;
			font-weight: 700;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			color: var(--text-mid);
			text-shadow: 0 0 4px #3B82F633;
		}

		.fortune-entry-sub {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			color: #666;
			line-height: 1.6;
		}

		.fortune-img {
			width: 100%;
			height: auto;
			border-radius: 4px;
			border: 1px solid #3B82F611;
			display: block;
			margin-top: 6px;
		}

		.fortune-flashbang {
			font-family: 'Exo 2', sans-serif;
			font-size: 11px;
			color: #3a3a3a;
			font-style: italic;
			letter-spacing: 0.3px;
		}
		/* ── MECH CARDS (compact) ── */
		.mech-cards-list {
			width: 100%;
			display: grid;
			grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
			gap: 16px;
			margin-top: 14px;
		}

		.mc {
			background: var(--bg-card);
			border: 1px solid #3B82F644;
			border-radius: 5px;
			padding: 18px;
			cursor: pointer;
			transition: border-color 0.2s, box-shadow 0.3s;
			display: flex;
			flex-direction: column;
			gap: 12px;
			position: relative;
			overflow: hidden;
			min-height: 230px;
			-webkit-tap-highlight-color: transparent;
		}

		.mc:hover { border-color: var(--rc, #888); }

		/* Faded background image */
		.mc-bg {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
			opacity: 0.12;
			filter: blur(1px);
			pointer-events: none;
			z-index: 0;
		}

		.mc > *:not(.mc-bg) { position: relative; z-index: 1; }

		.mc-top {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
		}

		.mc-info { flex: 1; min-width: 0; }

		.mc-name {
			font-family: 'Orbitron', sans-serif;
			font-size: 11px; font-weight: 700;
			letter-spacing: 1.5px; text-transform: uppercase;
			/* color set inline per card via rarity */
		}

		.mc-tier-label {
			font-family: 'Orbitron', sans-serif;
			font-size: 10px; font-weight: 700;
			letter-spacing: 2px; text-transform: uppercase;
			padding: 3px 7px;
			margin-right: 8px;
			border: 1px solid;
			border-radius: 2px;
			flex-shrink: 0;
			align-self: flex-start;
		}
		/* mc-tier-label inherits color/border from .tier-S/A/B/C/D */

		.mc-stats {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 8px 12px;
		}

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

		.mc-stat-l {
			font-family: 'Orbitron', sans-serif;
			font-size: 7px; letter-spacing: 1.5px;
			text-transform: uppercase; color: #3B82F699;
		}

		.mc-stat-v {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px; color: var(--text-muted);
		}

		.mc-ability-row {
			display: flex; flex-direction: column; gap: 3px;
			padding-top: 8px;
			border-top: 1px solid #3B82F611;
		}

		.mc-ability-label {
			font-family: 'Orbitron', sans-serif;
			font-size: 7px; letter-spacing: 1.5px;
			text-transform: uppercase; color: #3B82F644;
		}

		.mc-ability-val {
			font-family: 'Exo 2', sans-serif;
			font-size: 12px; color: #777;
			line-height: 1.5;
		}

		.md-box {
			background: var(--bg-card);
			border: 1px solid #3B82F666;
			box-shadow: 0 0 50px #00000099;
			border-radius: 6px;
			width: 65%;
			max-width: 700px;
			max-height: 88vh;
			overflow-y: auto;
			padding: 28px 32px 32px;
			position: relative;
			overflow: hidden;
			box-sizing: border-box;
			overscroll-behavior: contain;
		}
		@media (max-width: 768px) {
	.md-box {
		width: 100%;
		margin-top:100px
	}
}

		/* Scrollable inner so bg stays fixed to box */
		#md-content {
			position: relative;
			z-index: 1;
			overflow-y: auto;
			max-height: calc(88vh - 56px);
		}

		.md-bg {
			position: absolute;
			inset: 0;
			background-size: cover;
			background-position: center;
			opacity: 0.1;
			filter: blur(2px);
			pointer-events: none;
			z-index: 0;
		}

		.md-close {
			position: absolute;
			top: 16px; right: 18px;
			z-index: 2;
		}

		.md-header {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			gap: 16px;
			margin-bottom: 22px;
			padding-bottom: 18px;
			border-bottom: 1px solid #3B82F644;
		}

		@media (max-width: 768px) {
		.md-header {
			flex-wrap: wrap;
		}
	}

		.md-title-block { flex: 1; }

		.md-name {
			font-family: 'Orbitron', sans-serif;
			font-size: 18px; font-weight: 900;
			letter-spacing: 0.1em; text-transform: uppercase;
			color: #d0d0d0;
		}

		.md-rarity {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px; margin-top: 4px;
		}

		.md-tier { font-size: 13px; padding: 4px 10px; align-self: flex-start; }

		.md-ability-stats-button
		{
			background: var(--bg-card);
			border: 1px solid #ffffff;
			color: #ffffff;
			font-family: 'Orbitron', sans-serif;
			font-size: 11.5px;
			letter-spacing: 2px;
			padding: 4px 12px;
			font-weight: 550;
			cursor: pointer;
			text-transform: uppercase;
			transition: border-color 0.2s, color 0.2s, box-shadow 0.2s, background 0.2s;
			display: inline-flex;
			align-items: center;
			box-shadow: 0 2px 16px var(--black);
		}

		.md-ability-stats-button:hover
		{
			border-color: var(--neon);
			color: var(--neon);
			box-shadow: 0 0 12px var(--box-shadow);
			background: var(--bg-section);
		}

		.md-stat-grid {
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			gap: 12px 16px;
			margin-bottom: 20px;
		}

		.md-stat { display: flex; flex-direction: column; gap: 3px; }

		.md-stat-l {
			font-family: 'Orbitron', sans-serif;
			font-size: 8px; letter-spacing: 2px;
			text-transform: uppercase; color: #3B82F6bb;
		}

		.md-stat-v {
			font-family: 'Exo 2', sans-serif;
			font-size: 14px; color: var(--text-secondary);
		}

		.md-section {
			margin-bottom: 16px;
		}

		.md-sec-label {
			font-family: 'Orbitron', sans-serif;
			font-size: 8px; letter-spacing: 2px;
			text-transform: uppercase; color: #3B82F6bb;
			margin-bottom: 5px;
		}

		.md-sec-val {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px; color: var(--text-secondary);
			line-height: 1.65;
		}

		.md-pros-cons {
			display: grid;
			grid-template-columns: 1fr 1fr;
			gap: 16px;
			margin-bottom: 8px;
			padding-top: 16px;
			border-top: 1px solid #3B82F611;
		}

		.md-pc-col { display: flex; flex-direction: column; gap: 6px; }

		.md-pc-label {
			font-family: 'Orbitron', sans-serif;
			font-size: 8px; letter-spacing: 2px; text-transform: uppercase;
		}

		.pros-label { color: #4ccc8866; }
		.cons-label { color: #cc444466; }

		.md-pc-val {
			font-family: 'Exo 2', sans-serif;
			font-size: 13px; color: var(--text-secondary); line-height: 1.65;
		}
		/* ── TIPS PAGES ── */
		.tips-wrap { max-width: 820px; }

		.tips-stages {
			display: flex;
			flex-direction: column;
			gap: 32px;
			max-width: 560px;
		}

		.tips-stage-label {
			font-family: 'Orbitron', sans-serif;
			font-size: 13px;
			font-weight: 700;
			letter-spacing: 4px;
			text-transform: uppercase;
			color: #3B82F677;
			margin-bottom: 12px;
			text-shadow: 0 0 6px #3B82F633;
		}

		.tips-card {
			background: var(--bg-card);
			border: 1px solid #3B82F633;
			border-radius: 6px;
			padding: 22px 26px 24px;
			max-width: 560px;
			display: flex;
			flex-direction: column;
			gap: 14px;
		}

		.tips-card-title {
			font-family: 'Orbitron', sans-serif;
			font-size: 11px;
			font-weight: 700;
			letter-spacing: 2px;
			text-transform: uppercase;
			color: var(--text-mid);
			padding-bottom: 10px;
			border-bottom: 1px solid #3B82F644;
		}

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

		.tip-item {
			background: var(--bg-card);
			border: 1px solid #3B82F644;
			border-radius: 6px;
			padding: 10px 14px;
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			color: var(--text-muted);
			line-height: 1.55;
		}

		.tip-item-sub {
			background: var(--bg-card);
			border: 1px solid #3B82F644;
			border-radius: 6px;
			padding: 10px 30px;
			font-family: 'Exo 2', sans-serif;
			font-size: 13px;
			color: var(--text-muted);
			line-height: 1.55;
			position: relative;
			-webkit-border-radius: 6px;
			-moz-border-radius: 6px;
			-ms-border-radius: 6px;
			-o-border-radius: 6px;
		}

		.tip-item-sub::before
		{
			content: "\2022   ";
			font-weight: 900;
			font-size: 20px;
			position: absolute;
			left: 12px;
			top: 8px;
			line-height: 1;
		}

		.tips-card-empty {
			border-style: dashed;
			border-color: #3B82F644;
		}

		.tips-empty {
			font-family: 'Exo 2', sans-serif;
			font-size: 12px;
			color: #333;
			font-style: italic;
			letter-spacing: 0.3px;
		}

		.wc-bars { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
		.wc-bar-row { display: flex; align-items: center; gap: 6px; }
		.wc-bar-lbl { font-family: 'Exo 2', sans-serif; font-size: 10px; color: var(--text-label); width: 68px; flex-shrink: 0; }
		.wc-bar-track { flex: 1; height: 5px; background: var(--bar-track); border-radius: 3px; overflow: hidden; }
		.wc-bar-fill { height: 100%; border-radius: 3px; transition: width 0.3s ease; }
		.wc-bar-num { font-family: 'Exo 2', sans-serif; font-size: 10px; color: var(--text-label); width: 26px; text-align: right; flex-shrink: 0; }

		.wc-dpe-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--bar-track); }
		.wc-dpe-lbl { font-family: 'Exo 2', sans-serif; font-size: 10px; color: var(--text-label); text-transform: uppercase; letter-spacing: 0.05em; }
		.wc-dpe-val { font-family: 'Exo 2', sans-serif; font-size: 13px; font-weight: 700; color: #3B82F6; letter-spacing: 0.03em; }

		/* ── DARK MODE OVERRIDES ─────────────────────────────────────── */
		html.dark body {
			background-image:
				linear-gradient(rgba(59,130,246,0.04) 1px, transparent 1px),
				linear-gradient(90deg, rgba(59,130,246,0.04) 1px, transparent 1px);
		}
		html.dark .cmp-table tbody tr:nth-child(even) td { background: rgba(255,255,255,0.02); }
		html.dark .mc { border-color: #2a3548; }
		html.dark input, html.dark select, html.dark textarea {
			background: var(--bg-card) !important;
			color: var(--text-primary) !important;
			border-color: #2a3548 !important;
		}
		html.dark .modal-overlay { background: rgba(0,0,0,0.75); }
		html.dark .modal-box { background: #1a2030; border-color: #2a3548; }

		/* ── BREADCRUMB ── */
		/* ── PAGE FADE ── */
		@keyframes pageFadeIn { from { opacity: 0; } to { opacity: 1; } }

		/* ── FILTER INPUT (mech / weapon pages) ── */
		.filter-input {
			background: var(--bg-card);
			border: 1px solid #c5b8e8;
			color: var(--text-primary);
			font-family: 'Exo 2', sans-serif;
			font-size: 12px;
			padding: 6px 10px;
			border-radius: 3px;
			outline: none;
			width: 120px;
			transition: border-color 0.2s, box-shadow 0.2s;
			letter-spacing: 0.3px;
		}
		.filter-input:focus { border-color: var(--neon); box-shadow: 0 0 6px #3B82F633; }
		.filter-input::placeholder { color: var(--text-label); opacity: 0.7; }

		/* ── PILOT TOOLTIP (calendar click) ── */
		.pilot-popup {
			display: none;
			position: fixed;
			z-index: 2000;
			background: var(--bg-section);
			border: 1px solid #f0a030aa;
			border-radius: 6px;
			padding: 12px 16px 10px;
			min-width: 160px;
			box-shadow: 0 6px 24px rgba(240,160,48,0.15);
			font-family: 'Exo 2', sans-serif;
			pointer-events: none;
		}
		.pilot-popup.active { display: block; }
		.pilot-popup-name  { font-family: 'Orbitron', sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #f0a030; margin-bottom: 6px; }
		.pilot-popup-row   { font-size: 12px; color: var(--text-secondary); line-height: 1.7; }
		.pilot-popup-label { color: var(--text-label); font-size: 10px; letter-spacing: 1px; text-transform: uppercase; margin-right: 4px; }


		/* ── CARD ICONS ── */
		.card-icon {
			position: absolute;
			top: 18px;
			right: 18px;
			opacity: 0.28;
			transition: opacity 0.25s;
			color: var(--neon);
			pointer-events: none;
		}
@media (hover: hover)
{
	.card:hover .card-icon { opacity: 0.65; }
}

		/* ── 3-COLUMN GRID ON WIDE SCREENS ── */
		@media (min-width: 900px) {
			.card-grid { grid-template-columns: repeat(3, 1fr); }
			.card:last-child:nth-child(odd) { grid-column: auto; max-width: 100%; margin: 0; }
		}

		/* ── MECH DETAIL STAT BARS ── */
		.md-bar-grid { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
		.md-bar-row { display: grid; grid-template-columns: 64px 1fr 48px; align-items: center; gap: 8px; }
		.md-bar-lbl { font-family: 'Orbitron', sans-serif; font-size: 8px; letter-spacing: 2px; color: #306bc9; text-transform: uppercase; }
		.md-bar-track { height: 5px; background: var(--bar-track); border-radius: 3px; overflow: hidden; }
		.md-bar-fill { height: 100%; border-radius: 3px; background: var(--neon); transition: width 0.4s ease; }
		.md-bar-val { font-family: 'Exo 2', sans-serif; font-size: 11px; color: var(--text-muted); text-align: right; }

		/* ── MOBILE VIEW ── */
		html.mobile-view .back-btn { display: none !important; }

		#mobile-back-bar {
			display: none;
			position: fixed;
			top: 0; left: 0; right: 0;
			z-index: 200;
			background: transparent;
			border-top: 1px solid #3B82F633;
			padding: 12px 20px;
			box-shadow: 0 -4px 20px rgba(59,130,246,0.06);
		}
		html.mobile-view #mobile-back-bar { display: flex; align-items: center; }
		html.mobile-view #mobile-back-bar.hidden { display: none; }

		/* push page content up so it's not hidden behind fixed bar */
		html.mobile-view .legal-wrap { padding-top: 80px; }

		#mobile-back-btn-inner {
			background: var(--bg-card);
			border: 1px solid #3B82F655;
			color: #3B82F699;
			font-family: 'Orbitron', sans-serif;
			font-size: 11px;
			letter-spacing: 3px;
			padding: 9px 20px;
			cursor: pointer;
			text-transform: uppercase;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 30%;
			transition: border-color 0.2s, color 0.2s, box-shadow 0.2s;
		}
		#mobile-back-btn-inner:hover {
			border-color: var(--neon);
			color: var(--neon);
			box-shadow: 0 0 8px #3B82F655;
		}

		/* ── GEAR HUB PROGRESSION SECTION ── */
		.gear-hub-wrap {
			grid-column: 1 / -1;
			border: 1px solid var(--neon);
			border-radius: 4px;
			padding: 28px 28px 20px;
			background: linear-gradient(145deg, color-mix(in srgb,var(--bg-card) 85%,#3B82F6 15%) 0%, color-mix(in srgb,var(--bg-card) 93%,#3B82F6 7%) 40%, var(--bg-page) 100%);
			box-shadow: var(--neon-glow-soft), inset 0 0 20px rgba(59,130,246,0.03);
			position: relative;
			overflow: hidden;
		}
		.gear-hub-wrap::before {
			content: '';
			position: absolute;
			inset: 0;
			background: linear-gradient(135deg, rgba(59,130,246,0.06) 0%, transparent 60%);
			pointer-events: none;
		}
		.gear-hub-title {
			font-family: 'Orbitron', sans-serif;
			font-size: clamp(0.85rem, 2vw, 1.05rem);
			font-weight: 700;
			color: var(--neon);
			text-transform: uppercase;
			letter-spacing: 0.08em;
			text-shadow: 0 0 6px #3B82F655;
			margin-bottom: 6px;
			line-height: 1.3;
		}
		.gear-hub-sub {
			font-family: 'Exo 2', sans-serif;
			font-size: 12.5px;
			color: var(--text-muted);
			letter-spacing: 0.5px;
			line-height: 1.5;
		}
		.gear-hub-disclaimer {
			font-family: 'Exo 2', sans-serif;
			font-size: 11px;
			color: #3B82F677;
			border: 1px solid #3B82F644;
			border-radius: 3px;
			padding: 7px 12px;
			margin: 12px 0 16px;
			line-height: 1.5;
		}
		.gear-hub-scroll {
			display: flex;
			gap: 12px;
			overflow-x: auto;
			padding-bottom: 12px;
			scrollbar-width: thin;
			scrollbar-color: #3B82F655 transparent;
		}
		.gear-hub-scroll::-webkit-scrollbar { height: 5px; }
		.gear-hub-scroll::-webkit-scrollbar-track { background: transparent; }
		.gear-hub-scroll::-webkit-scrollbar-thumb { background: #3B82F655; border-radius: 3px; }
		.gear-hub-scroll::-webkit-scrollbar-thumb:hover { background: #3B82F699; }
		.tier-card {
			flex: 0 0 200px;
			background: var(--bg-section);
			border: 1px solid #3B82F644;
			border-radius: 4px;
			padding: 14px 14px 12px;
			display: flex;
			flex-direction: column;
			gap: 8px;
		}
		.tier-label {
			font-family: 'Orbitron', sans-serif;
			font-size: 12px;
			font-weight: 700;
			color: var(--neon);
			text-transform: uppercase;
			letter-spacing: 0.1em;
			text-shadow: 0 0 6px #3B82F655;
			border-bottom: 1px solid #3B82F644;
			padding-bottom: 7px;
		}
		.tier-stars {
			font-family: 'Exo 2', sans-serif;
			font-size: 10.5px;
			color: #fbbf24bb;
			letter-spacing: 0.3px;
		}
		.tier-block { display: flex; flex-direction: column; gap: 3px; }
		.tier-block-head {
			font-family: 'Orbitron', sans-serif;
			font-size: 8.5px;
			letter-spacing: 3px;
			text-transform: uppercase;
			color: #3B82F655;
			margin-bottom: 2px;
		}
		.tier-grade {
			font-family: 'Exo 2', sans-serif;
			font-size: 9.5px;
			letter-spacing: 1px;
			text-transform: uppercase;
			margin-top: 3px;
			margin-bottom: 1px;
			font-weight: 600;
		}
		.grade-common  { color: var(--text-secondary); }
		.grade-uncommon{ color: #4ade80; }
		.grade-rare    { color: #60a5fa; }
		.grade-epic    { color: #c084fc; }
		.grade-legendary { color: #fbbf24; }
		.tier-item {
			font-family: 'Exo 2', sans-serif;
			font-size: 11.5px;
			color: var(--text-secondary);
			line-height: 1.4;
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 4px;
		}
		.tier-item-name { flex: 1; }
		.cost-free  { color: #4ade80; font-size: 10px; flex-shrink: 0; }
		.cost-cred  { color: rgb(80,200,245); font-size: 10px; flex-shrink: 0; }
		.cost-acoin { color: #e400f3; font-size: 10px; flex-shrink: 0; }
		.tier-notes {
			margin-top: 2px;
			border-top: 1px solid #3B82F611;
			padding-top: 7px;
			display: flex;
			flex-direction: column;
			gap: 3px;
		}
		.tier-notes-head {
			font-family: 'Orbitron', sans-serif;
			font-size: 8.5px;
			letter-spacing: 3px;
			text-transform: uppercase;
			color: #3B82F655;
			margin-bottom: 2px;
		}
		.tier-note {
			font-family: 'Exo 2', sans-serif;
			font-size: 10.5px;
			color: var(--text-muted);
			line-height: 1.45;
			padding-left: 10px;
			position: relative;
		}
		.tier-note::before {
			content: '›';
			position: absolute;
			left: 0;
			color: #3B82F655;
		}

		@media (max-width: 768px)
		{
			#dot-formula-popup 
			{
				transform: scale(0.67);
				transform-origin: top left;
				overscroll-behavior: contain;
				-webkit-transform: scale(0.67);
				-moz-transform: scale(0.67);
				-ms-transform: scale(0.67);
				-o-transform: scale(0.67);
			}
		}
		#dot-formula-popup
		{
			min-width:500px;
			max-width:580px;
			padding:22px 28px 20px;
		}
	
* {
		-webkit-tap-highlight-color: transparent;
}

.no-scroll {
	overflow: hidden;
	height: 100%;
} 

.divider {
	height: 1px;
	border-bottom: 1px solid #3B82F644;
	margin-bottom: 16px;
	margin-top: 16px
}

.md-bar-lbl-detailed
{ 
	font-family: 'Orbitron',
	sans-serif; 
	font-size: 12px; 
	letter-spacing: 2px; color: #306bc9; 
	text-transform: uppercase;
	width: 400px;
}

@media (max-width: 768)
{
	.md-bar-lbl-detailed
	{
		white-space: normal;
		overflow-wrap: break-word;
		width: 100px;
	}
	.md-bar-row-detailed {
			grid-template-columns: 80px 1fr;
	}
}

.md-bar-val-detailed
{ 
	font-family: 'Exo 2', 
	sans-serif; font-size: 15px; 
	color: var(--text-muted); 
	text-align: right; 
	white-space: nowrap;
}

.md-bar-row-detailed
{ 
	grid-template-columns: 64px 1fr 48px; 
	align-items: center; 
	gap: 8px; 
	margin-bottom: 10px;
	display: flex;
	gap: 12px;
}

.ability-desc
{
	font-family: 'Exo 2', sans-serif;
	font-size: 16px; color: var(--text-secondary);
	line-height: 1.65;
	margin-top: 10px;
}

.hyperlink 
{
    color: var(--text-muted);
	text-decoration: underline;
	cursor: pointer;
}

.hyperlink:hover 
{
	color: #FFFFFF;
}

.tips-box {
	background: var(--bg-card);
	border: 1px solid #3B82F666;
	box-shadow: 0 0 50px #00000099;
	border-radius: 6px;
	width: fit-content;
	max-width: 700px;
	max-height: 88vh;
	overflow-y: auto;
	padding: 28px 32px 32px;
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
	overscroll-behavior: contain;
}

.fv-table th, .fv-table td
{
	padding: 4px 24px;
	text-align: center;
	min-width: 170px;
}

.fv-table th:first-child,
.fv-table td:first-child {
    min-width: 180px;
}

.fv-table td:first-child {
    text-align: left;
}

.fv-table tr:last-child {	
    font-weight: 600;
}

.na {
    color: var(--text-muted);
    opacity: 0.6;
}

@media (max-width: 768px)
{
	.fortune-entry
	{
		padding: 3px 8px 6px;
	}
	.fv-table th, .fv-table td
	{
		padding: 2px 12px;
		min-width: 40px;
		font-size: 9px;
	}

	.fv-table th:first-child,
	.fv-table td:first-child {
    	min-width: 30px;
	}
}

.tips-popup-item
{
	margin: 5px 0px;
	display: block
}

@media (max-width:768px)
{
	.flex-break-mobile
	{
		width:0;
		flex-basis:100%
	}
}

.ecr-pattern-card
{
    display: flex;
	flex-direction: column;
	background-color:var(--bg-card);
}
.ecr-pattern-day
{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.week-title
{
	padding: 8px 0px;
    grid-column: 1 / -1;
}

.day-column
{
    padding: 16px;
}

.reward
{
    margin: 8px 0;
}

.search-bar-holder
{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 20px;
}

.search-bar
{
	padding-top: 5px;
	padding-bottom: 5px;
	padding-left: 10px;
	background: none;
	width: 400px;
	font-family: 'Exo 2', sans-serif;
	font-size: 13px;
	color: var(--text-label);
	letter-spacing: 0.5px;
	border: 1px solid var(--neon);
}