/* Reference-inspired theme (satta-king-fix-no.in style)

   Goal: match the color/UI feel while keeping existing PHP backend outputs intact. */



   :root{

    --ref-yellow:#ff0;

    --ref-blue:#006EF5;

    --ref-blue-dark:#0053b8;

    --ref-maroon:#a50438;

    --ref-border:#903;

    --ref-red:#ff151d;

    --ref-green:#28a745;

    --ref-black:#000;

    --ref-white:#fff;

  }

  

  html, body{

    background: var(--ref-white);

    color: var(--ref-black);

  }

  

  /* Persist preview change: tighter global line-height on themed pages */

  body.bg-white{

    line-height:20px;

  }

  

  /* Persist preview change: compact footer spacing */

  footer.px-6{

    margin-top:10px !important;

    padding:10px 14px 18px !important;

  }

  

  /* Top navigation table */

  table.top-link{

    width:100%;

    border-collapse: collapse;

  }

  .top-link td{

    padding:6px 5px;

    text-align:center;

  vertical-align:middle;

    border:2px solid var(--ref-white);

    background: var(--ref-blue);

    color: var(--ref-white);

    font-weight:800;

    text-transform:uppercase;

    letter-spacing:.02em;

  }

  .top-link td:first-child{

    width:12%;

    background:red;

  }

  .top-link a{

    color:var(--ref-white);

    text-decoration:none;

  display:flex;

  align-items:center;

  justify-content:center;

  height:100%;

  }

  .top-link img{

    width:45px;

    height:45px;

  display:block;

    object-fit:contain;

  }

  

  /* Marquee bar */

  .marke-box{

    background: var(--ref-maroon);

    padding:12px;

    margin:1px 2px;

    font-weight:800;

    color:var(--ref-white);

    text-transform:uppercase;

    letter-spacing:.04em;

  }

  

  /* Yellow logo title bar */

  .logo{

    text-align:center;

    background: var(--ref-yellow);

    margin:6px 5px;

    border:2px solid rgba(0,0,0,.1);

  }

  .logo h1{

    margin:0;

    padding:10px 8px;

    font-size:18px;

    font-weight:900;

    letter-spacing:.02em;

  }

  

  /* Section boxes similar to "leakb" blocks */

  .leakb{

    margin:8px 5px;

    border:2px solid var(--ref-border);

    background:#000;

    color:#fff;

    text-align:center;

    padding:12px;

  }

  .leakb.ref-yellow{

    background: var(--ref-yellow);

    color: #000;

  }

  .leakajjki{

    font-weight:900;

    font-size:18px;

    margin:0 0 6px 0;

  }

  .leakajjkisml{

    font-weight:900;

    font-size:14px;

    margin:0 0 6px 0;

  }

  .white{ color:#fff; }

  .red{ color: var(--ref-red); }

  

  /* Buttons */

  .buttonb{

    border:0;

    padding:12px 16px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.08em;

    cursor:pointer;

    border-radius:4px;

    min-width:180px;

    display:inline-block;

    text-decoration:none;

    text-align:center;

  }

  .bgred{ background: var(--ref-red); color: #fff; }

  .bggreen{ background: var(--ref-green); color: #fff; }

  .bgblue{ background: var(--ref-blue); color:#fff; }

  .bgyellow{ background: var(--ref-yellow); color:#000; border:3px solid var(--ref-yellow); }

  .buttonb:active{ transform: scale(.99); }

  

  /* Headings used in results sections */

  .result-heading{

    background: var(--ref-blue-dark);

    text-align:center;

    font-size:20px;

    border:1px solid var(--ref-blue);

    padding:15px 0;

    margin:8px 5px 0 5px;

  }

  .result-heading a{

    color:var(--ref-white);

    font-weight:900;

    text-decoration:none;

    font-size:22px;

  }

  

  .result-heading p{

    color:#fff;

    font-size:13px;

    font-weight:900;

    margin:4px 0 0 0;

    letter-spacing:.06em;

    text-transform:uppercase;

  }

  

  .resultmain{

    background-color:#fff;

    width:calc(100% - 10px);

    margin:0 5px;

    text-align:center;

    border-left:1px solid var(--ref-blue);

    border-right:1px solid var(--ref-blue);

    border-bottom:1px solid var(--ref-blue);

    padding:14px 10px 18px 10px;

  }

  .resultmaintime{

    color:#cf065a;

    font-size:24px;

    font-weight:900;

    margin:0 0 6px 0;

  }

  .resultmaintoday{

    font-weight:900;

    color:#000;

    font-size:20px;

    margin:0 0 10px 0;

  }

  .livegame{

    color:red;

    font-size:34px;

    font-weight:900;

    margin:2px 0;

    text-transform:uppercase;

  }

  .liveresult{

    color:green;

    font-size:34px;

    font-weight:900;

    margin:0;

  }

  

  .result-bottom{

    background: var(--ref-blue-dark);

    text-align:center;

    border:1px solid var(--ref-blue);

    padding:15px 0;

    margin:0 5px 10px 5px;

    /* blinking / color change effect */

    animation: resultBottomPulse 1.1s infinite;

  }

  .result-bottom a{

    color:#fff;

    font-weight:900;

    text-decoration:none;

    font-size:18px;

    text-transform:uppercase;

    display:block;

  }

  

  @keyframes resultBottomPulse{

    0%{

      background:#0b3aa4;

      border-color:#ff0;

      box-shadow: 0 0 0 rgba(255,255,0,0);

      filter: saturate(1);

    }

    50%{

      background:#e11d48; /* pink/red */

      border-color:#00ff6a;

      box-shadow: 0 0 18px rgba(255,255,0,.55);

      filter: saturate(1.15);

    }

    100%{

      background:#16a34a; /* green */

      border-color:#fff;

      box-shadow: 0 0 28px rgba(0,255,106,.55);

      filter: saturate(1.25);

    }

  }

  

  @media (prefers-reduced-motion: reduce){

    .result-bottom{ animation:none; }

  }

  

  /* Market/result boards (approx of reference "gboard" blocks) */

  .gboard-wrap{

    width:calc(100% - 10px);

    margin:12px 5px;

  }

  .gboardfull,

  .gboardhalf{

    border:2px solid var(--ref-yellow);

    background:#000;

    color:#fff;

    text-align:center;

    padding:10px 8px;

    margin:6px 0;

    font-weight:900;

  }

  .gboardfull a{

    color:#fff;

    text-decoration:none;

    font-size:22px;

    font-weight:900;

    text-transform:uppercase;

  }

  .gbfullresult{

    font-size:30px;

    color:#ff0;

    font-weight:900;

  }

  .gbgamehalf{

    font-size:18px;

    font-weight:900;

    text-transform:uppercase;

  }

  .gbhalfresultn{ color:#ff0; font-size:22px; font-weight:900; }

  .gbhalfresulto{ color:#fff; font-size:22px; font-weight:900; }

  

  /* Simple record list row style (reference list/list4) */

  .list, .list4{

    border-style:double;

    border-color:var(--ref-border);

    text-align:center;

    padding:10px 8px;

    margin:8px 5px;

    border-radius:10px;

    font-weight:900;

  }

  .list{ background:#fff; color:#000; }

  .list4{ background:#000; color:#fff; }

  .list a{ color:#11499d; text-decoration:none; font-size:18px; font-weight:900; }

  .list4 a{ color:#fff; text-decoration:none; font-size:18px; font-weight:900; }

  

  .hotlink, .hotlink-black{

    width:calc(100% - 10px);

    margin:8px 5px;

    border-collapse:collapse;

  }

  .hotlink td, .hotlink-black td{

    padding:10px 8px;

    border:2px solid var(--ref-yellow);

    text-align:center;

    width:50%;

    font-weight:900;

  }

  .hotlink td{ background:#000; }

  .hotlink-black td{ background:blue; }

  .hotlink a, .hotlink-black a{

    color:#fff;

    text-decoration:none;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.04em;

    display:block;

  }

  

  /* 4-links-in-one-line version (used by archive_vault.php when rendered as a table) */

  .hotlink.yearline{

    width:100% !important;        /* fit full screen */

    margin:6px 0 !important;      /* no side overflow */

    table-layout:fixed;           /* force 4 equal columns */

  }

  .hotlink.yearline td{

    width:25% !important;

    padding:10px 4px !important;

    border-width:2px !important;

  }

  .hotlink.yearline a{

    font-size:10px !important;

    letter-spacing:.01em !important;

    white-space:normal !important;    /* wrap inside cell, but keep 4 columns */

    word-break:break-word;

    overflow-wrap:anywhere;

    line-height:1.15;

  }

  

  @media (max-width: 520px){

    .hotlink.yearline a{ font-size:9px !important; }

  }

  

  /* Compact per-year record links (fit-to-screen, no horizontal overflow) */

  .yearline-grid{

    width:calc(100% - 10px);

    margin:0 5px 14px 5px;

  }

  .yearline-row{

    display:grid;

    grid-template-columns: repeat(4, 1fr);

    gap:0;

    margin:6px 0;

    border:2px solid #ff0;

    background:#000;

  }

  .yearline-row a{

    display:block;

    padding:10px 6px;

    border-right:1px solid #ff0;

    border-bottom:1px solid #ff0;

    color:#fff;

    text-decoration:none;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.01em;

    font-size:11px;

    line-height:1.2;

    text-align:center;

    word-break:break-word;   /* prevents overflow for long labels */

    overflow-wrap:anywhere;

  }

  .yearline-row a:nth-child(4n){ border-right:0; }

  

  @media (max-width: 900px){

    .yearline-row{ grid-template-columns: repeat(2, 1fr); }

    .yearline-row a:nth-child(2n){ border-right:0; }

  }

  

  /* Content boxes for long SEO text */

  .seo-box{

    width:calc(100% - 10px);

    margin:6px 5px;

    background:#fff;

    color:#000;

    border-style:double;

    border-color:var(--ref-border);

    border-width:4px;

    border-radius:10px;

    padding:12px 10px;

  }

  .seo-box.dark{

    background:#000;

    color:#fff;

    border-color:var(--ref-yellow);

  }

  .seo-box{ box-sizing:border-box; }

  

  /* Mobile: chart container full-width + compact typography */

  @media (max-width: 900px){

    #monthly-record .seo-box{

      width:100%;

      margin:6px 0;

      padding:8px 6px;

      border-radius:8px;

      border-width:3px;

    }

    #monthly-record .chart-table th{

      font-size:10px;

      padding:8px 6px;

      letter-spacing:.03em;

    }

    #monthly-record .chart-table td{

      font-size:12px;

      padding:8px 6px;

    }

    #monthly-record .chart-table .date-cell{

      font-size:10px;

    }

  }

  .seo-box h2, .seo-box h3{

    margin:0 0 8px 0;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.06em;

    line-height:1.2;

  }

  .seo-box p{

    margin:0 0 6px 0;

    font-weight:700;

    line-height:1.6;

  }

  .seo-box p:last-child{ margin-bottom:0; }

  .faq-q{

    font-weight:900;

    margin:0 0 6px 0;

    text-transform:uppercase;

  }

  .faq-a{

    font-weight:700;

    margin:0;

    line-height:1.6;

  }

  

  /* Khaiwal tables */

  .khaiwal-table{

    width:100%;

    border-collapse:collapse;

    margin-top:10px;

  }

  .khaiwal-table th,

  .khaiwal-table td{

    border:2px solid var(--ref-yellow);

    padding:10px 8px;

    text-align:center;

    font-weight:900;

  }

  .khaiwal-table th{

    background:blue;

    color:#fff;

    text-transform:uppercase;

    letter-spacing:.06em;

  }

  .khaiwal-table td{

    background:#000;

    color:#fff;

    text-transform:uppercase;

  }

  

  /* Chart filter form (chart.php) */

  .chart-filter-form{

    display:grid;

    grid-template-columns: 1fr 1fr 1fr;

    gap:14px;

    align-items:end;

  }

  .chart-filter-form label{

    display:block;

    font-weight:900;

    font-size:12px;

    letter-spacing:.06em;

    text-transform:uppercase;

    margin-bottom:6px;

    color:#ff0;

  }

  .chart-select{

    width:100%;

    background:#111;

    color:#fff;

    border:2px solid #333;

    border-radius:10px;

    padding:14px 14px;

    font-weight:900;

    font-size:16px;

    outline:none;

  }

  .chart-select:focus{ border-color:#ff0; }

  .chart-submit{

    width:100%;

    min-width:unset;

  }

  @media (max-width: 900px){

    .chart-filter-form{ grid-template-columns: 1fr; }

  }

  

  /* Monthly record table (chart.php) */

  .chart-table{

    width:100%;

    border-collapse:collapse;

    background:#fff;

    border:2px solid #000;

  }

  .chart-table th{

    background:#006EF5;

    color:#fff;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.06em;

    font-size:12px;

    padding:12px 10px;

    border:1px solid #000;

    white-space:nowrap;

  }

  .chart-table td{

    background:#fff;

    color:#000;

    font-weight:900;

    font-size:14px;

    padding:10px 8px;

    border:1px solid #000;

    text-align:center;

  }

  .chart-table .date-cell{

    background:#f2f2f2;

    color:#0008ff;

    white-space:nowrap;

    font-size:12px;

  }

  

  /* Lightweight equivalents for Tailwind-like classes used in chart.php */

  .chart-table .font-black{ font-weight:900; }

  .chart-table .text-brand-400{ color:#16a34a; } /* highlight when result exists */

  .chart-table .text-white\/10{ color:#9ca3af; } /* fallback for missing result */

  .chart-table .transition-colors{ transition: color .12s ease; }

  .chart-table .transition-all{ transition: all .12s ease; }



  /* Hover states (Tailwind-style classes used in markup) */

  .chart-table .group:hover .group-hover\:text-brand-400{

    color:#dc2626 !important; /* visible in light mode */

  }

  .chart-table .group:hover .group-hover\:bg-brand-400\/5{

    background: rgba(22, 163, 74, .08) !important;

  }



  /* Monthly chart width */

  #monthly-record .chart-table{

    width:75%;

    margin:0 auto;

  }

  @media (max-width: 900px){

    #monthly-record .chart-table{ width:100%; }

  }

  

  /* Guessing forum */

  .forum-wrap{

    width:calc(100% - 10px);

    margin:12px 5px 18px 5px;

  }

.forum-cta-row{

  padding:10px 10px;

  border-radius:14px;

  border:1px solid rgba(255,255,0,.22);

  background:

    radial-gradient(120% 120% at 50% 0%,

      rgba(255,255,0,.18) 0%,

      rgba(0,110,245,.14) 38%,

      rgba(0,0,0,0) 72%);

  box-shadow:

    inset 0 0 0 1px rgba(255,255,255,.06),

    0 10px 24px rgba(0,0,0,.28);

}

.forum-cta-row .buttonb{

  position:relative;

  overflow:hidden;

  transform: translateZ(0);

  box-shadow:0 10px 20px rgba(0,0,0,.35);

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;

}

.forum-cta-row .buttonb::after{

  content:"";

  position:absolute;

  top:-20%;

  left:-70%;

  width:55%;

  height:140%;

  background: linear-gradient(90deg, transparent, rgba(255,255,255,.38), transparent);

  transform: rotate(18deg);

  transition:left .35s ease;

  pointer-events:none;

}

.forum-cta-row .buttonb:hover{

  transform: translateY(-2px);

  filter:brightness(1.05);

  box-shadow:0 14px 26px rgba(0,0,0,.48);

}

.forum-cta-row .buttonb:hover::after{ left:140%; }

.forum-cta-row .buttonb:active{

  transform: translateY(0);

  filter:none;

  box-shadow:0 10px 20px rgba(0,0,0,.35);

}

@media (max-width: 640px){

  .forum-cta-row{

    padding:8px 8px;

    border-radius:12px;

  }

}

@media (prefers-reduced-motion: reduce){

  .forum-cta-row .buttonb,

  .forum-cta-row .buttonb::after{

    transition:none;

  }

}

  

  /* Smiley page */

  .smiley-wrap{

    width:calc(100% - 10px);

    margin:12px 5px 18px 5px;

  }

  .smiley-grid{

    display:grid;

    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap:10px;

    margin:10px 0 0 0;

  }

  @media (max-width: 980px){

    .smiley-grid{ grid-template-columns: repeat(4, minmax(0, 1fr)); }

  }

  @media (max-width: 640px){

    .smiley-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

  }

  @media (max-width: 420px){

    .smiley-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }

  }

  .smiley-card{

    border:2px solid #ff0;

    background:#000;

    color:#fff;

    padding:14px 10px;

    text-align:center;

    cursor:pointer;

    user-select:none;

  }

  .smiley-card:hover{ background:#060606; }

  .smiley-card img{

    height:64px;

    width:auto;

    object-fit:contain;

  }

  .smiley-code{

    display:inline-block;

    margin-top:10px;

    background:#111;

    border:2px solid #333;

    border-radius:999px;

    padding:6px 10px;

    color:#ff0;

    font-weight:900;

    font-size:12px;

    letter-spacing:.08em;

  }

  .toast{

    position:fixed;

    left:50%;

    bottom:18px;

    transform:translateX(-50%) translateY(18px);

    background: var(--ref-yellow);

    color:#000;

    border:2px solid #000;

    padding:10px 14px;

    border-radius:10px;

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.08em;

    opacity:0;

    pointer-events:none;

    z-index:9999;

    transition: opacity .2s ease, transform .2s ease;

  }

  .toast.toast--show{

    opacity:1;

    transform:translateX(-50%) translateY(0);

  }

  .forum-post{

    border:2px solid #ff0;

    background:#000;

    color:#fff;

    margin:10px 0;

  }

  .forum-post-list > .forum-post:nth-child(even){

    background:#0b1220;

    box-shadow: inset 0 0 0 1px rgba(255,255,0,.12);

  }

  

  /* Ensure children don't paint over alternating background */

  .forum-post-head,

  .forum-post-actions{

    background:transparent;

  }

  .forum-post-body{

    margin:12px;

    border-radius:14px;

    padding:14px 12px;

    text-align:center;

    background: linear-gradient(135deg, #fff7cc 0%, #ffe08a 100%);

    color:#111;

    box-shadow:

      0 10px 24px rgba(0,0,0,.35),

      inset 0 0 0 1px rgba(0,0,0,.10);

  }

  .forum-post-list > .forum-post:nth-child(5n+2) .forum-post-body{

    background: linear-gradient(135deg, #dff6ff 0%, #bdefff 100%);

  }

  .forum-post-list > .forum-post:nth-child(5n+3) .forum-post-body{

    background: linear-gradient(135deg, #dcfce7 0%, #86efac 100%);

  }

  .forum-post-list > .forum-post:nth-child(5n+4) .forum-post-body{

    background: linear-gradient(135deg, #fdf2f8 0%, #fbcfe8 100%);

  }

  .forum-post-list > .forum-post:nth-child(5n) .forum-post-body{

    background: linear-gradient(135deg, #ede9fe 0%, #c4b5fd 100%);

  }

  .forum-post-head{

    display:flex;

    gap:12px;

    align-items:center;

    padding:10px 10px;

    border-bottom:1px solid #222;

  }

  .forum-avatar{

    width:52px;

    height:52px;

    border-radius:999px;

    border:2px solid #ff0;

    object-fit:cover;

    background:#111;

    box-shadow:

      0 0 0 4px rgba(255, 255, 0, .18),

      0 0 18px rgba(255, 255, 0, .30);

    transition: transform .15s ease, box-shadow .15s ease;

    animation: forumAvatarPulse 2.4s ease-in-out infinite;

  }

  .forum-avatar:hover{

    transform: scale(1.04);

    box-shadow:

      0 0 0 4px rgba(255, 255, 0, .26),

      0 0 22px rgba(255, 255, 0, .42);

  }

  

  @keyframes forumAvatarPulse{

    0%, 100%{

      box-shadow:

        0 0 0 4px rgba(255, 255, 0, .14),

        0 0 14px rgba(255, 255, 0, .22);

      filter: saturate(1) contrast(1);

    }

    50%{

      box-shadow:

        0 0 0 6px rgba(255, 255, 0, .28),

        0 0 26px rgba(255, 255, 0, .48);

      filter: saturate(1.15) contrast(1.05);

    }

  }

  

  @media (prefers-reduced-motion: reduce){

    .forum-avatar{ animation:none; }

  }

  .forum-user{

    font-weight:900;

    text-transform:uppercase;

    letter-spacing:.03em;

  }

  .forum-meta{

    margin-left:auto;

    text-align:right;

    font-weight:900;

    font-size:12px;

    opacity:.8;

  }

  .forum-post-body{

    padding:12px 12px;

    font-weight:800;

    line-height:1.7;

    text-align:center;

    word-break:break-word;

    overflow-wrap:anywhere;

  }

  .forum-post-actions{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:10px;

    padding:10px 10px;

    border-top:1px solid #222;

    flex-wrap:wrap;

  }

  .pagination{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    flex-wrap:wrap;

    padding:10px 12px;

    border-radius:12px;

    background:#f3f4f6;

    border:1px solid rgba(255,255,255,.12);

  }

  .pagination__list{

    list-style:none;

    display:flex;

    gap:8px;

    padding:0;

    margin:0;

    align-items:center;

  }

  .pagination__arrow,

  .pagination__link{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:38px;

    min-width:38px;

    padding:0 12px;

    border-radius:10px;

    font-weight:900;

    text-decoration:none;

    user-select:none;

    transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease;

  }

  .pagination__arrow{

    background:#111827;

    color:#fff;

    box-shadow: 0 6px 16px rgba(0,0,0,.25);

  }

  .pagination__arrow:hover{ transform: translateY(-1px); }

  .pagination__arrow.is-disabled{

    opacity:.35;

    pointer-events:none;

  }

  .pagination__link{

    background:#fff;

    color:#111;

    border:1px solid rgba(0,0,0,.10);

    box-shadow: 0 6px 16px rgba(0,0,0,.12);

  }

  .pagination__link:hover{ transform: translateY(-1px); }

  .pagination__link.is-active{

    background:#ef4444;

    color:#fff;

    border-color:transparent;

    box-shadow: 0 10px 20px rgba(239,68,68,.35);

  }

  .pagination__dots{

    font-weight:900;

    color:#6b7280;

    padding:0 4px;

  }

  @media (max-width: 480px){

    .pagination__arrow,

    .pagination__link{

      height:34px;

      min-width:34px;

      padding:0 10px;

      border-radius:9px;

    }

  }

  .forum-actions-right{

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

  }

  .forum-form textarea{

    width:100%;

    min-height:140px;

    background:#111;

    color:#fff;

    border:2px solid #333;

    border-radius:10px;

    padding:12px;

    font-weight:800;

    outline:none;

  }

  .forum-form textarea:focus{ border-color:#ff0; }

  .forum-form .buttonb{ min-width:unset; }

  

  /* Auth pages (register/login) */

  .auth-wrap{

    width:calc(100% - 10px);

    margin:14px 5px 18px 5px;

  }

  .auth-card{

    border:2px solid #ff0;

    background:#000;

    color:#fff;

    padding:14px 12px;

  }

  .auth-form{

    display:grid;

    gap:12px;

  }

  .auth-form label{

    display:block;

    font-weight:900;

    font-size:12px;

    letter-spacing:.06em;

    text-transform:uppercase;

    margin-bottom:6px;

    color:#ff0;

  }

  .auth-input{

    width:100%;

    background:#111;

    color:#fff;

    border:2px solid #333;

    border-radius:10px;

    padding:12px 12px;

    font-weight:800;

    outline:none;

  }

  .auth-input:focus{ border-color:#ff0; }

  .auth-grid-2{

    display:grid;

    grid-template-columns: 1fr 1fr;

    gap:12px;

  }

  @media (max-width: 720px){

    .auth-grid-2{ grid-template-columns: 1fr; }

  }

  .auth-help{

    font-size:12px;

    font-weight:800;

    opacity:.85;

  }

  

  /* Chart record tables (legacy .tab and new year view) */

  .tab, table.tab, table[border="2"], table[border="1"]{

    width:100% !important;

    border-collapse:collapse !important;

    border:2px solid #000 !important;

    background:#fff !important;

    color:#000 !important;

    margin:10px 0 !important;

  }

  .tab td, .tab th, table[border="2"] td, table[border="2"] th{

    border:1px solid #000 !important;

    padding:8px 6px !important;

    text-align:center !important;

    font-weight:900 !important;

    font-size:14px !important;

    background:#fff !important;

    color:#000 !important;

    font-family: Georgia, "Times New Roman", Times, serif !important;

  }

  /* Header row (year + months) */

  .tab tr:first-child td,

  .tab .tr0 td,

  .tab td[style*="background-color:purple"],

  .tab td[style*="background-color:#FE037D"],

  .tab td[style*="background-color:black"]{

    background:#006EF5 !important;

    color:#fff !important;

    text-transform:uppercase !important;

    letter-spacing:.06em !important;

    font-size:13px !important;

  }

  /* Day/date column */

  .tab td:first-child,

  .tab .td0,

  .tab .td00,

  .tab td[style*="background-color:darkgray"]{

    background:#f2f2f2 !important;

    color:#0008ff !important;

    font-size:13px !important;

  }

  /* Result cells */

  .tab td:not(:first-child){

    background:#fff !important;

    color:#000 !important;

  }

  

  /* Screenshot-style "all game record table" grid */

  #markets{

    width:100%;

    padding:0 5px;

    box-sizing:border-box;

  }

  .site-counter{

    text-align:center;

    margin:6px 0;

  }

  .market-list{

    width:100%;

    display:grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap:10px;

    margin:10px 0 14px 0;

  }

  .market-card{

    border:2px solid #000;

    border-radius:12px;

    overflow:hidden;

    background:#fff;

    box-shadow:0 10px 24px rgba(0,0,0,.12);

    min-width:0;

    font-family: Arial, Helvetica, sans-serif; /* simple font */

  }

  .market-card--full{

    grid-column:1 / -1; /* first game 100% width */

  }

  .market-card-head{

    padding:14px 10px;

    text-align:center;

    font-weight:800;

    border-bottom:2px solid #000;

    background:linear-gradient(90deg,#7c3aed 0%, #ec4899 100%);

    color:#fff;

  }

  .market-card:not(.market-card--full) .market-card-head{

    color:#fff;

  }

  .market-card-name{

    font-size:18px;

    text-transform:uppercase;

    letter-spacing:.02em;

    word-break:break-word;

    overflow-wrap:anywhere;

    font-family: inherit;

  }

  .market-card-time{

    margin-top:4px;

    font-size:12px;

    color:rgba(255,255,255,.92);

    font-family: inherit;

  }

  .market-card--full .market-card-time{

    color:#fff;

    opacity:.95;

  }

  .market-card-body{

    padding:12px 10px 14px 10px;

    text-align:center;

    background:#fff;

  }

  .market-card-res{

    font-weight:900;

    font-size:20px;

    color:#000;

    font-family: inherit;

  }

  /* Attractive, different colors per card (head + soft body) */

  .market-card:nth-child(4n+1):not(.market-card--full) .market-card-head{ background:linear-gradient(90deg,#2563eb 0%, #06b6d4 100%); }

  .market-card:nth-child(4n+2):not(.market-card--full) .market-card-head{ background:linear-gradient(90deg,#16a34a 0%, #84cc16 100%); }

  .market-card:nth-child(4n+3):not(.market-card--full) .market-card-head{ background:linear-gradient(90deg,#f59e0b 0%, #ef4444 100%); }

  .market-card:nth-child(4n):not(.market-card--full) .market-card-head{ background:linear-gradient(90deg,#8b5cf6 0%, #ec4899 100%); }

  

  .market-card:nth-child(4n+1) .market-card-body{ background:#eff6ff; } /* light blue */

  .market-card:nth-child(4n+2) .market-card-body{ background:#f0fdf4; } /* light green */

  .market-card:nth-child(4n+3) .market-card-body{ background:#fff7ed; } /* light orange */

  .market-card:nth-child(4n) .market-card-body{ background:#fdf2f8; }   /* light pink */

  .market-card--full .market-card-body{ background:#ffffff; }

  

  @media (max-width: 640px){

    #markets{ padding:0 3px; }

    .market-list{ gap:8px; margin:8px 0 12px 0; }

    .market-card{ border-radius:10px; }

    .market-card-head{ padding:12px 8px; }

    .market-card-name{ font-size:14px; }

    .market-card-time{ font-size:11px; }

    .market-card-body{ padding:10px 8px 12px 8px; }

    .market-card-res{ font-size:18px; }

  }

  @media (max-width: 340px){

    .market-list{ grid-template-columns: 1fr; }

    .market-card--full{ grid-column:auto; }

  }

  

  /* Rotate header colors for the first card only (full-width) */

  #markets .market-card--full:nth-of-type(4n+1) .market-card-head{

    background:linear-gradient(90deg,#7c3aed 0%, #ec4899 100%);

  }

  #markets .market-card--full:nth-of-type(4n+2) .market-card-head{

    background:linear-gradient(90deg,#1d4ed8 0%, #06b6d4 100%);

  }

  #markets .market-card--full:nth-of-type(4n+3) .market-card-head{

    background:linear-gradient(90deg,#16a34a 0%, #84cc16 100%);

  }

  #markets .market-card--full:nth-of-type(4n) .market-card-head{

    background:linear-gradient(90deg,#f59e0b 0%, #ef4444 100%);

  }

  

  /* Keep old styles for other pages that may still use market-grid */

  .market-grid{

    width:100%;

    margin:10px 0 14px 0;

    border:2px solid #000;

    border-radius:12px;

    overflow:hidden;

    box-shadow:0 10px 24px rgba(0,0,0,.12);

  }

  .market-full{

    background:linear-gradient(90deg,#ff5a1f 0%, #ff1f6d 55%, #7c3aed 100%);

    color:#fff;

    text-align:center;

    padding:18px 10px;

    border-bottom:2px solid #000;

    font-weight:900;

  }

  /* Rotate header colors per block for a more attractive look */

  #markets .market-grid:nth-of-type(4n+1) .market-full{

    background:linear-gradient(90deg,#ff512f 0%, #dd2476 100%);

  }

  #markets .market-grid:nth-of-type(4n+2) .market-full{

    background:linear-gradient(90deg,#1d4ed8 0%, #06b6d4 100%);

  }

  #markets .market-grid:nth-of-type(4n+3) .market-full{

    background:linear-gradient(90deg,#16a34a 0%, #84cc16 100%);

  }

  #markets .market-grid:nth-of-type(4n) .market-full{

    background:linear-gradient(90deg,#f59e0b 0%, #ef4444 100%);

  }

  .market-full .m-name{

    font-size:22px;

    letter-spacing:.04em;

    text-transform:uppercase;

  }

  .market-full .m-time{

    font-size:16px;

    margin-top:4px;

  }

  .market-full .m-res{

    font-size:22px;

    margin-top:6px;

    color:#fff;

  }

  

  .market-row{

    display:grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    background:#fff;

    border-bottom:2px solid #000;

  }

  .market-cell{

    text-align:center;

    padding:22px 10px 24px 10px;

    min-height:120px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    min-width:0;

    background:#fff;

  }

  .market-cell + .market-cell{

    border-left:2px solid #000;

  }

  .market-name{

    color:#0008ff;

    font-weight:900;

    font-size:20px;

    text-transform:uppercase;

    font-family: Georgia, "Times New Roman", Times, serif;

    letter-spacing:.02em;

    word-break:break-word;

    overflow-wrap:anywhere;

  }

  .market-time{

    color:#ff151d;

    font-weight:900;

    margin-top:4px;

    font-size:14px;

    font-family: Georgia, "Times New Roman", Times, serif;

  }

  .market-res{

    margin-top:10px;

    font-weight:900;

    font-size:22px;

    color:#000;

    font-family: Georgia, "Times New Roman", Times, serif;

  }

  .market-arrow{

    /* green boxed arrow like reference screenshot */

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:18px;

    height:18px;

    margin:0 6px;

    background:#0d6c30;

    border:1px solid #075107;

    border-radius:2px;

    color:#fff;

    font-weight:900;

    font-size:14px;

    line-height:1;

    vertical-align:middle;

  }

  

  /* Attractive alternating colors (like reference screenshot) */

  .market-grid .market-row:nth-of-type(1) .market-cell:nth-child(1){ background:#fff7cc; }

  .market-grid .market-row:nth-of-type(1) .market-cell:nth-child(2){ background:#dff6ff; }

  .market-grid .market-row:nth-of-type(2) .market-cell:nth-child(1){ background:#dfffdc; }

  .market-grid .market-row:nth-of-type(2) .market-cell:nth-child(2){ background:#ffe1e1; }

  

  /* Mobile: keep 2 columns (like screenshot), just tighten spacing */

  @media (max-width: 640px){

    #markets{ padding:0 3px; }

    .market-grid{ margin:8px 0 12px 0; border-radius:10px; }

    .market-full{ padding:14px 8px; }

    .market-full .m-name{ font-size:18px; }

    .market-full .m-time{ font-size:13px; }

    .market-full .m-res{ font-size:18px; }

    .market-cell{ padding:14px 6px 16px 6px; min-height:unset; }

    .market-name{ font-size:15px; }

    .market-time{ font-size:12px; }

    .market-res{ font-size:18px; }

    .market-arrow{ width:16px; height:16px; font-size:12px; margin:0 4px; }

  }

  

  /* Ultra-small screens: switch to 1 column to prevent overflow */

  @media (max-width: 340px){

    .market-row{ grid-template-columns: 1fr; }

    .market-cell + .market-cell{ border-left:0; border-top:2px solid #000; }

  }

  

  /* Big sticky social buttons (Telegram/WhatsApp) */

  .sticky-social{

    position:fixed;

    z-index:9999;

    display:flex;

    align-items:center;

    justify-content:center;

    width:78px;

    height:78px;

    border-radius:999px;

    border:4px solid rgba(255,255,255,.9);

    box-shadow:0 0 0 6px rgba(0,0,0,.05), 0 18px 45px rgba(0,0,0,.25);

    transition:transform .2s ease;

  }

  .sticky-social:hover{ transform:scale(1.06); }

  .sticky-social svg{

    width:34px;

    height:34px;

    fill:currentColor;

  }

  .sticky-social--telegram{ background:#229ED9; color:#fff; left:14px; bottom:32px; }

  .sticky-social--whatsapp{ background:#25D366; color:#fff; right:14px; bottom:32px; }

  

  @media (max-width: 520px){

    .sticky-social{ width:86px; height:86px; }

    .sticky-social svg{ width:38px; height:38px; }

  }

  

  /* Left sticky WhatsApp info box (homepage) */

  .playButton2{

    font-size:11px;

    text-decoration:none;

    padding:3px 1px;

    background-color:#0d617c;

    color:#fff;

    border:2px solid #fff;

    font-weight:700;

    border-radius:10px;

    position:fixed;

    bottom:120px; /* sits above bottom-left Telegram button */

    left:14px;

    width:140px;

    text-align:center;

    z-index:9999;

    line-height:14.5px;

    box-sizing:border-box;

  }

  .playButton2:hover{ filter:brightness(1.06); }

  .playButton2:active{ transform:scale(.99); }

  

  /* Make old Tailwind-heavy pages not look broken on white background */

  .custom-grid-pattern{ background:none !important; }

  .brand-text-shine{

    -webkit-text-fill-color: initial !important;

    background:none !important;

  }

  

  /* Mobile tweaks */

  @media (max-width:640px){

    .top-link td{ font-size:11px; padding:6px 4px; }

    .buttonb{ width:100%; min-width:unset; }

  }

  

  @media (max-width: 520px){

    .playButton2{ bottom:130px; } /* keep gap above bigger Telegram icon */

  }