:root {
   --brand-red: #b9162a;
   --brand-red-dark: #7d0718;
   --brand-gold: #f4a33f;
   --brand-ink: #25151a;
   --brand-muted: #6c5b61;
   --brand-line: #f1d4c5;
   --brand-soft: #fff7f2;
}

html {
   scroll-behavior: smooth;
}

* {
   -webkit-overflow-scrolling: touch;
}

body.index-page {
   background:
      radial-gradient(circle at 15% 10%, rgba(244, 163, 63, 0.22), transparent 28%),
      radial-gradient(circle at 85% 20%, rgba(185, 22, 42, 0.18), transparent 30%),
      linear-gradient(180deg, #fffaf7 0%, #fff1e8 45%, #fffaf7 100%);
   background-attachment: scroll;
}

.header {
   background: rgba(255, 255, 255, 0.96);
   border-bottom: 1px solid rgba(185, 22, 42, 0.12);
   backdrop-filter: blur(10px);
}

.header .logo img,
.footer .footer-about .logo img {
   width: 42px;
   height: 42px;
   object-fit: contain;
   margin-right: 10px;
}

.header .logo h1 {
   color: var(--brand-ink);
   font-size: 24px;
   font-weight: 800;
}

.navmenu a,
.navmenu a:focus {
   color: var(--brand-ink);
   font-weight: 700;
}

.navmenu ul {
   align-items: center;
}

.navmenu li {
   white-space: nowrap;
}

.mobile-menu-btn {
   width: 42px;
   height: 42px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 1px solid rgba(185, 22, 42, 0.22);
   border-radius: 8px;
   color: var(--brand-red);
   background: #fff;
   font-size: 24px;
}

.mobile-sidebar {
   background: var(--brand-ink);
}

.sidebar-logo {
   width: 34px;
   height: 34px;
   object-fit: contain;
}

.home-banner {
   position: relative;
   padding: 42px 0 26px;
   background:
      linear-gradient(135deg, rgba(125, 7, 24, 0.08), rgba(244, 163, 63, 0.14)),
      linear-gradient(180deg, #fff 0%, var(--brand-soft) 100%);
   overflow: hidden;
}

.casino-symbol {
   position: absolute;
   z-index: 0;
   color: rgba(125, 7, 24, 0.08);
   font-weight: 900;
   line-height: 1;
   pointer-events: none;
   text-shadow: 0 0 18px rgba(244, 163, 63, 0.22);
   animation: symbolDrift 8s ease-in-out infinite;
}

.symbol-left {
   left: 4%;
   top: 24px;
   font-size: 82px;
}

.symbol-right {
   right: 3%;
   bottom: 18px;
   font-size: 42px;
   animation-delay: 1.2s;
}

.home-banner .container {
   position: relative;
   z-index: 1;
}

.banner-card {
   position: relative;
   overflow: hidden;
   border: 2px solid rgba(244, 163, 63, 0.65);
   border-radius: 8px;
   box-shadow: 0 18px 42px rgba(125, 7, 24, 0.18), 0 0 34px rgba(244, 163, 63, 0.24);
   background: #fff;
   animation: casinoFloat 6s ease-in-out infinite;
}

.banner-card:after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(110deg, transparent 0%, rgba(255, 255, 255, 0.5) 45%, transparent 60%);
   transform: translateX(-120%);
   animation: shineSweep 5.5s ease-in-out infinite;
}

.banner-img {
   width: 100%;
   height: auto;
   display: block;
}

.banner-copy h1 {
   margin: 0;
   color: var(--brand-red-dark);
   font-size: 42px;
   line-height: 1.12;
   font-weight: 900;
   text-shadow: 0 2px 0 #ffe3bd, 0 0 22px rgba(244, 163, 63, 0.42);
   animation: titlePulse 4s ease-in-out infinite;
}

.banner-copy p {
   margin: 10px 0 0;
   color: var(--brand-muted);
   font-size: 18px;
   font-weight: 600;
}

.casino-badge {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-bottom: 12px;
   padding: 8px 14px;
   border: 1px solid rgba(244, 163, 63, 0.75);
   border-radius: 999px;
   color: #fff;
   background: linear-gradient(90deg, var(--brand-red-dark), var(--brand-red), var(--brand-gold));
   font-weight: 900;
   box-shadow: 0 10px 24px rgba(125, 7, 24, 0.2);
   animation: badgeDance 3.4s ease-in-out infinite;
}

.casino-badge img {
   width: 28px;
   height: 28px;
   object-fit: contain;
}

.results-section {
   padding: 42px 0 70px;
   overflow: hidden;
}

.results-section:before {
   background: rgba(255, 250, 247, 0.9);
}

.results-section .results-bg {
   opacity: 0.18;
}

.casino-ribbon {
   position: absolute;
   top: 12px;
   right: 18px;
   z-index: 4;
   width: auto;
   padding: 8px 14px;
   border: 1px solid rgba(255, 255, 255, 0.7);
   border-radius: 999px;
   color: var(--brand-red-dark);
   background: linear-gradient(90deg, #fff 0%, #ffe2ad 100%);
   text-align: center;
   font-size: 12px;
   font-weight: 900;
   transform: none;
   box-shadow: 0 10px 24px rgba(125, 7, 24, 0.14);
   white-space: nowrap;
}

.result-card {
   height: 100%;
   overflow: hidden;
   border: 1px solid var(--brand-line);
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.94);
   box-shadow: 0 12px 30px rgba(37, 21, 26, 0.08);
}

.live-card {
   position: relative;
   border: 2px solid var(--brand-red);
   box-shadow: 0 22px 54px rgba(125, 7, 24, 0.26), 0 0 38px rgba(244, 163, 63, 0.34);
   animation: livePulse 4s ease-in-out infinite;
}

.live-card:before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   border-radius: 8px;
   box-shadow: inset 0 0 0 3px rgba(244, 163, 63, 0.18);
}

