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