/* Today Live Result: custom styles layered on top of Tailwind utilities. Light theme. */

:root {
    --brand: #3b6ef6;
    --brand-soft: #dbe7ff;
    --rose: #e11d63;
    --ink: #0f172a;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    background:
        radial-gradient(60% 40% at 0% 0%, #fde7f3 0%, transparent 70%),
        radial-gradient(60% 40% at 100% 30%, #e0f2fe 0%, transparent 70%),
        radial-gradient(60% 40% at 0% 70%, #fef3c7 0%, transparent 70%),
        radial-gradient(60% 40% at 100% 100%, #ede9fe 0%, transparent 70%),
        #f8fafc;
    background-attachment: fixed;
}

/* ---------- Colour palette: one theme per game ---------- */
.c-0 { --a: #e11d48; --b: #fb7185; --soft: #fff1f2; --ink: #9f1239; }  /* rose */
.c-1 { --a: #ea580c; --b: #fbbf24; --soft: #fff7ed; --ink: #9a3412; }  /* orange */
.c-2 { --a: #ca8a04; --b: #facc15; --soft: #fefce8; --ink: #854d0e; }  /* gold */
.c-3 { --a: #059669; --b: #34d399; --soft: #ecfdf5; --ink: #065f46; }  /* emerald */
.c-4 { --a: #0891b2; --b: #22d3ee; --soft: #ecfeff; --ink: #155e75; }  /* cyan */
.c-5 { --a: #2563eb; --b: #60a5fa; --soft: #eff6ff; --ink: #1e40af; }  /* blue */
.c-6 { --a: #7c3aed; --b: #a78bfa; --soft: #f5f3ff; --ink: #5b21b6; }  /* violet */
.c-7 { --a: #c026d3; --b: #f0abfc; --soft: #fdf4ff; --ink: #86198f; }  /* fuchsia */
.c-8 { --a: #db2777; --b: #f472b6; --soft: #fdf2f8; --ink: #9d174d; }  /* pink */

.game-ink { color: var(--ink, #1e3a8a); }
.drop { text-shadow: 0 2px 6px rgba(0, 0, 0, .22); }
.grad-text {
    background: linear-gradient(90deg, #e11d48, #f97316, #7c3aed, #2563eb);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.rainbow-bar { background: linear-gradient(90deg, #e11d48, #f97316, #facc15, #10b981, #06b6d4, #3b82f6, #8b5cf6, #d946ef); }
.logo-badge { background: linear-gradient(135deg, #f43f5e, #8b5cf6); box-shadow: 0 4px 10px -4px rgba(139, 92, 246, .7); }
.notice-bar { background: linear-gradient(90deg, #f97316, #e11d48, #8b5cf6); }

.domain-strip { background: linear-gradient(135deg, #fff7ed, #fdf2f8 50%, #eef2ff); border: 1px solid #fbcfe8; }
.domain-box {
    background: #fff;
    border: 2px solid transparent;
    background-image: linear-gradient(#fff, #fff), linear-gradient(90deg, #f97316, #e11d48, #8b5cf6);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    color: #ea580c;
}

/* ---------- Hero ---------- */
.hero {
    background:
        radial-gradient(70% 50% at 10% 0%, rgba(251, 191, 36, .45) 0%, transparent 60%),
        radial-gradient(70% 60% at 100% 100%, rgba(59, 130, 246, .55) 0%, transparent 60%),
        linear-gradient(150deg, #f43f5e 0%, #db2777 35%, #9333ea 75%, #6d28d9 100%);
}
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .5) 1px, transparent 1.5px);
    background-size: 26px 26px;
    opacity: .25;
    pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }

/* ---------- Coloured game cards ---------- */
.game-card { background: #fff; border: 1px solid color-mix(in srgb, var(--a) 25%, transparent); box-shadow: 0 10px 24px -16px var(--a); }
.card-head { background: linear-gradient(135deg, var(--a), var(--b)); }
.card-body { background: var(--soft); border: 1px solid color-mix(in srgb, var(--a) 18%, transparent); }
.card-btn { background: linear-gradient(90deg, var(--a), var(--b)); }
.game-card .pill-today { background: #fff; color: var(--ink); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--a) 35%, transparent); }

/* ---------- Coloured tables ---------- */
.table-head { background: linear-gradient(90deg, #e11d48, #9333ea, #2563eb); }
.row-tint { background: color-mix(in srgb, var(--soft) 70%, #fff); }
.row-tint:hover { background: var(--soft); }
.dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 9999px; margin-right: .45rem; background: linear-gradient(135deg, var(--a), var(--b)); vertical-align: middle; }
.date-th { background: #be185d; z-index: 1; }
.chart-th { background: var(--a); color: #fff; }
td.game-ink { background-color: color-mix(in srgb, var(--soft) 55%, transparent); }

/* ---------- Market guide, FAQ, About ---------- */
.market-card { background: linear-gradient(135deg, var(--soft), #fff 70%); border: 1px solid color-mix(in srgb, var(--a) 22%, transparent); border-left: 5px solid var(--a); }
.faq { border: 1px solid color-mix(in srgb, var(--a) 22%, transparent); border-left: 5px solid var(--a); }
.faq[open] { background: var(--soft); }
.about-box { background: linear-gradient(135deg, #ecfdf5, #eff6ff 50%, #fdf4ff); border: 1px solid #c7d2fe; }
.trust { border: 1px solid color-mix(in srgb, var(--a) 25%, transparent); border-top: 4px solid var(--a); }

.ring-ball {
    position: relative;
    width: 9.5rem;
    height: 9.5rem;
    border-radius: 9999px;
    display: grid;
    place-items: center;
    background: conic-gradient(from var(--ang, 200deg), #2dd4bf, #3b6ef6, #e11d63, #facc15, #2dd4bf);
    padding: 7px;
    box-shadow: 0 18px 40px -16px rgba(59, 110, 246, .55);
    animation: ballIn .7s cubic-bezier(.2, .9, .3, 1.3) both, spinRing 6s linear infinite;
}
.ring-ball::before {
    content: "";
    position: absolute;
    inset: 7px;
    border-radius: inherit;
    background: radial-gradient(circle at 35% 30%, #ffffff 0%, #f1f5f9 70%, #e2e8f0 100%);
    box-shadow: inset 0 -6px 14px rgba(15, 23, 42, .08);
}
.ball-num {
    position: relative;
    font-family: "Noto Serif", Georgia, serif;
    font-weight: 700;
    font-size: 3.4rem;
    color: var(--ink);
    letter-spacing: .02em;
}
.live-tag {
    position: absolute;
    top: -.2rem;
    right: -1.1rem;
    z-index: 2;
    background: var(--rose);
    color: #fff;
    font: 700 .72rem/1 "Noto Serif", serif;
    letter-spacing: .12em;
    padding: .4rem .75rem;
    border-radius: 9999px;
    border: 2px solid #fff;
    box-shadow: 0 6px 14px -6px rgba(225, 29, 99, .7);
    animation: pulseTag 1.8s ease-in-out infinite;
}
.latest-item:nth-child(2) .ring-ball { animation-delay: .15s; }
.latest-item:nth-child(2) .live-tag { background: var(--brand); animation: none; }

/* ---------- Game cards ---------- */
.game-card { transition: transform .2s ease, box-shadow .2s ease; }
.game-card:hover { transform: translateY(-2px); box-shadow: 0 12px 24px -14px rgba(15, 23, 42, .25); }

.tag {
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .2rem .55rem;
    border-radius: 9999px;
}
.tag-live { background: #ffe4ef; color: var(--rose); }
.tag-old { background: #dcfce7; color: #15803d; }

.pill {
    min-width: 3.6rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: .3rem .8rem;
    border-radius: 9999px;
    font-weight: 800;
    font-size: 1.05rem;
}
.pill-today { background: #e0f2fe; color: #075985; }
.pill-old { background: #ecfdf5; color: #065f46; }

/* ---------- Status and update animations ---------- */
.wait {
    display: inline-block;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .08em;
    color: #b45309;
    background: #fef3c7;
    padding: .15rem .55rem;
    border-radius: 9999px;
}
.wait-live { animation: blink 1.2s ease-in-out infinite; }

.num-pop { display: inline-block; }
.flash .num-pop, .flash { animation: popIn .9s cubic-bezier(.2, .9, .3, 1.4); }
.flash { box-shadow: 0 0 0 0 rgba(59, 110, 246, .5); animation-name: popIn, glow; animation-duration: .9s, 1.6s; }

@keyframes popIn {
    0% { transform: scale(.4); opacity: 0; }
    60% { transform: scale(1.18); opacity: 1; }
    100% { transform: scale(1); }
}
@keyframes glow {
    0% { box-shadow: 0 0 0 0 rgba(59, 110, 246, .55); }
    100% { box-shadow: 0 0 0 14px rgba(59, 110, 246, 0); }
}
@keyframes ballIn {
    from { transform: scale(.6) rotate(-20deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}
@keyframes pulseTag {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ---------- FAQ ---------- */
.faq summary::-webkit-details-marker { display: none; }
.faq[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s ease; font-size: 1.25rem; line-height: 1; }

/* ==========================================================
   Logo and animation effects
   ========================================================== */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 200deg; }

/* Header logo */
.logo-img { background: #000; transition: transform .3s cubic-bezier(.2, .9, .3, 1.4), box-shadow .3s; }
.header-logo:hover .logo-img { transform: scale(1.08) rotate(-2deg); box-shadow: 0 6px 18px -6px rgba(249, 115, 22, .8); }

/* Logo banner: dark stage so the black logo background blends in */
.logo-banner {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 50% 35%, rgba(249, 115, 22, .35) 0%, transparent 70%),
        radial-gradient(50% 60% at 15% 100%, rgba(225, 29, 72, .35) 0%, transparent 70%),
        radial-gradient(50% 60% at 85% 100%, rgba(59, 130, 246, .35) 0%, transparent 70%),
        #05060d;
    border: 1px solid rgba(250, 204, 21, .35);
}
.logo-banner::before {           /* rotating light rays behind the logo */
    content: "";
    position: absolute;
    left: 50%; top: 42%;
    width: 160%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    background: repeating-conic-gradient(from 0deg, rgba(250, 204, 21, .10) 0 8deg, transparent 8deg 20deg);
    animation: rays 40s linear infinite;
    pointer-events: none;
}
.logo-banner > * { position: relative; }
.logo-stage { position: relative; max-width: 420px; overflow: hidden; border-radius: 1rem; }
.logo-hero {
    display: block;
    animation: logoFloat 4s ease-in-out infinite, logoGlow 3s ease-in-out infinite;
    transform-origin: 50% 60%;
}
.logo-shine {                    /* light sweep across the logo */
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%);
    transform: translateX(-120%);
    animation: shine 4.5s ease-in-out infinite 1s;
    mix-blend-mode: screen;
    pointer-events: none;
}
.logo-banner .domain-box { background-image: linear-gradient(#0b0d18, #0b0d18), linear-gradient(90deg, #f97316, #facc15, #e11d48, #8b5cf6, #f97316); background-size: 100% 100%, 300% 100%; color: #fbbf24; animation: borderFlow 6s linear infinite; text-shadow: 0 0 12px rgba(251, 191, 36, .55); }

/* Moving gradients */
.rainbow-bar, .notice-bar, .table-head { background-size: 300% 100%; animation: gradientShift 8s ease infinite; }
.notice-bar { background-image: linear-gradient(90deg, #f97316, #e11d48, #8b5cf6, #f97316); }
.grad-text { background-size: 250% 100%; animation: gradientShift 6s ease infinite; }
.hero { background-size: 100% 100%, 100% 100%, 220% 220%; animation: heroShift 12s ease-in-out infinite; }

/* Hero sparkles */
.hero > .sparkle {
    position: absolute;
    bottom: -10px;
    z-index: 0;
    width: var(--s, 4px);
    height: var(--s, 4px);
    border-radius: 50%;
    background: #fff7c2;
    box-shadow: 0 0 8px 2px rgba(255, 236, 140, .8);
    opacity: 0;
    animation: rise linear infinite;
    pointer-events: none;
}

/* Live number ball: pulsing halo */
.ring-ball::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: inherit;
    border: 3px solid rgba(255, 255, 255, .6);
    animation: halo 2.2s ease-out infinite;
    pointer-events: none;
}
.ball-num { animation: numBeat 2.2s ease-in-out infinite; }

/* Countdown and next-result bar */
#countdown { animation: tickPulse 1s ease-in-out infinite; }

/* Scroll reveal (only when JS is running, so content never stays hidden) */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2, .8, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
.js .reveal .game-card, .js .reveal .market-card, .js .reveal .faq { opacity: 0; translate: 0 18px; scale: .97; }
.js .reveal.in .game-card, .js .reveal.in .market-card, .js .reveal.in .faq {
    animation: cardIn .6s cubic-bezier(.2, .9, .3, 1.2) forwards;
    animation-delay: var(--d, 0ms);
}

/* Hover effects */
.game-card { transition: transform .25s cubic-bezier(.2, .9, .3, 1.4), box-shadow .25s; }
.game-card:hover { transform: translateY(-5px) rotate(-.4deg); box-shadow: 0 18px 30px -14px var(--a); }
.game-card:hover .card-head h3 { animation: wiggle .5s ease; }
.card-btn, .market-card, .trust { position: relative; overflow: hidden; }
.card-btn::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: -60%;
    width: 50%;
    background: linear-gradient(110deg, transparent, rgba(255, 255, 255, .55), transparent);
    transform: skewX(-20deg);
    animation: btnShine 3.5s ease-in-out infinite;
}
.market-card, .trust { transition: transform .25s ease, box-shadow .25s ease; }
.market-card:hover, .trust:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -16px var(--a); }
.row-tint { transition: background-color .2s ease, transform .2s ease; }
.row-tint:hover { transform: translateX(3px); }
.row-tint:hover .dot { animation: dotPop .5s ease; }
.faq summary { transition: color .2s; }
.faq summary:hover { color: var(--ink); }

/* Keyframes */
@keyframes spinRing { to { --ang: 560deg; } }
@keyframes rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes logoFloat { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-6px) scale(1.015); } }
@keyframes logoGlow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(249, 115, 22, 0)); } 50% { filter: drop-shadow(0 0 14px rgba(249, 115, 22, .55)); } }
@keyframes shine { 0% { transform: translateX(-120%); } 45%, 100% { transform: translateX(120%); } }
@keyframes borderFlow { to { background-position: 0 0, 300% 0; } }
@keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes heroShift { 0%, 100% { background-position: 0 0, 0 0, 0% 30%; } 50% { background-position: 0 0, 0 0, 100% 70%; } }
@keyframes rise {
    0% { transform: translateY(0) scale(.6); opacity: 0; }
    15% { opacity: .9; }
    85% { opacity: .7; }
    100% { transform: translateY(-560px) translateX(20px) scale(1.1); opacity: 0; }
}
@keyframes halo { 0% { transform: scale(1); opacity: .8; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes numBeat { 0%, 100% { transform: scale(1); } 12% { transform: scale(1.07); } 24% { transform: scale(1); } }
@keyframes tickPulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
@keyframes cardIn { to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
@keyframes btnShine { 0% { left: -60%; } 40%, 100% { left: 130%; } }
@keyframes dotPop { 50% { transform: scale(1.8); } }

/* ---------- Small screens ---------- */
@media (max-width: 380px) {
    .ring-ball { width: 8rem; height: 8rem; }
    .ball-num { font-size: 2.8rem; }
    .pill { min-width: 3rem; padding: .25rem .6rem; font-size: .95rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
    .js .reveal, .js .reveal .game-card, .js .reveal .market-card, .js .reveal .faq { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; }
    .logo-shine, .hero > .sparkle { display: none; }
}