.result-card-title {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 16px;
   color: var(--brand-red-dark);
   font-weight: 800;
   border-bottom: 1px solid var(--brand-line);
   background: #fff;
}

.live-card .result-card-title {
   color: #fff;
   border-bottom: 0;
   background: linear-gradient(90deg, #5d0612 0%, var(--brand-red-dark) 100%);
   font-size: 18px;
   text-transform: uppercase;
   letter-spacing: 0;
}

#liveGif {
   position: static;
   inset: auto;
   display: block;
   z-index: auto;
   width: 42px;
   height: 42px;
   object-fit: contain;
   flex: 0 0 auto;
   animation: liveBounce 2.4s ease-in-out infinite;
}

.result-table-wrap {
   width: 100%;
   overflow: visible !important;
}

table.result-table {
   table-layout: fixed;
   border-collapse: collapse;
   width: 100%;
   min-width: 0;
   margin: 0;
   text-align: center;
   font-weight: 800;
}

.result-table.table {
   border: 0 !important;
}

.result-table .date {
   background: linear-gradient(90deg, var(--brand-gold) 0%, var(--brand-red) 100%);
   color: #fff;
   font-size: 1.25rem;
   letter-spacing: 0;
   padding: 0.65rem 0.5rem;
   white-space: normal;
}

