html, body {background-color: #07111B; color: #c0c0c0;  min-height: 100%;  font: 400 13px/1.5 Verdana, Geneva, Tahoma, sans-serif;}

main {padding: 1em; max-width: 1400px; margin: auto; margin-top: 40px; min-height: 100vh; }
#header {background: #111; color: white; padding: 0.5em; border-block-end: 2px solid #FFCA2C;}
.header-inside {max-width: 1400px; margin: auto; display: flex; justify-content: space-between; align-items: center;}
nav :is(a:not(.\<button\>),.\<a\>) {color: white!important; margin-right: 1rem;}

a {
  color: #96cbf1;
  text-decoration-line: underline;
  text-decoration-style: dashed;   /* dashed underline */
  text-decoration-thickness: 1px;  /* thin */
  text-underline-offset: 2px;      /* a bit of breathing room */
}

a:hover,
a:focus-visible {
  text-decoration-style: solid;
}


#container {max-width: 1400px; margin: auto; padding: 20px;}
#top-container {display: inline-block; width:49.4%; line-height: 14px; vertical-align: top;}
	
	/* Basic table styling for clarity and responsiveness */
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 8px; text-align: left; }
    th { cursor: pointer; }  /* make headers clickable for sorting */
    /* Align numeric and chart columns */
    th:nth-child(2), td:nth-child(2) { text-align: left; }   /* Players column right-aligned */
    th:nth-child(4), td:nth-child(4) { text-align: center; }  /* Trend chart column centered */
    /* Optional zebra striping for rows */
    tbody tr:nth-child(even) { background: #050e16; }
    tbody tr{ background: #0a1623; }
    

    /* Breakouts and Drops */

          #breakout-block { padding: 10px 0px 0px 10px; background: #0e1e2f; border: 1px solid #00a674;}
      #drops-block {padding: 10px 0px 0px 10px; background: #0e1e2f; border: 1px solid #e83d40;}
      .breakout-game {display: inline-block!important; margin-right: 10px; width: 46%; margin-bottom: 14PX;}
      .breakout-game-img  {width: 120px; display:inline-block; margin-right: 10px; position:relative;}
      .breakout-game-img img   {border-radius: 20%; border-radius:4px; width: 100%;}
      .breakout-game-graph { display:inline-block; text-align: left; vertical-align: top; width: 54%; }
      .breakout-game-title {width: 100%; font-size: 12px; display: block;}
      .percentage-change {            position:absolute;
            top:4px; right:4px;
            background: rgba(0,0,0,0.7);
            color: #fff;
            padding: 2px 4px;
            border-radius: 3px;
            font-size: 0.75rem;
            line-height: 1;
            height  100%;}

        


/*Game Pages*/    

        #toppage {  background: #0e1e2f; margin-bottom: 10px;}

        #leftcolumn {display: inline-block;  width:48%; vertical-align: top; margin-right:50px;}
        #rightcolumn {display: inline-block;  width:48%; vertical-align: top;}
      
    
       .headerimage {display: inline-block; width: 34%;}
       .headerimage img {width: 100%;}


     .game-image  #headeriamge {display: inline-block; width: 22%; vertical-align: top; margin-right: 10px;}

     #regional-prices {display:inline-block; width: 33%; vertical-align: top;   }


    #pubdevdetailsbox {   box-sizing: border-box;
      width: 30%;
             padding: 0px 10px 0px 10px;
              vertical-align: top;
          color: #ffffff;
          border-radius: 10px;
          display: inline-block;
          margin-bottom: 20px;
          text-align: center;
          padding: 4px;
          display: inline-block;
          margin-right: 10px;
          margin-top: 20px;
    }


    #developer {display:inline-block; margin-right: 10px;}
    #publisher {display:inline-block;margin-right: 10px;}
    #platforms {display:inline-block;}



   
      .gameboxtitle {padding-left: 4px; padding-right: 4px; color: #FFCA2C; font-size: 20px; font-weight: bold; display:block;}
      .gamenumberbox {background-color: #0e1e2f;  font-size: x-large; width: 29.9%; text-align: center; display: inline-block; color: white; padding:9px; border-radius: 10px; margin: 0px 2px 20px 0px;}

      .info-row {
     display: inline-block;
    }  

    .info-row span {
        white-space: nowrap;
         text-overflow: ellipsis;
        max-width: 100%;
      }
 
      #news { 
      margin-right: 10px;
      vertical-align: top;
      box-sizing: border-box;

      color: #ffffff;
      border-radius: 10px;
      }

      
      #medianews { 
      margin-right: 10px;
      vertical-align: top;
      box-sizing: border-box;
      color: #ffffff;
      border-radius: 10px;
      }



      #peak-players {width: 100%; margin: auto;}


        .stats-table {
          width: 100%;
          border-collapse: collapse;
          border:0px;
          
        }

        .stats-table th,
        .stats-table td {
          padding: 8px;
          text-align: left;
        }

        .stats-table th:nth-child(2),
        .stats-table td:nth-child(2) {
          text-align: right;  /* Avg Players right-aligned */
        }

        .stats-table th:nth-child(4),
        .stats-table td:nth-child(4) {
          text-align: center;  /* Min Players center-aligned (if desired) */
        }

        .stats-table tbody tr:nth-child(even) {
          background: #050e16;
        }

        /*Game Details and information*/

        #about-the-game {display: inline-block; width: 77%; margin-right: 30px;}
        .gameinfo {display: inline-block; width: 18%; vertical-align: top; padding: 10px 12px;
    border: 1px solid #2d3946;
    border-radius: 10px;
    background:#0e1e2f;}
        .gameinfo li {margin-bottom: 10px; }
        .gameinfo ul {margin-left: -20px;}

        /* Tables css on game pages*/

                .table-toggle-buttons a {
display: inline-block;
    padding: 6px 12px;
    border: 1px solid #D43A8F;
    color: #28D6C9 ;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background 0.2s, color 0.2s;
              
        }
        .table-toggle-buttons a.active {
          background: #D43A8F;
          color: #FFFFFF!important;
          font-weight: bold;
        }

        .table-toggle-buttons {    text-align: end; margin-bottom: 10px; margin-top: 20px;}



/* Scrollable tables on game pages (Daily / Monthly / Yearly) */
#table-container .table-view {
  max-height: 520px;          /* adjust as you like */
  overflow-y: auto;
  border: 1px solid #1c2228;
  background: #14181c;
  padding: 0;                  /* keep table flush to edges */
}

/* Keep header visible while scrolling */
#table-container .table-view table {
  border-collapse: separate;   /* needed so sticky header border/shadow shows */
  border-spacing: 0;
  width: 100%;
}

