body
{
   background-color: #000000;
   color: #000000;
   font-family: Arial;
   font-weight: normal;
   font-size: 13px;
   line-height: 1.1875;
   margin: 0;
   padding: 0;
   overflow-x: hidden;
}
.wb-theme-header
{
   background-color: #333333;
   background-image: none;
   border: 1px solid #A3A3A3;
   border-radius: 0px;
   color: #EEEEEE;
   --background-color: rgba(51,51,51,1.00);
   --border-color: #A3A3A3;
   --border-width: 1px;
   --color: #EEEEEE;
}
.wb-theme-content
{
   background-color: #F9F9F9;
   background-image: none;
   border: 1px solid #CCCCCC;
   border-radius: 0px;
   color: #222222;
   --background-color: rgba(249,249,249,1.00);
   --border-color: #CCCCCC;
   --border-width: 1px;
   --color: #222222;
   --icon-color: #222222;
   --colorize: invert(12%) sepia(2%) saturate(47%) hue-rotate(314deg) brightness(85%) contrast(93%);
}
.wb-theme-button, .wb-theme-static
{
   background-color: #111111;
   background-image: none;
   border: 1px solid #777777;
   border-radius: 0px;
   color: #E3E3E3;
   --background-color: rgba(17,17,17,1.00);
   --border-color: #777777;
   --border-width: 1px;
   --color: #E3E3E3;
}
.wb-theme-button:hover
{
   background-color: #1C1C1C;
   background-image: none;
   border: 1px solid #000000;
   border-radius: 0px;
   color: #FFFFFF;
   --background-color: rgba(28,28,28,1.00);
   --border-color: #000000;
   --border-width: 1px;
   --color: #FFFFFF;
}
.wb-theme-button.active, .wb-theme-button:active, .active > .wb-theme-button
{
   background-color: #FFFFFF;
   background-image: none;
   border: 1px solid #CCCCCC;
   border-radius: 0px;
   color: #222222;
   --background-color: rgba(255,255,255,1.00);
   --border-color: #CCCCCC;
   --border-width: 1px;
   --color: #222222;
}
#wb_LayoutGrid1
{
   clear: both;
   position: relative;
   table-layout: fixed;
   display: table;
   text-align: center;
   width: 100%;
   background-color: transparent;
   background-image: none;
   border: 0px solid #CCCCCC;
   border-radius: 0px;
   box-sizing: border-box;
   margin: 0;
}
#LayoutGrid1
{
   box-sizing: border-box;
   padding: 0;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid1 > .row
{
   margin-right: 0;
   margin-left: 0;
}
#LayoutGrid1 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 0px;
   padding-left: 0px;
   position: relative;
}
#LayoutGrid1 > .row > .col-1
{
   float: left;
}
#LayoutGrid1 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 100%;
   text-align: center;
}
#LayoutGrid1:before,
#LayoutGrid1:after,
#LayoutGrid1 .row:before,
#LayoutGrid1 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid1:after,
#LayoutGrid1 .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#LayoutGrid1 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_Text1 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_Text1 div
{
   text-align: center;
}
#wb_Text1
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#Html1
{
   display: inline-block;
   width: 100%;
   height: 1300px;
   overflow: auto;
   z-index: 1;
}
@media only screen and (max-width: 768px)
{
body
{
   background-color: #000000;
   background-image: none;
}
#MasterPage1
{
   left: 0px;
   top: 0px;
   width: 768px;
   height: 1725px;
   visibility: visible;
   display: inline;
}
#Html1
{
   visibility: visible;
   display: block;
}
#wb_LayoutGrid1
{
   visibility: visible;
   display: table;
   background-color: #000000;
   background-image: none;
   background-image: none;
}
#wb_LayoutGrid1
{
   height: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}
#LayoutGrid1
{
   height: auto;
   padding: 0;
}
#LayoutGrid1 .row
{
   margin-right: 0px;
   margin-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   padding-right: 0px;
   padding-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   display: block;
   width: 100%;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   text-align: left;
}
#wb_Text1
{
   width: 100%;
   visibility: visible;
   display: block;
   margin: 0;
}
#wb_Text1
{
   margin: 0;
   padding: 0;
}
}
@media only screen and (max-width: 480px)
{
body
{
   background-color: #000000;
   background-image: none;
}
#MasterPage1
{
   left: 0px;
   top: 0px;
   width: 480px;
   height: 1725px;
   visibility: visible;
   display: inline;
}
#Html1
{
   visibility: visible;
   display: block;
}
#wb_LayoutGrid1
{
   visibility: visible;
   display: table;
   background-color: #000000;
   background-image: none;
   background-image: none;
}
#wb_LayoutGrid1
{
   height: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}
#LayoutGrid1
{
   height: auto;
   padding: 0;
}
#LayoutGrid1 .row
{
   margin-right: 0px;
   margin-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   padding-right: 0px;
   padding-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   display: block;
   width: 100%;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   text-align: left;
}
#wb_Text1
{
   width: 100%;
   visibility: visible;
   display: block;
   margin: 0;
}
#wb_Text1
{
   margin: 0;
   padding: 0;
}
}
@media only screen and (max-width: 320px)
{
body
{
   background-color: #000000;
   background-image: none;
}
#MasterPage1
{
   left: 0px;
   top: 0px;
   width: 320px;
   height: 1725px;
   visibility: visible;
   display: inline;
}
#Html1
{
   visibility: visible;
   display: block;
}
#wb_LayoutGrid1
{
   visibility: visible;
   display: table;
   background-color: #000000;
   background-image: none;
   background-image: none;
}
#wb_LayoutGrid1
{
   height: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}
#LayoutGrid1
{
   height: auto;
   padding: 0;
}
#LayoutGrid1 .row
{
   margin-right: 0px;
   margin-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   padding-right: 0px;
   padding-left: 0px;
}
#LayoutGrid1 > .row > .col-1
{
   display: block;
   width: 100%;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   text-align: left;
}
#wb_Text1
{
   width: 100%;
   visibility: visible;
   display: block;
   margin: 0;
}
#wb_Text1
{
   margin: 0;
   padding: 0;
}
}
/* ========================================================================= */
/* MASTER MENU FIX: Forces the Hamburger to lock to the phone screen         */
/* ========================================================================= */
@media (max-width: 1024px) {
   #MegaMenu1-hamburger { 
       display: flex !important; 
       flex-direction: column !important;
       justify-content: space-around !important;
       width: 35px !important;
       height: 28px !important;
       cursor: pointer !important; 
       pointer-events: auto !important; 
       
       /* CRITICAL CHANGE: 'fixed' locks it to the viewport, ignoring wide containers */
       position: fixed !important; 
       right: 20px !important;
       top: 15px !important; 
       z-index: 2147483647 !important; /* Maximum possible HTML z-index */
       
       background: transparent !important;
       border: none !important;
       margin: 0 !important;
       padding: 0 !important;
   }
   
   #MegaMenu1-hamburger .line {
       display: block !important;
       width: 100% !important;
       height: 3px !important;
       background-color: #fac814 !important; 
       border-radius: 3px !important;
       visibility: visible !important;
       opacity: 1 !important;
       box-shadow: 0 1px 3px rgba(0,0,0,0.8) !important;
   }
}
/* Forces the website to never exceed the screen width and hides horizontal overflow */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

