/* ============================================================
   All Rummy App – Frontend Styles
   Scoped to .ara-wrap and .ara-single-wrap
   ============================================================ */

:root {
	--ara-primary:  #ffcc00;
	--ara-secondary: #ff007a;
	--ara-accent:   #7000ff;
	--ara-dark:     #05010d;
	--ara-glass:    rgba(255,255,255,0.05);
	--ara-border:   rgba(255,255,255,0.12);
	--ara-glossy:   linear-gradient(180deg,rgba(255,255,255,0.15) 0%,rgba(255,255,255,0) 100%);
	--ara-neon:     0 0 20px rgba(255,0,122,0.3);
}

.ara-wrap,
.ara-single-wrap {
	font-family: 'Outfit', 'Poppins', sans-serif;
	background-color: var(--ara-dark);
	color: #fff;
	line-height: 1.6;
	overflow-x: hidden;
}

/* ── Background glows ── */
.ara-wrap .ara-glow {
	position: fixed;
	width: 600px;
	height: 600px;
	background: radial-gradient(circle,rgba(255,0,122,0.1) 0%,transparent 70%);
	z-index: 0;
	filter: blur(80px);
	pointer-events: none;
}
.ara-wrap .ara-glow-1 { top:-200px; right:-100px; }
.ara-wrap .ara-glow-2 { bottom:-200px; left:-100px; background:radial-gradient(circle,rgba(112,0,255,0.08) 0%,transparent 70%); }