#table-container .table-view thead th {
  position: sticky;
  top: 0;
  background: #0e1e2f;
  z-index: 5;
  box-shadow: 0 1px 0 #FFCA2C; /* faux bottom border */
}

/* Match the nice custom scrollbar you used on the homepage */
#table-container .table-view::-webkit-scrollbar { width: 12px; }
#table-container .table-view::-webkit-scrollbar-track {
  background: #081728;
  border-radius: 6px;
}
#table-container .table-view::-webkit-scrollbar-thumb {
  background-color: #16375a;
  border-radius: 6px;
  border: 3px solid #081728;
}
#table-container .table-view::-webkit-scrollbar-thumb:hover { background-color: #555; }
#table-container .table-view { scrollbar-width: thin; scrollbar-color: #16375a #081728; }
#table-container .table-view { scrollbar-gutter: stable; }

        #viewmorebutton {width: 100%; text-align: center;}

        #viewmorebutton a {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.7rem;
            background-color: #D43A8F;
            color: white;
            text-decoration: none;
            border-radius: 0.375rem;
            font-weight: 500;
            color: white; 
          }
          #viewmorebutton.disabled a {
            opacity: 0.5;
            pointer-events: none;
          }



          #website {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.7rem;
            background-color: #D43A8F;
            color: white;
            text-decoration: none;
            border-radius: 0.375rem;
            font-weight: 500;
            color: white; 
            margin-top: 10px;
          }
          #website.disabled {
            opacity: 0.5;
            pointer-events: none;
          }
          #website .icon {
            width: 1em;
            height: 1em;
            vertical-align: middle;
            /* remove any default img spacing */
            display: inline-block;
            filter: brightness(0) invert(1);
          }




          #store {
            display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.7rem;
            background-color: #D43A8F;
            color: white;
            text-decoration: none;
            border-radius: 0.375rem;
            font-weight: 500;
            color: white; /
            margin-top: 10px;
          }
          #store.disabled {
            opacity: 0.5;
            pointer-events: none;
          }
          #store .icon {
            width: 1em;
            height: 1em;
            vertical-align: middle;
            /* remove any default img spacing */
            display: inline-block;
            filter: brightness(0) invert(1);
          }


             #details-toggle {
              display: inline-flex;
              align-items: center;
              padding: 0.2rem 0.7rem;
              background-color: #D43A8F;
              color: white;
              text-decoration: none;
              border-radius: 0.375rem;
              font-weight: 500;
              margin-top: 10px;

            }

            #details-toggle .icon {
              width: 1em;
              height: 1em;
              vertical-align: middle;
              display: inline-block;
              filter: brightness(0) invert(1);
              margin-right: 4px;
            }
              #game-details.collapsed .collapsible-content {
                  display: none;
                  padding-top:0px;
            }
            
            #game-details .collapsible-content {padding: 20px 100px 20px 100px;}
          
              aside#game-details h2 {font-size: 22px;}
              aside#game-details { font-size: 1em; padding-block:0;}

              #game-details {
              box-sizing: border-box;
              vertical-align: top;
              color: #ffffff;
              border-radius: 10px;
              display: inline-block;
              border: 0px;
              margin-block: auto!important;
              width: 100%}

             h3 {margin-block-end: 4px!important}

            .review-scores {
              gap: 0.75rem;
              align-items: center;
              margin: 0px 40px 0px 0px;
              display: inline-block;
              width: 34%;
              vertical-align: top;
              
            }

            #review-pie {display: inline-block; width: 50%; vertical-align: top;}

  
            .review-scores-list {list-style: none; width: 100%; margin-bottom: 10px;   background:#0e1e2f;
              color: white; padding: 4px 8px;
              border-radius: 6px;    font-size: 0.95rem;}

 .review-scores .positive {color: #00a674; font-weight:bold;}
 .review-scores .negative {color: #e83d40; font-weight:bold;}

            .reviewbtn {display: inline-flex;
            align-items: center;
            padding: 0.2rem 0.7rem;
            background-color: #D43A8F;
            color: white;
            text-decoration: none;
            border-radius: 0.375rem;
            font-weight: 500;
            margin-top: 10px;
            margin: auto;}
            
            .reviewbtn a,
            .reviewbtn a:visited {
              color: white!important;
              font-weight: bold!important;
            }

            #gameFilter {    padding: 6px;
    border-radius: 5px;}


            .game-table {  max-height: 410px;   overflow-y: auto;    
  overflow-y: auto;
  border: 1px solid #1c2228;
  padding: 0px 0px 0px 0px;
  background: #14181c;
    }

    .game-table table {
  border-collapse: separate; /* stop collapsing so shadow/border stays visible */
  border-spacing: 0;
  width: 100%;
}

.game-table thead th {
  position: sticky;
  top: 0;
  background: #0e1e2f;
  z-index: 5;
  border-bottom: none; /* no collapsed border */
  box-shadow: 0 1px 0 #FFCA2C; /* fake bottom border that stays visible */
}

/* 1) WebKit browsers (Chrome, Safari, new Edge) */
.game-table::-webkit-scrollbar {
  width: 12px;               /* width of the scrollbar */
}

.game-table::-webkit-scrollbar-track {
  background: #081728;       /* track color */
  border-radius: 6px;        /* rounded track */
}

.game-table::-webkit-scrollbar-thumb {
  background-color: #16375a;    /* thumb (the draggable piece) */
  border-radius: 6px;        /* rounded corners */
  border: 3px solid #081728; /* gives padding around thumb */
}

.game-table::-webkit-scrollbar-thumb:hover {
  background-color: #555;    /* hover state */
}

/* 2) Firefox */
.game-table {
  scrollbar-width: thin;           /* “auto” | “thin” | “none” */
  scrollbar-color: #16375a #081728;   /* thumb-color track-color */
}

/* 3) Standard Scrollbar CSS (future-proofing) */
/* Some browsers will eventually support this without prefix */
.game-table {
  scrollbar-gutter: stable; /* reserve space so layout doesn’t shift */
}


.game-table:hover {
  scrollbar-width: thin;        /* restore on hover (Firefox) */
}
.game-table:hover::-webkit-scrollbar {
  display: block;               /* restore on hover */
}

#price-history-block {margin-top:20px;}

#benchmark {            display: block;
            align-items: center;
            padding: 0.2rem 0.7rem;
            background-color: #D43A8F;
            color: white;
            text-decoration: none;
            border-radius: 0.375rem;
            font-weight: 700;
            color: white; /
            margin-top: 10px;
           display: block;
          text-align: center;}