/* 1. AGGRESSIVE MOBILE OVERFLOW LOCK */
html, body, #wb_Workspace { 
    overflow-x: hidden !important; 
    max-width: 100vw !important; 
    margin: 0 !important; 
}

/* 2. FORCE THE 4D WIDGETS TO SQUISH ON MOBILE */
@media (max-width: 480px) {
    .f4dk-top-bar { flex-wrap: wrap !important; }
    .fourd-grid-container, .f4dk-board-grid { 
        grid-template-columns: 1fr !important; 
        min-width: 0 !important;
        width: 100% !important;
    }
    table, .mg-matrix-table, .sg-shares-table, .plain-data-table { 
        table-layout: fixed !important; 
        width: 100% !important; 
        word-break: break-all !important; 
    }
    .f4dk-widget-header { padding: 8px 5px !important; }
    .toto-balls-row { gap: 2px !important; }
    .mg-box { width: 17px !important; height: 17px !important; font-size: 10px !important; }
}

/* 3. MASTER PAGE STRETCH FIX */
@media (max-width: 1024px) {
    html, body {
        width: 100% !important;
        overflow-x: hidden !important;
    }
    #wb_Layer1, #Layer1, #Layer1_Container, 
    #wb_ContentPlaceHolder1, 
    #wb_LayoutGrid1, #LayoutGrid1 {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        left: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ========================================================================= */
/* 4. SLEEK MOBILE HAMBURGER ICON AND CANVAS MENU STYLING                    */
/* ========================================================================= */
#wb_header { position: relative !important; z-index: 99999 !important; }
#wb_MegaMenu1 { position: relative !important; z-index: 100000 !important; }

/* Hide hamburger on desktop by default */
#MegaMenu1-hamburger { display: none; }

@media (max-width: 1024px) {
   /* Hamburger Icon */
   #MegaMenu1-hamburger { 
       display: flex !important; 
       flex-direction: column !important;
       justify-content: space-around !important;
       width: 35px !important;
       height: 28px !important;
       cursor: pointer !important; 
       pointer-events: auto !important; 
       position: absolute !important; 
       right: 20px !important;
       top: 15px !important; 
       z-index: 100001 !important; 
   }
   
   #MegaMenu1-hamburger .line {
       display: block !important;
       width: 100% !important;
       height: 3px !important;
       background-color: #fac814 !important; 
       border-radius: 3px !important;
   }

   /* Canvas Menu Hidden State */
   #wb_MegaMenu1:not(.open) #MegaMenu1-nav { 
       display: block !important; 
       visibility: hidden !important; 
       opacity: 0 !important; 
       transform: translateX(100%) !important; 
       transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important;
   }
   
   /* Canvas Menu Open State */
   #wb_MegaMenu1.open #MegaMenu1-nav { 
       display: block !important; 
       visibility: visible !important; 
       opacity: 1 !important; 
       position: fixed !important; 
       top: 0 !important; 
       right: 0 !important; 
       left: auto !important; 
       width: 285px !important; 
       height: 100vh !important; 
       background: #0f0f0f !important; /* Deep dark background */
       z-index: 200000 !important; 
       box-shadow: -8px 0 25px rgba(0,0,0,0.9) !important; 
       padding: 25px !important; 
       box-sizing: border-box !important; 
       transform: translateX(0) !important; 
       transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out !important; 
   }
   
   /* The Close 'X' Button */
   #MegaMenu1-close { 
       text-align: right !important; 
       margin-bottom: 25px !important; 
       width: 100% !important; 
   }
   #MegaMenu1-close a { 
       color: #fac814 !important; 
       font-size: 40px !important; 
       line-height: 1 !important;
       text-decoration: none !important; 
       font-weight: bold !important; 
       background: transparent !important;
       border: none !important;
       box-shadow: none !important;
   }
   
   /* Clean, modern navigation links (strips WYSIWYG button defaults) */
   ul#MegaMenu1 {
       display: flex !important;
       flex-direction: column !important;
       gap: 5px !important;
       padding: 0 !important;
       margin: 0 !important;
       list-style: none !important;
   }
   
   ul#MegaMenu1 li {
       background: transparent !important;
       border: none !important;
       margin: 0 !important;
       padding: 0 !important;
   }
   
   ul#MegaMenu1 li a,
   ul#MegaMenu1 li a.wb-theme-button,
   ul#MegaMenu1 li a.button {
       color: #ffffff !important;
       font-size: 15px !important;
       font-weight: bold !important;
       text-transform: uppercase !important;
       text-decoration: none !important;
       display: block !important;
       background: transparent !important; /* Strips the ugly white boxes */
       border: none !important; 
       border-bottom: 1px solid #222222 !important; /* Clean separator */
       padding: 15px 10px !important;
       box-shadow: none !important;
       text-align: left !important;
       letter-spacing: 0.05em !important;
       transition: color 0.2s, background 0.2s !important;
   }
   
   ul#MegaMenu1 li a:hover,
   ul#MegaMenu1 li a:active {
       color: #fac814 !important;
       background: rgba(255, 255, 255, 0.03) !important; /* Subtle highlight on tap */
   }
}
/* ========================================================================= */
/* HEADER CLEANUP: Hides any accidental text boxes placed in the header layer*/
/* ========================================================================= */
#Layer1_Container > div:not(#wb_Image2):not(#wb_MegaMenu1) {
    display: none !important;
}
    /* GLOBAL OVERRIDES: Forces the software to respect the screen limits */
    html, body { 
        max-width: 100vw !important; 
        overflow-x: hidden !important; 
        margin: 0 !important; 
        padding: 0 !important; 
    }
    * { box-sizing: border-box !important; }
    
    div[id^="wb_Html"], div[id^="Html"] {
        left: 0 !important;
        margin: 0 !important;
        transform: none !important;
        width: 100% !important;
    }

    /* Core Page Layout Frame */
    .fourd-main-wrapper { 
        width: 100%; 
        max-width: 100vw;
        font-family: Arial, Helvetica, sans-serif; 
        padding: 20px 30px; 
        background: #000000; 
        margin: 0 auto;
    }
    
    /* Search Row Control Panel wrapper */
    .history-control-bar { 
        background: #151515; 
        border: 2px solid #2d2d2d; 
        padding: 20px; 
        max-width: 1650px; 
        margin: 0 auto 25px auto; 
        border-radius: 8px; 
        width: 100%;
    }
    .search-input-row {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 15px;
        margin-bottom: 20px;
    }
    .history-label { color: #ffffff; font-size: 15px; font-weight: bold; text-transform: uppercase; letter-spacing: 0.03em; }
    .history-date-input { background: #222222; border: 2px solid #444444; color: #ffffff; padding: 8px 14px; font-size: 15px; font-weight: bold; border-radius: 6px; outline: none; color-scheme: dark; }
    .history-date-input:focus { border-color: #fac814; }
    .history-search-btn { background: #fac814; color: #000000; border: none; padding: 10px 22px; font-size: 14px; font-weight: bold; border-radius: 6px; cursor: pointer; text-transform: uppercase; letter-spacing: 0.02em; }
    .history-search-btn:hover { opacity: 0.9; }

    /* Fast Quick-Click Timeline Badges Row Layout */
    .draw-timeline-container {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 10px;
        overflow-x: auto;
        padding: 5px 0;
        width: 100%;
    }
    .draw-timeline-container::-webkit-scrollbar { display: none; }
    .draw-timeline-container { -ms-overflow-style: none; scrollbar-width: none; }

    .timeline-badge {
        display: flex;
        flex-direction: column;
        width: 70px;
        min-width: 70px !important;
        border-radius: 6px;
        overflow: hidden;
        cursor: pointer;
        text-decoration: none;
        transition: transform 0.1s ease;
    }
    .timeline-badge:hover { transform: scale(1.05); }
    
    .badge-day-header { padding: 6px 0; text-align: center; font-weight: bold; font-size: 15px; text-decoration: underline; }
    .badge-date-footer { padding: 6px 0; text-align: center; background: #000000; color: #ffffff; font-weight: bold; font-size: 13px; text-decoration: underline; }

    .badge-yellow { border: 1px solid #fac814; }
    .badge-yellow .badge-day-header { background: #fac814; color: #000000; }
    .badge-red { border: 1px solid #ff0000; }
    .badge-red .badge-day-header { background: #ff0000; color: #ffffff; }

    /* NATURAL HEIGHT RESULTS LAYOUT (No Aspect Ratio) */
    .fourd-grid-container { 
        display: grid; 
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); 
        gap: 30px; 
        max-width: 1650px; 
        margin: 0 auto; 
        width: 100%;
    }
    .fourd-loader { grid-column: 1 / -1; text-align: center; color: #fac814; font-size: 22px; padding: 120px; font-weight: bold; letter-spacing: 0.05em; }
    
    .fourd-card { 
        background: #151515; 
        display: flex; 
        flex-direction: column;
        box-shadow: 0 15px 35px rgba(0,0,0,0.6); 
        width: 100%; 
        height: 100%; /* Lets cards naturally stretch to fit the data */
    }
    
    .card-header { padding: 12px 15px; display: flex; justify-content: space-between; align-items: center; width: 100%; }
    .header-title { font-size: 16px; font-weight: bold; margin-bottom: 2px; text-transform: uppercase; }
    .header-meta { font-size: 12px; opacity: 0.95; font-weight: bold; letter-spacing: 0.02em; white-space: normal; word-break: break-word; }
    
    .logo-badge { 
        width: 45px; 
        height: 45px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-radius: 8px; 
        font-weight: 900; 
        font-size: 24px; 
        line-height: 1;
        flex-shrink: 0;
    }
    
    .top-prizes-row { 
        background: #1f1f1f; 
        border-bottom: 1px solid #2d2d2d; 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        text-align: center; 
        width: 100%;
    }
    .prize-box { padding: 15px 0; display: flex; flex-direction: column; justify-content: center; }
    .prize-box:not(:last-child) { border-right: 1px solid #2d2d2d; }
    .prize-label { font-size: 12px; color: #999999; font-weight: bold; margin-bottom: 4px; letter-spacing: 0.05em; }
    .prize-number { font-size: 38px; font-weight: 900; color: #ffffff; letter-spacing: 0.04em; }
    
    .tier-title-bar { background: #262626; color: #ffffff; font-size: 12px; font-weight: bold; text-align: center; padding: 8px 0; text-transform: uppercase; letter-spacing: 0.08em; width: 100%; }
    .tier-subgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; background: #2d2d2d; text-align: center; padding: 2px; width: 100%; }
    .grid-cell { padding: 8px 2px; font-size: 20px; font-weight: bold; color: #ffffff; background: #1f1f1f; border: 1px solid #2d2d2d; letter-spacing: 0.04em; display: flex; align-items: center; justify-content: center; }
    .grid-cell-empty { color: #444444; }

    /* RESPONSIVE BREAKPOINTS: Mobile Destroy Grid */
    @media (max-width: 768px) {
        .history-control-bar { padding: 15px 10px; }
        .search-input-row { flex-direction: column; align-items: flex-start; gap: 12px; }
        .history-date-input, .history-search-btn { width: 100%; }
        
        .fourd-main-wrapper { padding: 10px; }
        
        /* Kill the grid completely on mobile, use a vertical flex stack instead so it never overflows */
        .fourd-grid-container { 
            display: flex !important; 
            flex-direction: column !important; 
            gap: 20px; 
            width: 100% !important; 
        }
        
        .fourd-card { width: 100% !important; }
        .card-header { padding: 10px; }
        .header-title { font-size: 14px; }
        .header-meta { font-size: 11px; }
        .logo-badge { width: 40px; height: 40px; font-size: 20px !important; }
        
        .prize-box { padding: 12px 0; }
        .prize-number { font-size: 28px; } 
        .tier-title-bar { font-size: 11px; padding: 6px 0; }
        .grid-cell { font-size: 16px; padding: 8px 2px; }
    }

    /* ULTRA-TINY MOBILE (iPhone SE - 320px) */
    @media (max-width: 380px) {
        .fourd-main-wrapper { padding: 5px; }
        .prize-number { font-size: 7vw; } 
        .grid-cell { font-size: 4.5vw; padding: 5px 1px; }
    }