.live-card .result-table .date {
   background: linear-gradient(90deg, var(--brand-gold) 0%, #ffcf77 48%, var(--brand-gold) 100%);
   color: var(--brand-red-dark);
   font-size: 1.45rem;
}

.live-card .result-table .slot td {
   background: #fff0e7;
}

.live-card .result-table .result td {
   background: #fff;
}

.live-card .result-table #number,
.live-card .result-table .number {
   color: var(--brand-red-dark);
   width: auto;
   min-width: 3ch;
   max-width: 3ch;
   font-size: 1.34rem;
   font-weight: 900;
   white-space: normal;
   word-break: normal;
   overflow-wrap: normal;
   line-break: strict;
   animation: numberPop 3s ease-in-out infinite;
}

.previous-results .result-card {
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.previous-results .result-card:hover {
   transform: translateY(-4px);
   border-color: rgba(244, 163, 63, 0.75);
   box-shadow: 0 18px 36px rgba(125, 7, 24, 0.16);
}

.result-table .slot td {
   padding: 0.42rem 0.2rem;
   background: #fff8f3;
   overflow: hidden;
}

.result-table .slot td span {
   color: var(--brand-red);
   font-size: 12px;
   line-height: 1.2;
   margin: 0;
   padding: 0;
}

.result-table .result td {
   color: #63000c;
   padding: 0.55rem 0.2rem;
   white-space: normal;
   vertical-align: middle;
   overflow: hidden;
}

.result-table .result td span {
   text-align: center;
}

.result-table #number,
.result-table .number {
   display: inline-block;
   max-width: 100%;
   font-size: 1.2rem;
   line-height: 1.2;
   overflow-wrap: anywhere;
}

.result-table #equal,
.result-table .equal {
   font-size: 1rem;
   line-height: 1.2;
   color: var(--brand-red) !important;
}

.section-heading {
   margin: 0;
   color: var(--brand-ink);
   text-align: center;
   font-size: 28px;
   font-weight: 800;
}

.section-heading:after {
   content: "";
   display: block;
   width: 90px;
   height: 3px;
   margin: 12px auto 0;
   border-radius: 999px;
   background: linear-gradient(90deg, var(--brand-gold), var(--brand-red));
}

.previous-results {
   align-items: stretch;
}

.footer {
   background: #fff;
}

.footer .footer-about .logo span {
   color: var(--brand-ink);
}

.footer .copyright {
   background: var(--brand-red-dark);
   color: #fff;
}

.footer .copyright a,
.footer .credits a {
   color: #ffe1c8;
}

.page-hero {
   position: relative;
   overflow: hidden;
   padding: 54px 0 30px;
   background:
      radial-gradient(circle at 12% 20%, rgba(244, 163, 63, 0.26), transparent 24%),
      radial-gradient(circle at 88% 15%, rgba(185, 22, 42, 0.18), transparent 26%),
      linear-gradient(180deg, #fff 0%, var(--brand-soft) 100%);
   text-align: center;
}

.page-hero h1 {
   margin: 0;
   color: var(--brand-red-dark);
   font-size: 40px;
   font-weight: 900;
   text-shadow: 0 2px 0 #ffe3bd, 0 0 20px rgba(244, 163, 63, 0.36);
   animation: titlePulse 4s ease-in-out infinite;
}

.page-subtitle {
   max-width: 760px;
   margin: 12px auto 0;
   color: var(--brand-muted);
   font-size: 17px;
   font-weight: 700;
}

.page-badge {
   margin-bottom: 16px;
}

.page-symbol-left {
   left: 5%;
   top: 26px;
   font-size: 74px;
}

.page-symbol-right {
   right: 7%;
   bottom: 20px;
   font-size: 58px;
   animation-delay: 1s;
}

.page-content-section {
   position: relative;
   padding: 36px 0 68px;
   background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(255, 244, 235, 0.9)),
      radial-gradient(circle at 50% 0%, rgba(244, 163, 63, 0.16), transparent 35%);
   overflow: hidden;
}

.page-feature-img {
   display: block;
   width: 100%;
   max-height: 360px;
   object-fit: cover;
   border-radius: 8px;
   margin-bottom: 24px;
}

.page-content {
   color: var(--brand-ink);
   font-size: 17px;
   line-height: 1.75;
   max-width: 980px;
   margin: 0 auto;
}

.page-shell {
   position: relative;
   max-width: 1040px;
   margin: 0 auto;
   padding: 30px;
   border: 1px solid rgba(244, 163, 63, 0.52);
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.94);
   box-shadow: 0 18px 44px rgba(125, 7, 24, 0.12), 0 0 30px rgba(244, 163, 63, 0.18);
}

.page-shell:before {
   content: "";
   position: absolute;
   inset: 0;
   pointer-events: none;
   border-radius: 8px;
   box-shadow: inset 0 0 0 3px rgba(244, 163, 63, 0.12);
}

.page-shell:after {
   content: "★";
   position: absolute;
   top: -18px;
   right: 24px;
   width: 42px;
   height: 42px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   color: var(--brand-red-dark);
   background: linear-gradient(180deg, #ffe8b8, var(--brand-gold));
   box-shadow: 0 8px 18px rgba(125, 7, 24, 0.18);
   animation: liveBounce 2.8s ease-in-out infinite;
}

.page-content h2,
.page-content h3,
.page-content h4 {
   color: var(--brand-ink);
   font-weight: 800;
}

.page-content h2 {
   margin-top: 0;
   font-size: 30px;
   padding-bottom: 10px;
   border-bottom: 3px solid rgba(244, 163, 63, 0.45);
}

.page-content h3 {
   margin-top: 26px;
   font-size: 22px;
}

.page-content p {
   margin-bottom: 14px;
}

.page-content ul {
   padding-left: 22px;
   margin-bottom: 18px;
}

.page-content li {
   margin-bottom: 8px;
}

.page-content li::marker {
   color: var(--brand-red);
}

.page-content a,
.page-action {
   color: var(--brand-red-dark);
   font-weight: 800;
}

.contact-panel {
   max-width: 980px;
   margin: 30px auto 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   padding: 22px;
   border: 1px solid rgba(244, 163, 63, 0.55);
   border-radius: 8px;
   background: linear-gradient(90deg, #fff8f1, #fff);
   box-shadow: 0 14px 28px rgba(125, 7, 24, 0.1);
}

.page-ribbon {
   top: 18px;
   right: 26px;
}

.home-info-sections {
   margin-top: 54px;
}

.home-info-panel {
   display: grid;
   grid-template-columns: 1fr auto;
   gap: 28px;
   align-items: center;
   margin-bottom: 28px;
   padding: 28px;
   border: 1px solid rgba(244, 163, 63, 0.58);
   border-radius: 8px;
   background: linear-gradient(135deg, #fff 0%, #fff2e7 100%);
   box-shadow: 0 18px 40px rgba(125, 7, 24, 0.12);
}

.info-kicker {
   display: inline-block;
   margin-bottom: 10px;
   color: var(--brand-red);
   font-size: 13px;
   font-weight: 900;
   text-transform: uppercase;
}

.home-info-panel h2,
.home-faq-section h2 {
   margin: 0 0 12px;
   color: var(--brand-red-dark);
   font-size: 30px;
   font-weight: 900;
}

.home-info-panel p,
.home-feature-card p,
.home-faq-section p {
   margin: 0;
   color: var(--brand-muted);
}

.info-stats {
   display: grid;
   grid-template-columns: repeat(3, 112px);
   gap: 12px;
}

.info-stats div {
   padding: 16px 10px;
   border-radius: 8px;
   color: #fff;
   text-align: center;
   background: linear-gradient(180deg, var(--brand-red), var(--brand-red-dark));
   box-shadow: 0 10px 22px rgba(125, 7, 24, 0.18);
}

.info-stats strong {
   display: block;
   font-size: 24px;
   line-height: 1;
}

.info-stats span {
   display: block;
   margin-top: 7px;
   font-size: 12px;
   font-weight: 800;
}

.home-feature-card,
.home-faq-section {
   height: 100%;
   padding: 24px;
   border: 1px solid rgba(244, 163, 63, 0.48);
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.95);
   box-shadow: 0 14px 30px rgba(125, 7, 24, 0.1);
}

.home-feature-card {
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.home-feature-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 20px 38px rgba(125, 7, 24, 0.16);
}

.feature-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 58px;
   height: 42px;
   margin-bottom: 16px;
   padding: 0 12px;
   border-radius: 999px;
   color: #fff;
   background: linear-gradient(90deg, var(--brand-red-dark), var(--brand-red), var(--brand-gold));
   font-size: 14px;
   font-weight: 900;
   animation: badgeDance 3.4s ease-in-out infinite;
}

.home-feature-card h3,
.home-faq-section h3 {
   margin: 0 0 10px;
   color: var(--brand-ink);
   font-size: 20px;
   font-weight: 900;
}

.home-faq-section {
   height: auto;
   margin-top: 28px;
}

.faq-grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 18px;
}

.faq-grid > div {
   padding: 18px;
   border-radius: 8px;
   background: #fff8f1;
}

.blog-list-section .row {
   align-items: stretch;
}

.blog-card {
   height: 100%;
   overflow: hidden;
   border: 1px solid rgba(244, 163, 63, 0.52);
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 16px 34px rgba(125, 7, 24, 0.12);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card:hover {
   transform: translateY(-5px);
   box-shadow: 0 22px 44px rgba(125, 7, 24, 0.18);
}

.blog-card img {
   width: 100%;
   height: 190px;
   object-fit: cover;
}

.blog-card-body {
   padding: 22px;
}

.blog-card-body span {
   display: inline-block;
   margin-bottom: 10px;
   color: var(--brand-red);
   font-size: 12px;
   font-weight: 900;
   text-transform: uppercase;
}

.blog-card-body h2 {
   margin: 0 0 10px;
   font-size: 22px;
   line-height: 1.25;
   font-weight: 900;
}

.blog-card-body h2 a {
   color: var(--brand-ink);
   text-decoration: none;
}

.blog-card-body p {
   min-height: 76px;
   margin-bottom: 18px;
   color: var(--brand-muted);
}

.tips-alert {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 18px;
   margin-bottom: 26px;
   padding: 18px 22px;
   border: 1px solid rgba(244, 163, 63, 0.65);
   border-radius: 8px;
   color: var(--brand-red-dark);
   background: linear-gradient(90deg, #fff, #ffe7ba);
   box-shadow: 0 14px 30px rgba(125, 7, 24, 0.12);
}

.tips-alert strong {
   font-size: 24px;
   font-weight: 900;
}

.tips-alert span {
   font-weight: 800;
}

.tip-card {
   position: relative;
   height: 100%;
   overflow: hidden;
   padding: 22px;
   border: 2px solid rgba(244, 163, 63, 0.72);
   border-radius: 8px;
   background:
      radial-gradient(circle at 80% 10%, rgba(244, 163, 63, 0.22), transparent 28%),
      linear-gradient(180deg, #fff 0%, #fff4ea 100%);
   box-shadow: 0 18px 40px rgba(125, 7, 24, 0.15);
   transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.tip-card:hover {
   transform: translateY(-6px) rotate(-0.5deg);
   box-shadow: 0 24px 50px rgba(125, 7, 24, 0.22);
}

.tip-card:after {
   content: "★";
   position: absolute;
   top: 12px;
   right: 14px;
   color: rgba(185, 22, 42, 0.18);
   font-size: 52px;
   line-height: 1;
}

.tip-card-top {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 10px;
   margin-bottom: 16px;
}

.tip-card-top span,
.tip-card-top strong {
   position: relative;
   z-index: 1;
   display: inline-flex;
   align-items: center;
   min-height: 30px;
   padding: 5px 10px;
   border-radius: 999px;
   font-size: 12px;
   font-weight: 900;
}

.tip-card-top span {
   color: var(--brand-red-dark);
   background: #ffe3b3;
}

.tip-card-top strong {
   color: #fff;
   background: linear-gradient(90deg, var(--brand-red-dark), var(--brand-red));
}

.tip-number {
   position: relative;
   z-index: 1;
   margin-bottom: 14px;
   color: var(--brand-red-dark);
   font-size: 48px;
   line-height: 1;
   font-weight: 900;
   text-shadow: 0 0 16px rgba(244, 163, 63, 0.65);
   animation: numberPop 3s ease-in-out infinite;
}

.tip-card p {
   position: relative;
   z-index: 1;
   color: var(--brand-muted);
   font-weight: 700;
}

.tip-card small {
   position: relative;
   z-index: 1;
   color: var(--brand-red);
   font-weight: 900;
}

.tips-table-card {
   overflow: hidden;
   border: 2px solid rgba(244, 163, 63, 0.72);
   border-radius: 8px;
   background: rgba(255, 255, 255, 0.96);
   box-shadow: 0 18px 42px rgba(125, 7, 24, 0.14);
}

.tips-table {
   margin: 0;
   vertical-align: middle;
}

.tips-table thead th {
   color: #fff;
   background: linear-gradient(90deg, var(--brand-red-dark), var(--brand-red));
   border-color: rgba(255, 255, 255, 0.18);
   white-space: nowrap;
}

.tips-table tbody td {
   color: var(--brand-ink);
   font-weight: 700;
}

.tips-number,
.actual-number {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-width: 54px;
   min-height: 36px;
   padding: 4px 10px;
   border-radius: 8px;
   font-size: 20px;
   font-weight: 900;
}

.tips-number {
   color: var(--brand-red-dark);
   background: #ffe6bd;
}

.actual-number {
   color: #fff;
   background: var(--brand-ink);
}

.pending-result {
   color: var(--brand-muted);
   font-weight: 800;
}

.match-badge,
.watch-badge {
   display: inline-flex;
   align-items: center;
   min-height: 30px;
   padding: 4px 10px;
   border-radius: 999px;
   color: #fff;
   font-size: 12px;
   font-weight: 900;
   text-transform: uppercase;
}

.match-badge {
   background: linear-gradient(90deg, #0f8f4d, #18bd68);
}

.watch-badge {
   background: linear-gradient(90deg, var(--brand-red), var(--brand-gold));
}

.tip-match-row td {
   background: #fff1d6 !important;
   box-shadow: inset 0 1px 0 rgba(244, 163, 63, 0.34), inset 0 -1px 0 rgba(244, 163, 63, 0.34);
}

.matched-number {
   color: #fff;
   background: linear-gradient(90deg, #0f8f4d, #18bd68);
   animation: numberPop 3s ease-in-out infinite;
}

.contact-panel h3 {
   margin: 0 0 6px;
   color: var(--brand-red-dark);
}

.contact-panel p {
   margin: 0;
}

.page-action {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-height: 42px;
   padding: 8px 16px;
   border-radius: 8px;
   color: #fff;
   background: linear-gradient(90deg, var(--brand-red-dark), var(--brand-red));
   text-decoration: none;
   white-space: nowrap;
}

@keyframes pageGlow {
   from {
      background-position: 0 0, 100% 0, 0 0;
   }
   to {
      background-position: 30px 20px, calc(100% - 30px) 35px, 0 0;
   }
}

@keyframes casinoFloat {
   0%, 100% {
      transform: translateY(0);
   }
   50% {
      transform: translateY(-6px);
   }
}

@keyframes shineSweep {
   0%, 42% {
      transform: translateX(-120%);
   }
   70%, 100% {
      transform: translateX(120%);
   }
}

@keyframes titlePulse {
   0%, 100% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.025);
   }
}

@keyframes badgeDance {
   0%, 100% {
      transform: rotate(-1deg) translateY(0);
   }
   50% {
      transform: rotate(1deg) translateY(-3px);
   }
}

@keyframes livePulse {
   0%, 100% {
      transform: scale(1);
   }
   50% {
      transform: scale(1.01);
   }
}

@keyframes liveBounce {
   0%, 100% {
      transform: translateY(0) rotate(-4deg);
   }
   50% {
      transform: translateY(-4px) rotate(4deg);
   }
}

@keyframes numberPop {
   0%, 100% {
      text-shadow: 0 0 0 rgba(244, 163, 63, 0);
   }
   50% {
      text-shadow: 0 0 14px rgba(244, 163, 63, 0.8);
   }
}

@keyframes symbolDrift {
   0%, 100% {
      transform: translateY(0) rotate(-3deg);
   }
   50% {
      transform: translateY(-10px) rotate(3deg);
   }
}

@media (prefers-reduced-motion: reduce) {
   html {
      scroll-behavior: auto;
   }

   *,
   *:before,
   *:after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
   }
}

@media (max-width: 767px) {
   .banner-card,
   .banner-copy h1,
   .casino-badge,
   .casino-symbol,
   .live-card,
   #liveGif,
   .feature-icon,
   .page-shell:after,
   .tip-number,
   .matched-number {
      animation: none !important;
   }
}

@media only screen and (max-width: 991px) {
   .home-banner {
      padding-top: 30px;
   }

   .banner-copy h1 {
      font-size: 34px;
   }

   .results-section {
      padding: 34px 0 54px;
   }
}

@media only screen and (max-width: 767px) {
   .header .logo h1 {
      font-size: 18px;
   }

   .header .logo img {
      width: 36px;
      height: 36px;
   }

   .banner-copy h1 {
      font-size: 29px;
   }

   .casino-badge {
      gap: 7px;
      font-size: 13px;
      padding: 7px 10px;
   }

   .casino-badge img {
      width: 22px;
      height: 22px;
   }

   .casino-symbol {
      display: none;
   }

   .casino-ribbon {
      top: 8px;
      right: 10px;
      width: auto;
      padding: 6px 10px;
      font-size: 10px;
   }

   .banner-copy p {
      font-size: 16px;
   }

   .result-table .date {
      font-size: 1.25rem;
   }

   .result-table #number,
   .result-table .number {
      font-size: 1.35rem;
   }

   .result-table .slot td span {
      font-size: 14px;
   }

   .result-table #equal,
   .result-table .equal {
      font-size: 1.2rem;
   }

   .page-hero h1 {
      font-size: 31px;
   }

   .page-subtitle {
      font-size: 15px;
   }

   .page-symbol-left,
   .page-symbol-right {
      display: none;
   }

   .page-shell {
      padding: 22px 16px;
   }

   .page-ribbon {
      position: static;
      display: inline-block;
      margin: 0 0 16px 12px;
   }

   .home-info-panel {
      grid-template-columns: 1fr;
      padding: 22px 16px;
   }

   .info-stats,
   .faq-grid {
      grid-template-columns: 1fr;
   }

   .home-info-panel h2,
   .home-faq-section h2 {
      font-size: 25px;
   }

   .contact-panel {
      display: block;
   }

   .page-action {
      margin-top: 16px;
      width: 100%;
   }
}

@media only screen and (max-width: 420px) {
   .header .logo h1 {
      max-width: 210px;
      font-size: 16px;
      line-height: 1.2;
   }

   .home-banner {
      padding-top: 22px;
   }

   .banner-card {
      border-radius: 6px;
   }

   .banner-copy h1 {
      font-size: 25px;
   }

   .section-heading {
      font-size: 24px;
   }

   .result-table .slot td span {
      font-size: 12px;
   }

   .result-table .date {
      font-size: 1.08rem;
      padding: 0.5rem 0.25rem;
   }

   .result-table #number,
   .result-table .number {
      font-size: 1.08rem;
   }

   .result-table #equal,
   .result-table .equal {
      font-size: 1rem;
   }
}