:root {
	--saffron: #E8631A;
	--saffron-lt: #F9A15A;
	--saffron-dk: #B84A0C;
	--gold: #D4A017;
	--gold-lt: #F0C84B;
	--maroon: #7B1C2E;
	--maroon-dk: #4E0E1B;
	--cream: #FDF6ED;
	--dark: #1A0A05;
	--muted: #6B4A35;
	--card-bg: #FFFFFF;
	--border: rgba(232, 99, 26, .18);
	--g-hero: linear-gradient(135deg, #4E0E1B 0%, #7B1C2E 40%, #B84A0C 75%, #E8631A 100%);
	--g-saffron: linear-gradient(135deg, #E8631A, #F9A15A);
	--g-gold: linear-gradient(135deg, #D4A017, #F0C84B);
	--g-maroon: linear-gradient(135deg, #7B1C2E, #B84A0C);
}

*,
*::before,
*::after {
	box-sizing: border-box
}

@font-face {
    font-family: 'Noto-Sans-Oriya';
    src: url('fonts/NotoSansOriya.ttf') format('truetype'); 
    font-weight: 400;
    font-style: normal;
}

.odiatext{
    font-family: 'Noto-Sans-Oriya';
}

@font-face {
    font-family: 'OdiaFont';
    src: url('fonts/Kalinga.ttf') format('truetype');
}


body {
	font-family: 'Noto-Sans-Oriya', sans-serif;
	background: var(--cream);
	color: var(--dark);
	min-height: 100vh
}

/* TOPBAR */
.topbar {
	background: #fff;
	position: sticky;
	top: 0;
	z-index: 1000;
	box-shadow: 0 4px 24px rgba(78, 14, 27, .35)
}

.topbar-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .7rem 1.5rem;
	gap: 1rem
}

.topbar-brand {
	display: flex;
	align-items: center;
	gap: .75rem;
	text-decoration: none
}

.brand-emblem {
	width: 42px;
	height: 42px;
	background: rgba(255, 255, 255, .15);
	border: 2px solid rgba(255, 255, 255, .35);
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: 1.35rem;
	flex-shrink: 0
}

.brand-text-en {
	font-family: 'DM Serif Display', serif;
	font-size: 1.1rem;
	color: #fff;
	line-height: 1;
	letter-spacing: .02em
}

.brand-text-or {
	font-family: 'Tiro Odia', serif;
	font-size: .78rem;
	color: rgba(255, 255, 255, .75);
	line-height: 1;
	margin-top: 2px
}

.topbar-right {
	display: flex;
	align-items: center;
	gap: .6rem
}

.btn-back {
	font-size: .78rem;
	padding: .35rem .85rem;
	border-radius: 50px;
    border: 1.5px solid rgb(182 72 13);
    color: #912c22;
	background: transparent;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	transition: background .2s;
	text-decoration: none
}

.btn-back:hover {
	background: 912c22;
    color: #71192a;
}

.badge-live {
	background: #ffefe5;
	color: var(--saffron-dk);
	font-size: .68rem;
	font-weight: 700;
	padding: .3rem .65rem;
	border-radius: 50px;
	display: inline-flex;
	align-items: center;
	gap: .3rem
}

.badge-live::before {
	content: '';
	width: 7px;
	height: 7px;
	background: var(--saffron);
	border-radius: 50%;
	animation: pulse-dot 1.4s infinite
}

@keyframes pulse-dot {

	0%,
	100% {
		opacity: 1;
		transform: scale(1)
	}

	50% {
		opacity: .5;
		transform: scale(.7)
	}
}

/* REFRESH BAR */
.refresh-bar {
	background: rgba(255, 255, 255, .08);
	border-top: 1px solid rgba(255, 255, 255, .12);
	padding: .3rem 1.5rem;
	display: flex;
	align-items: center;
	gap: .75rem;
	font-size: .7rem;
	color: rgba(255, 255, 255, .75)
}

.countdown-wrap {
	display: flex;
	align-items: center;
	gap: .4rem;
	margin-left: auto
}

.progress-ring {
	width: 18px;
	height: 18px;
	flex-shrink: 0
}

.progress-ring circle {
	fill: none;
	stroke-width: 2.5;
	stroke-linecap: round;
	transform-origin: center;
	transform: rotate(-90deg);
	transition: stroke-dashoffset .95s linear
}

.ring-bg {
	stroke: rgba(255, 255, 255, .2)
}

.ring-fill {
	stroke: var(--gold-lt)
}

.spinner-tiny {
	display: none;
	width: 12px;
	height: 12px;
	border: 2px solid rgba(255, 255, 255, .3);
	border-top-color: #fff;
	border-radius: 50%;
	animation: spin .6s linear infinite
}

.is-loading .spinner-tiny {
	display: inline-block
}

.is-loading .check-icon {
	display: none
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

/* HERO */
.hero-band {
	background: var(--g-hero);
	padding: 2.2rem 1.5rem 3.2rem;
	position: relative;
	overflow: hidden
}

.hero-band::before {
	content: 'ଓ';
	font-family: 'Tiro Odia', serif;
	font-size: clamp(8rem, 22vw, 18rem);
	color: rgba(255, 255, 255, .06);
	position: absolute;
	right: -2rem;
	top: -2rem;
	line-height: 1;
	pointer-events: none
}

.hero-band h1 {
	font-family: 'DM Serif Display', serif;
	font-size: clamp(1.5rem, 4vw, 2.4rem);
	color: #fff;
	margin: 0 0 .3rem
}

.hero-band .sub {
	font-family: 'Tiro Odia', serif;
	color: rgba(255, 255, 255, .75);
	font-size: clamp(.85rem, 2.5vw, 1rem)
}

.hero-band .note {
	font-size: .72rem;
	color: rgba(255, 255, 255, .55);
	margin-top: .5rem
}

/* STAT CARDS */
.stats-row {
	margin-top: -3rem;
	position: relative;
	z-index: 10
}

.stat-card {
	border-radius: 18px;
	padding: 1.4rem 1.5rem;
	color: #fff;
	box-shadow: 0 8px 32px rgba(0, 0, 0, .18);
	display: flex;
	align-items: center;
	gap: 1rem;
	transition: transform .25s, box-shadow .25s;
	height: 100%
}

.stat-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 14px 40px rgba(0, 0, 0, .22)
}

.stat-card.saffron {
	background: var(--g-saffron)
}

.stat-card.gold {
	background: var(--g-gold);
	color: var(--dark)
}

.stat-card.maroon {
	background: var(--g-maroon)
}

.stat-icon {
	width: 56px;
	height: 56px;
	background: rgba(255, 255, 255, .2);
	border-radius: 14px;
	display: grid;
	place-items: center;
	font-size: 1.6rem;
	flex-shrink: 0
}

.stat-card.gold .stat-icon {
	background: rgba(0, 0, 0, .12)
}

.stat-body {
	flex: 1;
	min-width: 0
}

.stat-label {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
	opacity: .85
}

.stat-value {
	font-family: 'DM Serif Display', serif;
	font-size: clamp(1.8rem, 5vw, 2.4rem);
	line-height: 1.1;
	word-break: break-all
}

.stat-value.bump {
	animation: bump .4s ease
}

@keyframes bump {
	0% {
		transform: scale(1)
	}

	40% {
		transform: scale(1.12)
	}

	100% {
		transform: scale(1)
	}
}

.stat-trend {
	font-size: .7rem;
	opacity: .8;
	margin-top: 2px
}

/* SECTION TITLE */
.section-title {
	font-family: 'DM Serif Display', serif;
	font-size: 1.35rem;
	color: var(--maroon-dk);
	display: flex;
	align-items: center;
	gap: .6rem;
	margin-bottom: 1.1rem
}

.section-title::after {
	content: '';
	flex: 1;
	height: 2px;
	background: linear-gradient(90deg, var(--saffron) 0%, transparent 100%);
	border-radius: 1px
}

.section-pill {
	font-size: .68rem;
	background: var(--saffron);
	color: #fff;
	padding: .2rem .6rem;
	border-radius: 50px;
	font-weight: 600
}

/* DISTRICT TABLE */
.district-card {
	background: var(--card-bg);
	border-radius: 18px;
	box-shadow: 0 4px 24px rgba(78, 14, 27, .07);
	overflow: hidden;
	border: 1px solid var(--border)
}

.district-card .table {
	margin: 0
}

.district-card thead th {
	background: var(--maroon-dk);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	border: none;
	padding: .9rem 1rem
}

.district-card tbody tr {
	transition: background .15s
}

.district-card tbody tr:hover {
	background: #FFF4EC
}

.district-card tbody td {
	font-size: .88rem;
	padding: .7rem 1rem;
	border-color: rgba(232, 99, 26, .08);
	vertical-align: middle
}

.district-card tbody td:first-child {
	color: var(--muted)
}

.district-card tbody td:nth-child(2) {
	font-weight: 500;
	color: var(--maroon)
}

.district-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem
}

.district-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--saffron);
	flex-shrink: 0
}

