@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root{
	--bg0:#070A12;
	--bg1:#0B1220;
	--card:#0E1729;
	--card2:#0C1424;
	--border:rgba(255,255,255,.08);
	--text:#EAF0FF;
	--muted:rgba(234,240,255,.72);
	--muted2:rgba(234,240,255,.55);
	--accent:#4EA1FF;
	--accent2:#7C5CFF;
	--good:#2DD4BF;
	--warn:#F59E0B;
	--danger:#FB7185;
	--shadow: 0 20px 70px rgba(0,0,0,.55);
}

.rules-page{
	font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
	background:
		radial-gradient(900px 450px at 15% 0%, rgba(78,161,255,.18), transparent 60%),
		radial-gradient(700px 420px at 85% 10%, rgba(124,92,255,.18), transparent 55%),
		linear-gradient(180deg, var(--bg0), var(--bg1));
	color: var(--text);
	min-height: 100vh;
}

/* NAV */
.rules-nav{
	background: rgba(10, 14, 24, .65);
	border-bottom: 1px solid var(--border);
	backdrop-filter: blur(10px);
}

.brand-logo{ filter: drop-shadow(0 10px 24px rgba(0,0,0,.35)); }

.brand-text .brand-title{
	font-weight: 800;
	letter-spacing: .3px;
	line-height: 1;
}
.brand-text .brand-subtitle{
	color: var(--muted2);
	font-size: .9rem;
	line-height: 1.2;
	margin-top: .25rem;
}

.rules-nav .nav-link{
	color: rgba(234,240,255,.78);
	font-weight: 600;
	border-radius: 12px;
	padding: .55rem .85rem;
}
.rules-nav .nav-link:hover{
	color: var(--text);
	background: rgba(255,255,255,.06);
}
.rules-nav .nav-link.active{
	color: var(--text);
	background:
		linear-gradient(135deg, rgba(78,161,255,.18), rgba(124,92,255,.16));
	border: 1px solid rgba(78,161,255,.22);
}

/* HERO */
.rules-hero{
	background:
		linear-gradient(135deg, rgba(78,161,255,.14), rgba(124,92,255,.12));
	border: 1px solid var(--border);
	border-radius: 22px;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.rules-hero-inner{
	padding: 26px;
}

.rules-title{
	font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem);
	font-weight: 800;
	letter-spacing: .2px;
}
.rules-subtitle{
	color: var(--muted);
	max-width: 70ch;
}

/* BUTTONS */
.btn-rules-primary{
	background: linear-gradient(135deg, var(--accent), var(--accent2));
	border: 0;
	color: #071022;
	font-weight: 800;
	border-radius: 14px;
	padding: .7rem 1rem;
	box-shadow: 0 16px 44px rgba(78,161,255,.22);
}
.btn-rules-primary:hover{
	filter: brightness(1.05);
	transform: translateY(-1px);
}
.btn-rules-secondary{
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.10);
	color: var(--text);
	font-weight: 700;
	border-radius: 14px;
	padding: .7rem 1rem;
}
.btn-rules-secondary:hover{
	background: rgba(255,255,255,.08);
}

/* ALERTS */
.rules-alerts{ display: grid; gap: 12px; }

.rules-alert{
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 14px 14px;
	border-radius: 16px;
	border: 1px solid var(--border);
	background: rgba(0,0,0,.22);
}
.rules-alert-icon{
	width: 38px;
	height: 38px;
	border-radius: 12px;
	display:flex;
	align-items:center;
	justify-content:center;
	flex: 0 0 auto;
}
.rules-alert-text{
	color: var(--muted);
	line-height: 1.35;
}
.rules-alert-text strong{ color: var(--text); }

.rules-alert-warn .rules-alert-icon{
	background: rgba(245,158,11,.18);
	color: var(--warn);
	border: 1px solid rgba(245,158,11,.22);
}
.rules-alert-danger .rules-alert-icon{
	background: rgba(251,113,133,.16);
	color: var(--danger);
	border: 1px solid rgba(251,113,133,.22);
}

/* CARD */
.rules-card{
	background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
	border: 1px solid var(--border);
	border-radius: 22px;
	box-shadow: var(--shadow);
	overflow: hidden;
}
.rules-card-header{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap: 12px;
	padding: 18px 20px;
	background: rgba(0,0,0,.18);
	border-bottom: 1px solid var(--border);
}
.rules-card-title{
	font-size: 1.1rem;
	font-weight: 800;
	letter-spacing: .2px;
}
.rules-card-hint{
	color: var(--muted2);
	font-size: .92rem;
}
.rules-card-body{ padding: 8px 0 18px; }

/* ACCORDION */
.rules-acc-item{
	background: transparent;
	border: 0;
}

.rules-acc-button{
	background: transparent !important;
	color: var(--text) !important;
	font-weight: 800;
	padding: 18px 20px;
	border-top: 1px solid var(--border);
}
.accordion-item:first-child .rules-acc-button{
	border-top: 0;
}
.accordion-button::after{
	filter: invert(1) opacity(.75);
}
.accordion-button:focus{
	box-shadow: none;
	border-color: var(--border);
}

.accordion-body{
	padding: 14px 20px 18px;
	color: var(--muted);
}

/* RULE LIST */
.rules-list{
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
}

.rule-item{
	padding: 12px 12px;
	border-radius: 14px;
	background: rgba(255,255,255,.04);
	border: 1px solid rgba(255,255,255,.08);
	color: rgba(234,240,255,.86);
	line-height: 1.35;
	position: relative;
}
.rule-item::before{
	content: "•";
	color: rgba(78,161,255,.9);
	font-weight: 900;
	margin-right: 10px;
}
.rule-item:hover{
	background: rgba(255,255,255,.06);
	border-color: rgba(78,161,255,.22);
}

/* FOOTER NOTE */
.rules-footer-note{
	margin: 0 20px;
	padding: 14px 14px;
	border-radius: 16px;
	border: 1px solid rgba(255,255,255,.10);
	background: rgba(0,0,0,.20);
	color: var(--muted);
}

/* OVERLAY (keeps your fade transition working, but looks cleaner) */
#overlay{
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.75);
	backdrop-filter: blur(6px);
	z-index: 9999;
	display: none;
}

/* RESPONSIVE */
@media (max-width: 576px){
	.rules-hero-inner{ padding: 18px; }
	.rules-card-header{ padding: 14px 14px; }
	.rules-acc-button{ padding: 16px 14px; }
	.accordion-body{ padding: 12px 14px 16px; }
	.rules-footer-note{ margin: 0 14px; }
}

.rules-search .input-group-text{
	background: rgba(255,255,255,.06);
	border-color: rgba(255,255,255,.12);
	color: rgba(255,255,255,.85);
}
.rules-search .form-control{
	background: rgba(255,255,255,.04);
	border-color: rgba(255,255,255,.12);
	color: #fff;
}
.rules-search .form-control::placeholder{ color: rgba(255,255,255,.55); }
.rules-search .btn{ border-color: rgba(255,255,255,.12); }
.rules-mark{ background: rgba(78,161,255,.22); color: inherit; padding: 0 .15em; border-radius: .25em; }