/* 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 */
  }