.bar-wrap {
	display: flex;
	align-items: center;
	gap: .6rem
}

.bar-bg {
	flex: 1;
	height: 6px;
	background: #EEE;
	border-radius: 3px;
	overflow: hidden
}

.bar-fill {
	height: 100%;
	border-radius: 3px;
	background: var(--g-saffron);
	transition: width .6s ease
}

.bar-num {
	font-family: 'DM Serif Display', serif;
	font-size: .95rem;
	color: var(--saffron-dk);
	min-width: 2.5rem;
	text-align: right
}

/* REELS TABLE */
.top-reels-card {
	background: var(--card-bg);
	border-radius: 18px;
	box-shadow: 0 4px 24px rgba(78, 14, 27, .07);
	overflow: hidden;
	border: 1px solid var(--border)
}

.top-reels-card .table {
	margin: 0
}

.top-reels-card thead th {
	background: var(--g-hero);
	color: #fff;
	font-size: .73rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	border: none;
	padding: .9rem 1rem
}

.top-reels-card tbody tr {
	transition: background .15s
}

.top-reels-card tbody tr:hover {
	background: #FFF4EC
}

.top-reels-card tbody td {
	font-size: .875rem;
	padding: .75rem 1rem;
	border-color: rgba(232, 99, 26, .08);
	vertical-align: middle
}