.pcgbtext {color: #FFCA2C; font-size:11px;}

.news-title {display: inline-block; width: 88%;}
.news-meta {display: inline-block; width: 10%; vertical-align: top;}
.news-container {     padding: 5px 5px;    border: 1px solid #2d3946;    border-radius: 10px;    background: rgba(10, 14, 19, .45); margin-bottom:10px;}
.badge-new {color: #FFCA2C;}

/*/////////////////////
/*Select boxes and Inputs
////////////////////////*/


#sort-selector, #price-search, #regionSelector { padding: 6px; border-radius: 5px;}
#gameF  ilter, #price-search, #regionSelector { padding: 6px; border-radius: 5px;}
#game-search {padding: 6px; width: 250px; text-align: left;  border-radius: 5px;}
:where(button,input[type=submit],input[type=reset],input[type=button],.\<button\>):not(.\<a\>) {background: #D43A8F!important; color: #FFFFFF!important; padding: 5px;  }

/*Front Blocks*/

.block {
  min-width: 300px;
  box-sizing: border-box;
  padding: 0px 10px 0px 10px;
  color: #ffffff;
  border-radius: 10px;
  display: block;
}

h1 {color: #28D6C9;}
h2 {color: #28D6C9;}
h3 {color: #28D6C9; font-size: 1em;}
.block h2 {color: #28D6C9;}



.front-right {display: inline-block; max-width: 49%; vertical-align: top;    }


.block a { color: #f7b840; }

/* Table styling */


tbody {
    border-block: 1px solid #FFCA2C!important;
}

section#currentstats {width: 50%; display: inline-block; vertical-align: top;  margin-right: 10px; }
section#newgames {width: 48.9%; display: inline-block; vertical-align: top; margin: 0px 0px 20px 0px;}
section#currentstats h2,
section#newgames h2 {
  margin-top: 20px;
}

.main-table {  overflow-y: auto;    
  max-height: 610px;
  height: 610px;
  min-height: 610px;
  overflow-y: auto;
  border: 1px solid #1c2228;
  padding: 0px 0px 0px 0px;
  background: #0a1623;
    }

    .main-table table {
  border-collapse: separate; /* stop collapsing so shadow/border stays visible */
  border-spacing: 0;
  width: 100%;
}

.main-table thead th {
  position: sticky;
  top: 0;
  background: #0e1e2f;
  z-index: 5;
  border-bottom: none; /* no collapsed border */
  box-shadow: 0 1px 0 #FFCA2C; /* fake bottom border that stays visible */
}

/* 1) WebKit browsers (Chrome, Safari, new Edge) */
.main-table::-webkit-scrollbar {
  width: 12px;               /* width of the scrollbar */
}

.main-table::-webkit-scrollbar-track {
  background: #081728;       /* track color */
  border-radius: 6px;        /* rounded track */
}

.main-table::-webkit-scrollbar-thumb {
  background-color: #16375a;    /* thumb (the draggable piece) */
  border-radius: 6px;        /* rounded corners */
  border: 3px solid #081728; /* gives padding around thumb */
}

.main-table::-webkit-scrollbar-thumb:hover {
  background-color: #555;    /* hover state */
}

/* 2) Firefox */
.main-table {
  scrollbar-width: thin;           /* “auto” | “thin” | “none” */
  scrollbar-color: #16375a #081728;   /* thumb-color track-color */
}

/* 3) Standard Scrollbar CSS (future-proofing) */
/* Some browsers will eventually support this without prefix */
.main-table {
  scrollbar-gutter: stable; /* reserve space so layout doesn’t shift */
}


.main-table:hover {
  scrollbar-width: thin;        /* restore on hover (Firefox) */
}
.main-table:hover::-webkit-scrollbar {
  display: block;               /* restore on hover */
}

.discount {background: #125d04; color: #FFFFFF; font-weight: bold; padding: 0px 5px 0px 5px;}


.positive {color: #00a674; font-weight:bold;}
.negative {color: #e83d40; font-weight:bold;}

.topgraph {display: inline-block; width: 100%; vertical-align: top;}


/*Pagination*/
.pagination {margin: auto; text-align: center;}
/*Numbner container boxes*/
.numberbox {background-color: #1c2228;  font-size:smaller; width: 32%; text-align: center; display: inline-block;}
.boxtitle {padding-left: 4px; padding-right: 4px; color: #970fee;}

/*Select Boxes*/
#trendingSortSelect {width: 100%; background: #000000; color: #c0c0c0;}

/*Search Box and results*/

#game-search {text-align: left;}

input::placeholder {
  text-align: left!important;
}

#search-results {
  color: black;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #ccc;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    display: none;
    }


#chart-modes {
  display: flex;
  justify-content: flex-end; /* right-align the links */
  gap: 1rem;
  margin-bottom: 1rem; /* optional: move inline style here */
}

.chart-mode-link,
.chart-mode-link:visited {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #D43A8F;
  color: #28D6C9!important;
  text-decoration: none;
  border-radius: 4px;
  font-weight: bold;
  transition: background 0.2s, color 0.2s;
}

.chart-mode-link.active,
.chart-mode-link.active:visited {
  background: #D43A8F;
  color: #fff!important;
}

/*///////////////
//////// Reviews page 
///////////////*/

#windowPreset {    padding: 6px;
    border-radius: 5px;}

.cover { border-radius: 4px; }
.score { font-weight: 700; }

.bar{
  display:inline-block; width:160px; height:8px;
  background:#c9372c; border-radius:9999px; overflow:hidden; margin-top:4px;
}
.bar > .fill{
  display:block; height:100%;
  background:#00a674; width:0; /* set in JS */
}

    .controls {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
      align-items: center;
      margin-bottom: 1rem;
    }
    .nowrap {
      white-space: nowrap;
    }
    .score {
      font-weight: 700;
    }
    
    .cover {
      width: 60px;
      height: 28px;
      object-fit: cover;
      border-radius: 4px;
    }
    .pager {
      text-align:center;
      gap: 0.5rem;
      align-items: center;
      margin-top: 1rem;
    }



    .rank{ text-align:center; width:1%; }
.rank-pill{
  display:inline-block; min-width:2ch; padding:2px 8px;
  border-radius:9999px; font-weight:700;
  background:#2a2f36; color:#e5e7eb;  /* default */
}
.rank--gold  .rank-pill{ background:#d4af37; color:#0b0d10; }
.rank--silver.rank .rank-pill{ background:#c0c0c0; color:#0b0d10; }
.rank--bronze .rank-pill{ background:#cd7f32; color:#0b0d10; }


/* Genre pill base */
.genre-pill{display:inline-block;padding:.3rem .55rem;margin:.15rem;border:1px solid #546170;border-radius:999px;background:transparent;color:#cfe6ff;cursor:pointer;font:600 12px/1 Verdana, Geneva, Tahoma, sans-serif;user-select:none;transition:transform .02s, box-shadow .15s, background .15s, border-color .15s;}
.genre-pill:active{transform:translateY(1px)}
.genre-pill.off{opacity:.6;border-style:dashed}
.genre-pill.inc{background:rgba(22,160,133,.18);border-color:#FFCA2C;box-shadow:inset 0 0 0 1px #FFCA2C;}
#genre-list .genre-pill, #genrePills .genre-pill{display:inline-block;}
/* (no .genre-pill.exc) */

/*Genre Dominance*/

.page-title { margin: 0 0 1rem; font: 700 22px/1.2 Verdana, Geneva, Tahoma, sans-serif; }
.controls { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin: .5rem 0 1rem; }
.controls label { font: 600 12px/1 Verdana, Geneva, Tahoma, sans-serif; color: #cfe6ff; }
.controls input { margin-left: .4rem; width: 5rem; }
.controls button { padding: .4rem .75rem; border: 1px solid #546170; background: transparent; color: #cfe6ff; border-radius: 6px; cursor: pointer; }

.genre-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.genre-card {
  border: 1px solid #394451;
  border-radius: 12px;
  padding: .75rem;
  background: rgba(0,0,0,.25);
  box-shadow: 0 1px 6px rgba(0,0,0,.25);
}
.genre-card h2 {
  margin: 0 0 .25rem;
  font: 700 14px/1.2 Verdana, Geneva, Tahoma, sans-serif;
  color: #FFCA2C;
}
.genre-card .meta {
  font: 600 11px/1 Verdana, Geneva, Tahoma, sans-serif;
  opacity: .8;
  margin-bottom: .25rem;
}


.pie-tip { padding: 6px 8px; font: 600 12px/1 Verdana, Geneva, Tahoma, sans-serif; color: #cfe6ff; }
.pie-tip .n { opacity: .95; margin-right: .5rem; }

/* The VS Widget styling */

.vs-widget { margin: 1.5rem 0 2rem; }
.vs-row { display:flex; align-items:center; gap:.75rem; flex-wrap:wrap; }
.vs-input { position:relative; flex:1 1 320px; }
.vs-input input{
  width:96%; padding:.6rem .75rem; border:1px solid #546170;
  border-radius:10px; background:#10161d; color:#cfe6ff; outline:none;
}
.vs-input input:focus{ border-color:#FFCA2C; box-shadow:0 0 0 2px rgba(255,202,44,.2); }
.vs-center{
  font:700 18px/1 Verdana, Geneva, Tahoma, sans-serif; color:#FFCA2C; padding:0 1rem;
}
.vs-btn{
  padding:.65rem 1rem; border:1px solid #FFCA2C; border-radius:12px;
  background:rgba(22,160,133,.18); color:#cfe6ff; cursor:pointer; font-weight:700;
  width: 100%;
}
.vs-btn:disabled{ opacity:.5; cursor:not-allowed; }
.vs-suggest{
  position:absolute; left:0; right:0; top:100%; z-index:20;
  background:#0c1117; border:1px solid #394451; border-radius:10px;
  margin-top:.25rem; display:none; max-height:260px; overflow:auto;
}
.vs-suggest div{
  padding:.5rem .75rem; cursor:pointer; display:flex; gap:.5rem; align-items:center;
}
.vs-suggest div:hover{ background:#141c25; }
.vs-suggest img{ width:24px; height:24px; object-fit:cover; border-radius:6px; }
.vs-hint{ opacity:.7; margin:.4rem 0 0; font-size:.9rem; }

/*////////////Versus Page///////////*/

/* Header image + name */
#left-col {width: 48%; display: inline-block; margin: 10px;     vertical-align: top;}
#right-col {width: 48%; display: inline-block; margin: 10px;     vertical-align: top;}

.game-card .hdr {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 12px;
}
.game-card .hdr img {
  width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}



/* ===== THE NAMES (left/right) ===== */
#left-name,
#right-name,
.game-card .hdr h2 {
  margin: 0;
  font-weight: 700;
  /* Big but responsive; adjust to taste */
  font-size: clamp(18px, 2.4vw, 28px);
  line-height: 1.15;
  color: #cfe6ff;
  letter-spacing: .2px;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
  /* optional subtle underline accent */
  border-bottom: 1px solid rgba(84, 97, 112, .5);
  padding-bottom: 6px;
}

/* Stats row under the name */
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 12px;
}
.stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #2d3946;
  border-radius: 10px;
  background: rgba(10, 14, 19, .45);
}
.stat span { color: #93a9c4; font-size: 12px; }
.stat strong { color: #FFCA2C; font-size: 16px; }

.apexcharts-canvas,
.apexcharts-svg { width: 99% !important; max-width: 99% !important; }
#compare-grid .chart { width: 100%; max-width: 100%; overflow: hidden; }
#compare-grid .col, #compare-grid .game-card { min-width: 0; }
#versus-intro{ z-index:2147483646; }

/*////////////////
////Footer
////////////////*/

.site-footer {
  margin-top: 1.5rem;
  padding: 0.5rem;
  text-align: center;
  font-size: 0.9rem;
  color: #ccc;
  border-top: 1px solid #ffca2c;
  background-color: #111;
}
.site-footer a {
  color: #ffca2c;
  text-decoration: none;
}
.site-footer a:hover {
  text-decoration: underline;
}

/*////////
////Cleanup
///////////*/

.img-steam {
  width: 120px;   /* or 100px where needed */
  height: 56px;   /* 100x47 -> keep consistent */
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}

.table-img {margin-right: 8px; border-radius: 5px;}
/* Offscreen sections don't impact layout/paint until viewed */
section[data-cv] { content-visibility: auto; contain-intrinsic-size: 1px 400px; }

newgames, #currentstats, #breakouts { content-visibility: auto; contain-intrinsic-size: 1px 600px; }

.breakout-game-graph > div[id^="breakout-chart-"],
.breakout-game-graph > div[id^="drop-chart-"],
#newReleasesTableBody td div[id^="hot-chart-"] {
  width: 100px;
  height: 40px;
  display: inline-block;
}

#gamesTableBody tr { content-visibility: auto; contain-intrinsic-size: 80px; }

/*//////////Mobile Stuff/////////////////////*/

/* Visually hidden (for the Currency label) */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 1px, 1px);
  white-space: nowrap; border: 0;
}

/* Hamburger default (hidden on desktop) */
.hamburger {
  display: none;
  background: transparent;
  border: 0;
  padding: 6px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #fff;       /* matches your dark header */
  margin: 4px 0;
  border-radius: 2px;
}

/* Mobile collapse: only the first/top menu */
@media (max-width: 900px) {
  /* let header items wrap nicely */
  .header-inside { flex-wrap: wrap; gap: 6px; }

  /* hide the top link bar by default */
  #header .primary-nav {
    display: none;
    width: 100%;
  }
/*Breakouts etc*/

#top-container {width: 100%;}

/*Vs text */

.vs-center {width: 100%; text-align: center;}

/*Current Stats & new games homepage*/

section#currentstats {width: 100%;}
section#newgames {width: 100%;}

  /* show when toggled */
  #header .primary-nav.open {
    display: flex;
    flex-direction: column;
    padding-top: 6px;
  }

  /* stacked link styling */
  #header .primary-nav a {
    padding: 8px 0;
    margin-right: 0;                  /* override desktop spacing */
    border-top: 1px solid #1c2228;
  }
  #header .primary-nav a:first-child { border-top: 0; }

  /* show hamburger on mobile */
  .hamburger { display: inline-block; }
}