/* ── Header ── */
.ara-wrap .ara-header {
	background: rgba(5,1,13,0.85);
	backdrop-filter: blur(25px);
	position: fixed;
	width: 100%;
	top: 0;
	z-index: 1000;
	border-bottom: 1px solid var(--ara-border);
	height: 80px;
	display: flex;
	align-items: center;
}
.ara-wrap .ara-nav-container {
	max-width: 1400px;
	margin: 0 auto;
	width: 100%;
	padding: 0 25px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.ara-wrap .ara-logo img {
	height: 55px;
	object-fit: contain;
	filter: drop-shadow(0 0 10px rgba(255,255,255,0.2));
}
.ara-wrap .ara-logo span {
	font-size: 1.6rem;
	font-weight: 900;
	color: var(--ara-primary);
	letter-spacing: -0.5px;
}
.ara-wrap .ara-nav-menu {
	display: flex;
	gap: 35px;
	align-items: center;
}
.ara-wrap .ara-nav-menu a {
	text-decoration: none;
	color: #e2e8f0;
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	transition: 0.3s;
	cursor: pointer;
}
.ara-wrap .ara-nav-menu a:hover { color:var(--ara-primary); text-shadow: 0 0 10px var(--ara-primary); }
.ara-wrap .ara-btn-head {
	background: linear-gradient(135deg,var(--ara-secondary),var(--ara-accent));
	padding: 12px 30px;
	border-radius: 50px;
	font-weight: 800;
	color: white !important;
	box-shadow: 0 5px 25px rgba(255,0,122,0.4);
	border: 1px solid rgba(255,255,255,0.2);
	font-size: 0.85rem;
}
.ara-wrap .ara-mobile-toggle {
	display: none;
	font-size: 1.8rem;
	color: var(--ara-primary);
	cursor: pointer;
	background: none;
	border: none;
}

/* ── Banner ── */
.ara-wrap .ara-banner {
	margin-top: 80px;
	display: block;
	position: relative;
	height: 600px;
	overflow: hidden;
	text-decoration: none;
	border-bottom: 2px solid var(--ara-border);
}
.ara-wrap .ara-slide-container {
	display: flex;
	height: 100%;
	transition: transform 0.8s cubic-bezier(0.7,0,0.3,1);
}
.ara-wrap .ara-slide { min-width:100%; position:relative; }
.ara-wrap .ara-slide img { width:100%; height:100%; object-fit:cover; filter:brightness(0.3) saturate(1.1); }
.ara-wrap .ara-slide::after {
	content:'';
	position:absolute;
	inset:0;
	background: linear-gradient(0deg,var(--ara-dark) 0%,transparent 60%);
}
.ara-wrap .ara-banner-content {
	position:absolute;
	top:55%;
	left:50%;
	transform:translate(-50%,-50%);
	text-align:center;
	width:90%;
	z-index:10;
}
.ara-wrap .ara-banner-content h1 {
	font-size: 4.8rem;
	font-weight: 900;
	margin-bottom: 25px;
	color: #fff;
	text-transform: uppercase;
	line-height: 1.1;
	letter-spacing: -2px;
}
.ara-wrap .ara-banner-content h1 span {
	display: block;
	background: linear-gradient(to right,#fff,var(--ara-primary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ara-wrap .ara-btn-banner {
	display: inline-flex;
	align-items: center;
	gap: 15px;
	background: var(--ara-primary);
	color: #000;
	padding: 20px 60px;
	border-radius: 15px;
	font-weight: 900;
	font-size: 1.5rem;
	box-shadow: 0 20px 50px rgba(255,204,0,0.4);
	border: 2px solid rgba(255,255,255,0.5);
	text-decoration: none;
}

/* ── Tab section ── */
.ara-wrap .ara-tab-section {
	padding: 100px 20px;
	max-width: 1400px;
	margin: 0 auto;
}
.ara-wrap .ara-tab-header {
	display: flex;
	justify-content: center;
	gap: 20px;
	margin-bottom: 70px;
	flex-wrap: wrap;
}
.ara-wrap .ara-tab-btn {
	padding: 20px 50px;
	background: rgba(255,255,255,0.03);
	border: 1px solid var(--ara-border);
	border-radius: 20px;
	cursor: pointer;
	font-weight: 800;
	color: #94a3b8;
	transition: 0.4s;
	text-transform: uppercase;
	font-size: 0.95rem;
	letter-spacing: 1px;
}
.ara-wrap .ara-tab-btn.active {
	background: linear-gradient(135deg,var(--ara-secondary),var(--ara-accent));
	color: white;
	border-color: transparent;
	box-shadow: 0 15px 35px rgba(112,0,255,0.4);
	transform: translateY(-8px);
}

/* ── Game cards grid ── */
.ara-wrap .ara-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill,minmax(300px,1fr));
	gap: 40px;
	animation: araFadeUp 0.7s ease;
}
.ara-wrap .ara-card {
	background: linear-gradient(145deg,rgba(255,255,255,0.08),rgba(255,255,255,0.02));
	border-radius: 40px;
	padding: 45px 30px;
	text-align: center;
	border: 1px solid var(--ara-border);
	transition: 0.5s cubic-bezier(0.175,0.885,0.32,1.275);
	position: relative;
	overflow: hidden;
}
.ara-wrap .ara-card.ara-hidden { display: none; }
.ara-wrap .ara-card:hover {
	transform: translateY(-20px);
	border-color: var(--ara-secondary);
	box-shadow: 0 40px 80px -20px rgba(255,0,122,0.35);
}
.ara-wrap .ara-card-img {
	width: 160px;
	height: 160px;
	border-radius: 35px;
	margin: 0 auto 30px;
	box-shadow: 0 20px 40px rgba(0,0,0,0.5);
	object-fit: cover;
	border: 4px solid rgba(255,255,255,0.1);
	display: block;
}
.ara-wrap .ara-card-img-placeholder {
	width: 160px;
	height: 160px;
	border-radius: 35px;
	margin: 0 auto 30px;
	background: rgba(255,255,255,0.05);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 3rem;
	color: rgba(255,204,0,0.3);
	border: 4px solid rgba(255,255,255,0.1);
}
.ara-wrap .ara-card h3 {
	font-size: 1.8rem;
	margin-bottom: 30px;
	font-weight: 800;
	background: linear-gradient(to right,#fff,#94a3b8);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.ara-wrap .ara-btn-card {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: linear-gradient(135deg,var(--ara-secondary),var(--ara-accent));
	color: white;
	padding: 16px;
	border-radius: 20px;
	font-weight: 800;
	text-transform: uppercase;
	text-decoration: none;
	box-shadow: 0 10px 25px rgba(0,0,0,0.3);
	border: 1px solid rgba(255,255,255,0.2);
	transition: 0.3s;
}
.ara-wrap .ara-btn-card:hover { transform:translateY(-3px); box-shadow:0 15px 30px rgba(255,0,122,0.4); }
.ara-wrap .ara-no-posts {
	grid-column: 1 / -1;
	text-align: center;
	padding: 60px;
	color: rgba(255,255,255,0.4);
}

/* ── Info section ── */
.ara-wrap .ara-info { padding:120px 20px; background:linear-gradient(180deg,rgba(15,5,36,0.8) 0%,var(--ara-dark) 100%); }
.ara-wrap .ara-container { max-width:1100px; margin:0 auto; }
.ara-wrap .ara-title-main { font-size:3.5rem; margin-bottom:40px; font-weight:900; text-align:center; text-transform:uppercase; line-height:1.2; }
.ara-wrap .ara-title-main span { color:var(--ara-primary); text-shadow:0 0 15px rgba(255,204,0,0.3); }
.ara-wrap .ara-desc { text-align:center; font-size:1.2rem; color:#cbd5e1; margin-bottom:30px; max-width:900px; margin-left:auto; margin-right:auto; }
.ara-wrap .ara-notice-card {
	background: linear-gradient(90deg,rgba(112,0,255,0.1),rgba(255,0,122,0.1));
	border: 1px solid var(--ara-border);
	padding: 45px;
	border-radius: 35px;
	margin: 60px 0;
	line-height: 1.8;
}
.ara-wrap .ara-notice-card h4 { color:var(--ara-primary); font-size:1.6rem; margin-bottom:20px; display:flex; align-items:center; gap:15px; }

/* ── Table ── */
.ara-wrap .ara-table-wrap {
	margin-top:80px;
	overflow-x:auto;
	border-radius:35px;
	border:1px solid var(--ara-border);
	background:rgba(255,255,255,0.02);
	backdrop-filter:blur(15px);
	-webkit-overflow-scrolling:touch;
}
.ara-wrap .ara-table { width:100%; border-collapse:collapse; min-width:600px; }
.ara-wrap .ara-table th, .ara-wrap .ara-table td { padding:25px 30px; text-align:left; border-bottom:1px solid var(--ara-border); }
.ara-wrap .ara-table th { background:rgba(255,0,122,0.1); color:var(--ara-primary); text-transform:uppercase; font-weight:800; font-size:1rem; }
.ara-wrap .ara-table tr:hover td { background:rgba(255,255,255,0.05); }
.ara-wrap .ara-table a { color:var(--ara-secondary); font-weight:800; text-decoration:none; display:inline-flex; align-items:center; gap:8px; }

/* ── FAQ ── */
.ara-wrap .ara-faq { padding:120px 20px; }
.ara-wrap .ara-faq-wrap { max-width:1000px; margin:0 auto; }
.ara-wrap .ara-faq-item { background:rgba(255,255,255,0.03); margin-bottom:20px; border-radius:25px; border:1px solid var(--ara-border); overflow:hidden; transition:0.4s; }
.ara-wrap .ara-faq-item:hover { border-color:var(--ara-primary); }
.ara-wrap .ara-faq-q { padding:35px; cursor:pointer; display:flex; justify-content:space-between; align-items:center; font-weight:800; font-size:1.2rem; color:#fff; gap:15px; }
.ara-wrap .ara-faq-q i { color:var(--ara-primary); transition:0.5s; flex-shrink:0; }
.ara-wrap .ara-faq-a { padding:0 35px; max-height:0; overflow:hidden; transition:0.5s cubic-bezier(0.4,0,0.2,1); color:#94a3b8; background:rgba(0,0,0,0.4); font-size:1.1rem; }
.ara-wrap .ara-faq-item.active .ara-faq-a { padding:35px; max-height:1000px; }
.ara-wrap .ara-faq-item.active .ara-faq-q i { transform:rotate(180deg); color:var(--ara-secondary); }

/* ── Warning card ── */
.ara-wrap .ara-warning {
	background:rgba(239,68,68,0.1);
	border:1px solid rgba(239,68,68,0.3);
	padding:60px;
	border-radius:40px;
	margin:100px 0;
	position:relative;
}
.ara-wrap .ara-warning-badge {
	position:absolute;
	top:-25px;
	left:50px;
	background:#ef4444;
	color:#fff;
	padding:10px 30px;
	border-radius:15px;
	font-weight:900;
	font-size:1.4rem;
	box-shadow:0 10px 30px rgba(239,68,68,0.5);
}

/* ── Footer ── */
.ara-wrap footer, .ara-single-wrap footer {
	padding:100px 20px;
	text-align:center;
	background:#020105;
	border-top:1px solid var(--ara-border);
}
.ara-wrap .ara-footer-links { display:flex; justify-content:center; gap:30px; margin-bottom:40px; flex-wrap:wrap; }
.ara-wrap .ara-footer-links a { color:#64748b; text-decoration:none; font-weight:600; transition:0.3s; }
.ara-wrap .ara-footer-links a:hover { color:var(--ara-primary); }
.ara-wrap .ara-copyright { color:#334155; font-size:0.9rem; letter-spacing:1px; margin-top:20px; }

/* ── Single post ── */
.ara-single-wrap {
	background-color: var(--ara-dark);
}
.ara-single-wrap .ara-sp-hero {
	margin-top: 80px;
	min-height: 55vh;
	display: flex;
	align-items: flex-end;
	padding-bottom: 60px;
	position: relative;
	overflow: hidden;
}
.ara-single-wrap .ara-sp-hero-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	filter: brightness(0.25);
}
.ara-single-wrap .ara-sp-hero-inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
	width: 100%;
}
.ara-single-wrap .ara-sp-back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--ara-primary);
	font-size: 0.9rem;
	font-weight: 700;
	text-decoration: none;
	margin-bottom: 24px;
}
.ara-single-wrap .ara-sp-title {
	font-size: clamp(2rem,4vw,3.5rem);
	font-weight: 900;
	background: linear-gradient(to right,#fff,var(--ara-primary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: 20px;
}
.ara-single-wrap .ara-sp-lead { font-size:1.1rem; color:rgba(255,255,255,0.65); margin-bottom:28px; line-height:1.7; }
.ara-single-wrap .ara-sp-dl-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: linear-gradient(135deg,var(--ara-secondary),var(--ara-accent));
	color: #fff;
	padding: 18px 50px;
	border-radius: 20px;
	font-weight: 900;
	font-size: 1.1rem;
	text-decoration: none;
	text-transform: uppercase;
	box-shadow: 0 15px 35px rgba(255,0,122,0.4);
	border: 1px solid rgba(255,255,255,0.2);
	transition: 0.3s;
}
.ara-single-wrap .ara-sp-dl-btn:hover { transform:translateY(-4px); box-shadow:0 20px 45px rgba(255,0,122,0.5); }
.ara-single-wrap .ara-sp-content {
	max-width: 900px;
	margin: 0 auto;
	padding: 56px 24px;
}
.ara-single-wrap .ara-sp-content p, .ara-single-wrap .ara-sp-content li { color:rgba(255,255,255,0.75); font-size:1.05rem; line-height:1.8; margin-bottom:16px; }
.ara-single-wrap .ara-sp-content h2,.ara-single-wrap .ara-sp-content h3,.ara-single-wrap .ara-sp-content h4 { color:var(--ara-primary); margin:28px 0 12px; }
.ara-single-wrap .ara-sp-cta {
	text-align: center;
	padding: 80px 24px;
	background: linear-gradient(180deg,rgba(112,0,255,0.06),rgba(255,0,122,0.06));
	border-top: 1px solid var(--ara-border);
}
.ara-single-wrap .ara-sp-cta h2 { font-size:2.5rem; font-weight:900; color:var(--ara-primary); margin-bottom:16px; }
.ara-single-wrap .ara-sp-cta p { color:#94a3b8; margin-bottom:32px; font-size:1.1rem; }

/* ── Animation ── */
@keyframes araFadeUp {
	from { opacity:0; transform:translateY(40px); }
	to   { opacity:1; transform:translateY(0); }
}

/* ── Responsive ── */
@media (max-width:991px) {
	.ara-wrap .ara-nav-menu { display:none; flex-direction:column; position:absolute; top:80px; left:0; width:100%; background:#0f0524; padding:40px 20px; gap:25px; border-bottom:4px solid var(--ara-primary); backdrop-filter:blur(25px); z-index:999; }
	.ara-wrap .ara-nav-menu.active { display:flex; }
	.ara-wrap .ara-mobile-toggle { display:block; }
	.ara-wrap .ara-banner { height:480px; }
	.ara-wrap .ara-banner-content h1 { font-size:2.8rem; }
}
@media (max-width:767px) {
	.ara-wrap .ara-banner { height:450px; margin-top:70px; }
	.ara-wrap .ara-header { height:70px; }
	.ara-wrap .ara-banner-content h1 { font-size:2.2rem; }
	.ara-wrap .ara-tab-section { padding:60px 20px; }
	.ara-wrap .ara-tab-btn { padding:15px 20px; font-size:0.85rem; flex:1; text-align:center; }
	.ara-wrap .ara-cards-grid { grid-template-columns:1fr; }
	.ara-wrap .ara-title-main { font-size:2.2rem; }
}
@media (max-width:480px) {
	.ara-wrap .ara-banner-content h1 { font-size:1.7rem; }
	.ara-wrap .ara-tab-header { gap:8px; }
	.ara-wrap .ara-tab-btn { padding:12px 10px; font-size:0.75rem; }
	.ara-wrap .ara-card-img { width:130px; height:130px; }
}