.rank-badge {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	font-size: .8rem;
	font-weight: 700
}

.rank-1 {
	background: #FFD700;
	color: #5A3A00
}

.rank-2 {
	background: #C0C0C0;
	color: #333
}

.rank-3 {
	background: #CD7F32;
	color: #fff
}

.rank-n {
	background: var(--cream);
	color: var(--muted);
	border: 1.5px solid var(--border)
}

.like-badge {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	background: #FFF0E8;
	color: var(--saffron-dk);
	border-radius: 50px;
	padding: .2rem .65rem;
	font-size: .8rem;
	font-weight: 700
}

.reel-link {
	display: inline-flex;
	align-items: center;
	gap: .3rem;
	color: var(--saffron-dk);
	font-weight: 600;
	font-size: .82rem;
	text-decoration: none;
	background: #FFF0E8;
	padding: .2rem .6rem;
	border-radius: 6px;
	transition: background .15s
}

.reel-link:hover {
	background: var(--saffron);
	color: #fff
}

.avatar-circle {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--g-hero);
	color: #fff;
	display: grid;
	place-items: center;
	font-size: .85rem;
	font-weight: 700;
	flex-shrink: 0;
	border: 2px solid rgba(232, 99, 26, .25)
}

.avatar-circle img {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
	display: block
}

.user-cell {
	display: flex;
	align-items: center;
	gap: .6rem
}

/* winner avatar */
.winner-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 3px solid rgba(255, 255, 255, .4);
	overflow: hidden;
	flex-shrink: 0;
	background: rgba(255, 255, 255, .15);
	display: grid;
	place-items: center;
	font-family: 'DM Serif Display', serif;
	font-size: 1.6rem;
	color: #fff;
	margin-bottom: .75rem
}

.winner-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

/* WINNER */
.winner-card {
	background: var(--g-hero);
	border-radius: 20px;
	padding: 1.8rem;
	color: #fff;
	position: relative;
	overflow: hidden;
	box-shadow: 0 8px 40px rgba(78, 14, 27, .3)
}

.winner-card::before {
	content: '🏆';
	font-size: 8rem;
	position: absolute;
	right: -1.5rem;
	bottom: -2rem;
	opacity: .12;
	pointer-events: none
}

.winner-label {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--gold-lt);
	font-weight: 700;
	margin-bottom: .6rem
}

