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(7%) sepia(10%) saturate(15%) hue-rotate(347deg) brightness(96%) contrast(85%);
}
.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_LayoutGrid2
{
   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;
}
#LayoutGrid2
{
   box-sizing: border-box;
   padding: 0;
   margin-right: auto;
   margin-left: auto;
}
#LayoutGrid2 > .row
{
   margin-right: 0;
   margin-left: 0;
}
#LayoutGrid2 > .row > .col-1
{
   box-sizing: border-box;
   font-size: 0;
   min-height: 1px;
   padding-right: 0px;
   padding-left: 0px;
   position: relative;
}
#LayoutGrid2 > .row > .col-1
{
   float: left;
}
#LayoutGrid2 > .row > .col-1
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   width: 100%;
   text-align: center;
}
#LayoutGrid2:before,
#LayoutGrid2:after,
#LayoutGrid2 .row:before,
#LayoutGrid2 .row:after
{
   display: table;
   content: " ";
}
#LayoutGrid2:after,
#LayoutGrid2 .row:after
{
   clear: both;
}
@media (max-width: 768px)
{
#LayoutGrid2 > .row > .col-1
{
   float: none;
   width: 100% !important;
}
}
#wb_Text4 
{
   background-color: transparent;
   background-image: none;
   border: 0px solid #000000;
   border-radius: 0px;
   padding: 0;
   margin: 0;
   text-align: center;
}
#wb_Text4 div
{
   text-align: center;
}
#wb_Text4
{
   display: block;
   margin: 0;
   box-sizing: border-box;
   width: 100%;
}
#Html1
{
   display: inline-block;
   width: 100%;
   height: 1475px;
   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;
}
#wb_LayoutGrid2
{
   visibility: visible;
   display: table;
   background-color: transparent;
   background-image: none;
}
#wb_LayoutGrid2
{
   height: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}
#LayoutGrid2
{
   height: auto;
   padding: 0;
}
#LayoutGrid2 .row
{
   margin-right: 0px;
   margin-left: 0px;
}
#LayoutGrid2 > .row > .col-1
{
   padding-right: 0px;
   padding-left: 0px;
}
#LayoutGrid2 > .row > .col-1
{
   display: block;
   width: 100%;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   text-align: left;
}
#Html1
{
   visibility: visible;
   display: block;
}
#wb_Text4
{
   width: 100%;
   visibility: visible;
   display: block;
   margin: 0;
}
#wb_Text4
{
   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;
}
#wb_LayoutGrid2
{
   visibility: visible;
   display: table;
   background-color: #000000;
   background-image: none;
   background-image: none;
}
#wb_LayoutGrid2
{
   height: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}
#LayoutGrid2
{
   height: auto;
   padding: 0;
}
#LayoutGrid2 .row
{
   margin-right: 0px;
   margin-left: 0px;
}
#LayoutGrid2 > .row > .col-1
{
   padding-right: 0px;
   padding-left: 0px;
}
#LayoutGrid2 > .row > .col-1
{
   display: block;
   width: 100%;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   text-align: left;
}
#Html1
{
   visibility: visible;
   display: block;
}
#wb_Text4
{
   width: 100%;
   visibility: visible;
   display: block;
   margin: 0;
}
#wb_Text4
{
   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;
}
#wb_LayoutGrid2
{
   visibility: visible;
   display: table;
   background-color: transparent;
   background-image: none;
}
#wb_LayoutGrid2
{
   height: auto;
   margin-top: 0px;
   margin-bottom: 0px;
}
#LayoutGrid2
{
   height: auto;
   padding: 0;
}
#LayoutGrid2 .row
{
   margin-right: 0px;
   margin-left: 0px;
}
#LayoutGrid2 > .row > .col-1
{
   padding-right: 0px;
   padding-left: 0px;
}
#LayoutGrid2 > .row > .col-1
{
   display: block;
   width: 100%;
   border: 0px solid #FFFFFF;
   border-radius: 0px;
   text-align: left;
}
#Html1
{
   visibility: visible;
   display: block;
}
#wb_Text4
{
   width: 100%;
   visibility: visible;
   display: block;
   margin: 0;
}
#wb_Text4
{
   margin: 0;
   padding: 0;
}
}
/* 1. Sets the whole page up as a flexible column */
body {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important; 
    margin: 0;
}

/* 2. Re-adds the missing middle section and forces it to expand */
#wb_ContentPlace {
    flex: 1 !important; 
    width: 100%;
}

/* 3. Forces Layer 2 to stretch edge-to-edge and obey the page flow */
#Layer2, #Layer2_Container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important; 
}

/* 4. Forces the shapes inside to stretch completely across the screen */
#wb_Shape2, #wb_Shape3, #Shape2, #Shape3 {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    display: block;
}
/* 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;
}
    .fourd-main-wrapper {
        width: 100%; 
        font-family: Arial, Helvetica, sans-serif; 
        box-sizing: border-box; 
        padding: 30px; 
        background: #000000;
    }
    .fourd-grid-container {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(520px, 1fr)); 
        gap: 30px; 
        max-width: 1650px; 
        margin: 0 auto; 
        box-sizing: border-box;
    }
    .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; 
        padding: 0; 
        box-sizing: border-box; 
        display: flex; 
        flex-direction: column; 
        justify-content: space-between; 
        box-shadow: 0 15px 35px rgba(0,0,0,0.6);
        overflow: hidden; 
        height: 100%; /* FIX: Replaced forced aspect-ratio with 100% height to allow natural expansion */
    }
    .card-header {
        padding: 10px 15px; 
        display: flex; 
        justify-content: space-between; 
        align-items: center; 
        box-sizing: border-box;
    }
    .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;
    }
   .logo-badge {
        width: 45px; 
        height: 45px; 
        display: flex; 
        align-items: center; 
        justify-content: center; 
        border-radius: 8px; 
        font-weight: 900;
        box-sizing: border-box;
        font-size: 24px; 
        line-height: 1;
    }
    .top-prizes-row {
        background: #1f1f1f; 
        border-bottom: 1px solid #2d2d2d; 
        display: grid; 
        grid-template-columns: repeat(3, 1fr); 
        text-align: center;
        flex: 1; 
        align-items: center;
    }
    .prize-box {
        padding: 8px 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: 2px; 
        letter-spacing: 0.05em;
    }
    .prize-number {
        font-size: 34px; 
        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: 6px 0; 
        text-transform: uppercase; 
        letter-spacing: 0.08em;
    }
    .tier-subgrid {
        display: grid; 
        grid-template-columns: repeat(5, 1fr); 
        gap: 2px; 
        background: #2d2d2d; 
        text-align: center; 
        padding: 2px;
        flex: 1; 
    }
    .grid-cell {
        padding: 6px 2px; 
        font-size: 18px; 
        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 */
    @media (max-width: 1024px) {
        .fourd-grid-container { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; }
        /* FIX: Removed mobile aspect-ratio restriction */
        .prize-number { font-size: 32px; }
        .grid-cell { font-size: 18px; padding: 10px 2px; }
    }
    
    @media (max-width: 480px) {
        .fourd-main-wrapper { padding: 10px; }
        .fourd-grid-container { grid-template-columns: 1fr; gap: 15px; }
        .card-header { padding: 10px 12px; }
        .header-title { font-size: 13px; }
        .header-meta { font-size: 11px; }
        .logo-badge { width: 40px; height: 40px; font-size: 16px !important; }
        .prize-box { padding: 12px 0; }
        .prize-number { font-size: 28px; } 
        .grid-cell { font-size: 16px; padding: 10px 2px; }
    }