/* Base Layout: Mobile First (Single Column Stack) */
div.container-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px; /* Provides consistent spacing between items */
}

.container div.page-grid { 
  text-align: center;
}

div.ccm-block-page-list-page-entry-grid-thumbnail-hover {
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}

div.ccm-block-page-list-page-entry-grid-thumbnail a {
    position: relative;
    display: block; /* Switched to block for cleaner grid alignment */
    margin: auto;
    max-width: 280px; /* Controls extreme blown-out scaling on small viewports */
}

div.ccm-block-page-list-page-entry-grid-thumbnail a img {
    width: 100%;
    height: auto;
    display: block;
    /* Removed rigid min-width to let images scale down naturally on tiny screens */
}

div.ccm-block-page-list-page-entry-grid-thumbnail-hover {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 2;
}

div.ccm-block-page-list-page-entry-grid-thumbnail a:hover div.ccm-block-page-list-page-entry-grid-thumbnail-hover {
    opacity: 1;
}

div.ccm-block-page-list-page-entry-grid-thumbnail-title-wrapper {
    display: table;
    width: 100%;
    height: 100%;
}

div.ccm-block-page-list-page-entry-grid-thumbnail-title {
    display: table-cell;
    width: 100%;
    text-align: center;
    height: 100%;
    vertical-align: middle;
    color: #fff;	
}

div.ccm-block-page-list-page-entry-grid-thumbnail-title i {
    display: none;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Tablets and Medium Screens (2 Columns Side-by-Side) */
@media (min-width: 576px) {
    div.container-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Desktops and Large Form Factors (All 4 Columns on the Same Row) */
@media (min-width: 992px) {
    div.container-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    div.ccm-block-page-list-page-entry-grid-thumbnail a {
        max-width: 100%; /* Restores full grid capacity on desktop row layouts */
    }
}

/* Customizations for modern dashboard layout grids */
.tcc-game-leaderboards-container .border-dashed {
    border: 2px dashed #dee2e6;
}

/* Ensure long titles truncating smoothly inside tiny viewport columns */
.tcc-game-leaderboards-container .card-header h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Ensure all dashboard leaderboard cards match up at a fixed height */
.tcc-game-leaderboards-container .card {
	height: 320px !important;
}

/* Constrain the body and enable smooth interior vertical scrolling */
.tcc-game-leaderboards-container .card-body {
	height: calc(100% - 54px); /* Subtract approximate header height to prevent footer blowout */
	overflow-y: auto;
}

/* Keep the table structure intact while scrolling inside the body */
.tcc-game-leaderboards-container .table-responsive {
	max-height: 100%;
}

/* Optional: Clean, minimal styling for scrollbars on webkit engines (Chrome/Safari/Edge) */
.tcc-game-leaderboards-container .card-body::-webkit-scrollbar {
	width: 6px;
}
.tcc-game-leaderboards-container .card-body::-webkit-scrollbar-track {
	background: #f8f9fa;
}
.tcc-game-leaderboards-container .card-body::-webkit-scrollbar-thumb {
	background: #dee2e6;
	border-radius: 3px;
}
.tcc-game-leaderboards-container .card-body::-webkit-scrollbar-thumb:hover {
	background: #ced4da;
}

.glass-card {
  background: rgba(18, 12, 45, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 20px;
}

.glow-border-red {
	border: 2px solid #cc0000 !important;
	box-shadow: 0 0 5px #fff, inset 0 0 5px #fff, 0 0 15px #cc0000, inset 0 0 15px #cc0000;
}

.glow-text-purple {
    color: #fff;
    text-shadow: 0 0 4px #fff, 0 0 11px #fff, 0 0 19px #bc13fe, 0 0 40px #bc13fe;
}

/* ==========================================================================
   Fluid Scrolled Table Body Alignment Directives
   ========================================================================== */

#tbody-scroll-wrapper {
	max-height: 300px !important;
	overflow-y: scroll !important;
	overflow-x: hidden !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	display: block !important;
	width: 100% !important;
}

#tbody-scroll-wrapper .tcc-table,
#tbody-scroll-wrapper #leaderboard-entries,
#tbody-scroll-wrapper tr {
	display: block !important;
	width: 100% !important;
}

#tbody-scroll-wrapper tr {
	content: "";
	display: flex !important;
	flex-flow: row nowrap;
	align-items: center;
	justify-content: center;
}

.tcc-table th, 
.tcc-table td {
	flex: 1 1 18% !important;
	width: 18% !important;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	text-align: center;
	display: inline-block !important;
}

.tcc-table th:first-child, 
.tcc-table td:first-child {
	flex: 0 0 10% !important;
	width: 10% !important;
}

.spot-available {
	color: rgba(255, 255, 255, 0.50);
	font-style: italic;
}