.winner-name {
	font-family: 'DM Serif Display', serif;
	font-size: clamp(1.4rem, 4vw, 2rem);
	line-height: 1.1
}

.winner-username {
	font-size: .85rem;
	opacity: .75;
	margin-top: .2rem
}

.winner-likes {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	background: rgba(255, 255, 255, .18);
	border: 1px solid rgba(255, 255, 255, .3);
	padding: .45rem 1.1rem;
	border-radius: 50px;
	font-family: 'DM Serif Display', serif;
	font-size: 1.3rem;
	margin-top: .9rem
}

.winner-likes small {
	font-family: 'Noto-Sans-Oriya', sans-serif;
	font-size: .7rem;
	opacity: .8;
	font-weight: 600
}

.sparkles {
	position: absolute;
	top: .8rem;
	right: 1rem;
	font-size: 1.4rem;
	opacity: .6
}

/* FILTER BAR */
.filter-bar {
	display: flex;
	gap: .6rem;
	flex-wrap: wrap;
	margin-bottom: 1rem
}

.filter-bar input {
	flex: 1;
	min-width: 140px;
	border: 1.5px solid var(--border);
	border-radius: 10px;
	padding: .45rem .9rem;
	font-size: .85rem;
	outline: none;
	transition: border .2s
}

.filter-bar input:focus {
	border-color: var(--saffron)
}

.btn-export {
	background: var(--saffron);
	color: #fff;
	border: none;
	border-radius: 10px;
	padding: .45rem 1rem;
	font-size: .82rem;
	font-weight: 600;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	transition: background .2s
}

.btn-export:hover {
	background: var(--saffron-dk)
}

/* TABLE SCROLL */
.table-scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch
}

/* ROW FLASH on refresh */
@keyframes rowFresh {
	0% {
		background: rgba(232, 99, 26, .15)
	}

	100% {
		background: transparent
	}
}

.row-fresh {
	animation: rowFresh 1.4s ease forwards
}

/* SKELETON */
.skeleton-wrap {
	padding: 1rem
}

.skeleton-row {
	height: 38px;
	border-radius: 8px;
	background: linear-gradient(90deg, #f0e8e0 25%, #fdf0e6 50%, #f0e8e0 75%);
	background-size: 200% 100%;
	animation: shimmer 1.2s infinite;
	margin-bottom: .6rem
}

@keyframes shimmer {
	0% {
		background-position: 200% 0
	}

	100% {
		background-position: -200% 0
	}
}

/* FOOTER */
.page-footer {
	background: var(--maroon-dk);
	color: rgba(255, 255, 255, .65);
	font-size: .75rem;
	text-align: center;
	padding: 1.2rem;
	margin-top: 3rem
}

.page-footer a {
	color: var(--gold-lt);
	text-decoration: none
}

/* FADE-UP */
.fade-up {
	opacity: 0;
	transform: translateY(20px);
	animation: fadeUp .55s ease forwards
}

@keyframes fadeUp {
	to {
		opacity: 1;
		transform: translateY(0)
	}
}

.d1 {
	animation-delay: .1s
}

.d2 {
	animation-delay: .2s
}

.d3 {
	animation-delay: .3s
}

.d4 {
	animation-delay: .4s
}

/* RESPONSIVE */
@media(max-width:575px) {
	.hero-band {
		padding: 1.8rem 1rem 3rem
	}

	.topbar-inner {
		padding: .55rem 1rem
	}

	.stat-card {
		padding: 1.1rem
	}

	.stat-icon {
		width: 46px;
		height: 46px;
		font-size: 1.3rem;
		border-radius: 11px
	}

	.district-card tbody td,
	.top-reels-card tbody td {
		font-size: .8rem;
		padding: .6rem .75rem
	}

	.refresh-bar {
		font-size: .64rem;
		padding: .3rem 1rem
	}
}

@media(max-width:400px) {
	.brand-text-en {
		font-size: .92rem
	}
}


.reelsCounts {
	position: absolute;
	right: 10px;
	top: 1px;
}

.reelsCounts .maincountr {
	font-size: 1.5rem;
	color: #857164;
	text-align: end;
	font-weight: 600;
}

.reelsCounts .cokbls {
	font-size: 0.7rem;
	color: #939393;
}