/* ================================
   GLOBAL RESET & VARIABLES
================================ */
:root{
    --glass-bg: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.15);
    --gold:#facc15;
    --gold-light:#fde047;
    --green:#22c55e;
    --red:#ef4444;
    --dark:#020617;
    --dark-soft:#0f172a;
    --text:#e5e7eb;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,body{
    width:100%;
    min-height:100%;
    font-family:'Inter','Segoe UI',sans-serif;
    color:var(--text);
    overflow-x:hidden;
}

/* ================================
   ATTRACTIVE BACKGROUND
================================ */
body{
    background:
      radial-gradient(circle at 15% 20%, #7c3aed 0%, transparent 40%),
      radial-gradient(circle at 80% 10%, #06b6d4 0%, transparent 35%),
      radial-gradient(circle at 50% 85%, #facc15 0%, transparent 40%),
      linear-gradient(180deg, var(--dark), var(--dark));
}

/* ================================
   NAVBAR
================================ */
.navbar{
    background:linear-gradient(90deg,#020617,#111827);
    padding:.8rem 1rem;
}
.navbar-brand{
    font-weight:900;
    color:var(--gold)!important;
    letter-spacing:1px;
}
.btn-history{
    background:linear-gradient(135deg,var(--gold),var(--gold-light));
    color:#020617;
    border:none;
    font-weight:800;
    border-radius:14px;
    padding:6px 14px;
    transition:.3s ease;
}
.btn-history:hover{
    transform:translateY(-2px) scale(1.03);
    box-shadow:0 10px 25px rgba(250,204,21,.6);
}

/* ================================
   LOGO
================================ */
.logo-box{
    display: flex;
    justify-content: center;
    /*padding:20px 0;*/
}
.logo-box img{
    width: 600px;
    height: 220px;
    /*background:white;*/
    /*padding:8px;*/
    /*border-radius:10px;*/
    /*box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);*/
    transition: transform 0.3s ease;
}

/* ================================
   RESULT CARD (GLASS)
================================ */
.result-card{
    backdrop-filter:blur(16px);
    background:var(--glass-bg);
    border:1px solid var(--glass-border);
    border-radius:22px;
    box-shadow:
      0 25px 50px rgba(0,0,0,.6),
      inset 0 0 30px rgba(255,255,255,.05);
    animation:cardEnter .8s ease forwards;
    overflow:hidden;
}

/* ================================
   DATE HEADER
================================ */
.result-header{
    background:linear-gradient(90deg,var(--gold),var(--gold-light),var(--gold));
    color:#020617;
    font-weight:900;
    letter-spacing:1px;
    padding:10px;
    text-align:center;
}

/* ================================
   RESULT TABLE
================================ */
.result-table{
    margin:0;
}
.result-table td{
    background:transparent;
    border-bottom:1px solid rgba(255,255,255,.08);
    padding:16px;
    font-size:18px;
    font-weight:700;
    text-align:center;
    animation:rowFade .5s ease forwards;
}
.result-table td:first-child{
    color:var(--gold-light);
}
.result-table td:last-child{
    color:#38bdf8;
}

/* ================================
   LIVE BADGE (PULSE)
================================ */
.live-badge{
    background:var(--red);
    color:#fff;
    padding:6px 16px;
    border-radius:999px;
    font-weight:900;
    animation:pulse 1.2s infinite;
    box-shadow:0 0 18px rgba(239,68,68,.9);
}

@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(239,68,68,.8)}
    70%{box-shadow:0 0 0 18px rgba(239,68,68,0)}
    100%{box-shadow:0 0 0 0 rgba(239,68,68,0)}
}

/* ================================
   WINNER NUMBER
================================ */
.winner-number{
    color:var(--green)!important;
    font-size:24px;
    font-weight:900;
    animation:winnerPop .6s ease;
}

/* ================================
   HISTORY CARD
================================ */
.history-box{
    display:none;
    margin-top:24px;
    backdrop-filter:blur(14px);
    background:rgba(2,6,23,.8);
    border-radius:20px;
    border:1px solid rgba(255,255,255,.1);
    padding:16px;
    animation:fadeUp .6s ease forwards;
}

/* ================================
   DATATABLE OVERRIDE
================================ */
table.dataTable{
    background:transparent!important;
    color:var(--text);
}
table.dataTable thead{
    background:var(--dark-soft);
}
table.dataTable th,
table.dataTable td{
    color:var(--text);
}
table.table-bordered.dataTable thead tr:first-child th, table.table-bordered.dataTable thead tr:first-child td,
table.table-bordered.dataTable th, table.table-bordered.dataTable td {
     color:black;
}

/* ================================
   ANIMATIONS
================================ */
@keyframes cardEnter{
    from{opacity:0;transform:translateY(40px) scale(.95)}
    to{opacity:1;transform:none}
}
@keyframes rowFade{
    from{opacity:0;transform:translateY(20px)}
    to{opacity:1;transform:none}
}
@keyframes winnerPop{
    0%{opacity:0;transform:scale(.5)}
    70%{transform:scale(1.2)}
    100%{opacity:1;transform:scale(1)}
}
@keyframes fadeUp{
    from{opacity:0;transform:translateY(30px)}
    to{opacity:1;transform:none}
}

/* ================================
   MOBILE RESPONSIVE
================================ */
@media(max-width:768px){
    /*.logo-box img{max-width:160px}*/
    .result-table td{font-size:16px;padding:12px}
}

@media(max-width:576px){
    .navbar-brand{font-size:18px}
    .btn-history{padding:5px 10px;font-size:13px}
    .result-table td{font-size:15px}
}