<style>
    /* General Reset */
    * { margin: 0; padding: 0; }

    /* General styles */
    body { height: 100%; background-color: #f5f5f5; background-image: url(/Images/imgphped0.png); background-repeat: repeat; font-family: Arial, Helvetica, sans-serif; font-size: 12px; color: #333; }
/*    img { border: 0; } */
    a { color: #000000; text-decoration: none; }
    a:visited { color: #000000; }
    a:hover { color: #0000c0; }

    .blog-link {
	  color: #ff5722;
	  text-decoration: underline dotted;
    }

    .blog-link:hover {
      color: #e91e63;
      text-decoration: underline wavy;
    }

    /* Wrapper  was width 1400px */
    #wrapper { width: auto; min-width:1400px; margin: 0 auto; padding: 0; border: 1px solid #dfdfdf; background: #ffffff; color: #333333; font-size: 1.0em; line-height: 150%; }

    /* Header */
/*    header, #header { width: 100%; background-color: #007BFF; background-image: url(/Images/imgphpvg2.png); background-repeat: repeat-x; padding: 20px; text-align: center; color: white; } */
    header, #header {width: 100%;max-height: 300px;background-color: #020202;background-repeat: repeat-x;padding: 2px;text-align: center;color: white;}
/*    header img, #header img { max-width: 150px; margin-bottom: 10px; } */
    header img, #header img {/* max-width: 150px; */margin-bottom: 10px;} */
    header h1, #header #title { font-size: 4em; margin: 0; /*        color: white; */ color: LightGray; font-weight: bold; text-shadow: 1px 1px grey; }
    #header #title { color: #000000; font: bold 2.5em 'Arial Black', sans-serif; text-align: left; }
    #header #title a { color: #000000; }
    #header #description { margin: 5px 0 0 30px; color: #666666; font-size: 1.2em; text-align: left; }

    /* Navigation */
/*    nav, #navigation { width: 93%; margin: 0; padding: 10px 2% 0 5%; background-color: #333; background-image: url(/Images/imgphprs3.png); background-repeat: repeat-x; color: white; text-align: center; } */
    nav, #navigation {width: 100%;margin: 0;padding: 2px 2px 2px 2px;background-color: #000;background-repeat: repeat-x;color: white;text-align: center;}
    nav a, #navigation li a { color: white; margin: 0 15px; text-decoration: none; font-weight: bold; }
    nav a:hover, #navigation li a:hover { text-decoration: underline; }
    #navigation ul { list-style: none; float: right; }
    #navigation li { display: inline; float: left; }
    #navigation li a.tabs { float: left; padding-left: 4px; background: url(/Images/l4iw5.gif) no-repeat; text-decoration: none; }
    #navigation li a.tabs:hover { background: url(/Images/l41uw6.gif) no-repeat; }
    #navigation li a.tabs span { float: left; padding: 5px 15px 4px 6px; background: url(/Images/r4zw5.gif) no-repeat right top; color: #6B78A9; font-size: 1.0em; }
    #navigation li a.tabs:hover span { background: url(/Images/r41qi1.gif) no-repeat right top; color: #6B78A9; }

    /* Container */
    .container {/* max-width: 1200px; */width: 100%;margin: 5px auto;padding: 20px;background-color: #bcb8b8;background-image: url('/images/punchy.gif');/* background-size: 20%; */background-repeat: repeat;background-position: right;background-blend-mode: lighten;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);border-radius: 8px;} /* UNUSED I THINK */

    /* Main-content */
    .buf { margin: 20px 25px 10px; padding: 10px 20px; border: 1px solid #999999; border-left-width: 5px; background: url(/Images/imgphpym1.png) repeat; color: #000000; font: bold 1.6em 'Arial', sans-serif; text-align: left; }
    #main-content h2 a { color: #000000; } /* Main contents */ 
    contents { width: auto; margin: 20px 0 0; padding: 0; background: #ffffff; font-size: 1.0em; text-align: left; } /* UNUSED? */
    #contents h2 { margin: 20px 25px 10px; padding: 10px 20px; border: 1px solid #999999; border-left-width: 5px; background: url(/Images/imgphpym1.png) repeat; color: #000000; font: bold 1.6em 'Arial', sans-serif; text-align: left; }
    #contents h2 a { color: #000000; }
    #contents .contents_body { margin: 15px 25px; padding: 0; }
    #contents h3 { margin: 20px 25px 10px; padding: 10px 20px; font: bold 1.0em 'Arial', sans-serif; text-align: left; }
    #contents blockquote { padding: 10px; background: #efefef; border: 1px solid #999999; }

    /* Sidebar */
    #firstSide { float: left; }
    .sidebar {  width: 180px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* new */ border-radius: 8px; /* new */ box-sizing: border-box; /* new */ margin: 20px 5px 10px 0; padding-left: 10px; background: #ffffff; font-size: 1.0em; text-align: left; }
    .sidebar h4 { margin: 20px 15px 0 0; padding: 5px 10px; border-bottom: 1px dashed #171717; border-left: 5px solid #171717; background: url(/Images/imgphpog5.png) repeat; color: rgba(23, 23, 23, 1.0); font: bold 1.0em 'Arial', sans-serif; text-align: left; }
    .sidebar ul { list-style: none; margin-left: -20px; width: 140px; }
    .sidebar p { padding: 3px 0 3px 15px; }
    .sidebar li { display: block; line-height: normal; padding: 3px 0 3px 0px; border-bottom: 1px dashed #999999; font-size: 1.0em; text-align: left; text-decoration: none; }
    .sidebar li a { display: block; line-height: normal; background: #ffffff; color: #999999; font-size: 1.0em; text-align: left; text-decoration: none; }
    .sidebar li a:hover { background: #efefef; color: rgba(23, 23, 0, 1.0); }
    .sidebar form { width: 140px; }
    .sidebar form button { display:block; line-height: normal; background: #ffffff; color: #999999; font-size: 1.0em; text-align: left; text-decoration: none; border:none; padding:0; margin:-20px 0 -10px -10px; cursor:pointer; width:100%; }
    .sidebar form button:hover { background: #efefef; color: rgba(23, 23, 0, 1.0); }

    /* Intro section - USED? Sept 2, 2024 */
    .intro {text-align: center;margin-bottom: 0px;}
    .intro h2 {font-size: 1.75em;color: #FEFEFE;text-shadow: 3px 3px #605d5d;margin-bottom: 10px;}
    .intro p { font-size: 1.2em; color: #555; }

    /* Features section - USED? Sept 2, 2024 */
    .features { display: flex; flex-wrap: wrap; justify-content: space-between; }
/*    .feature { flex: 1; min-width: 250px; margin: 20px; padding: 20px; background-color: #f7f7f7; border-radius: 8px; text-align: center; } */
    .feature {flex: 1;min-width: 200px;margin: 10px;/* padding: 20px; */background-color: rgba(1,1,1,0.1);border-radius: 8px;/* background-color: #d7d3d3; */text-align: center;}
/*    .feature h3 { font-size: 1.5em; margin-bottom: 10px; color: #007BFF; } */
    .feature h3 { font-size: 1.5em; margin-bottom: 10px; color: #020202; }
    .feature p {font-size: 10pt;color: #060000;font-weight: bold;}

    /* Call-to-action button */
/*    .cta-button { display: inline-block; padding: 15px 30px; margin: 20px 0; font-size: 1.2em; color: white; background-color: #007BFF; text-decoration: none; border-radius: 8px; transition: background-color 0.3s; } */
    .cta-button {
	display: inline-block;
	width: 200px;
	padding: 10px;
	font-size: 1.2em;
	color: white;
	text-decoration: none;
	background-color: rgba(223, 23, 0, 0.7); /* Semi-transparent background */
	font-weight: bold;
	text-align: center;
	border-radius: 5px;
	transition: background-color 0.3s ease;
    }
    .cta-button:hover { background-color: rgba(100,100,100,0.5); }

    /* Footer */
    footer, #footer { clear: both; background-color: #c3c3c3; color: white; text-align: center; padding: 20px; margin-top: 40px; }
    footer small { font-style: italic; }

    /* For allStats.pl */
    .table-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 20px;
    }

    /* Sortable and tables with alternating color (tictoc) tables */
table.sortable a.sortheader {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
    display: block;
}

table.sortable span.sortarrow {
    color: black;
    text-decoration: none;
}

table.tictoc,
table.sortable {
    border-collapse: collapse; /* Ensure the borders of the table and cells collapse into one */
}

/* Alternate row colors */
table.tictoc tbody tr:nth-child(odd):not(.head):not(.sortbottom),
table.sortable tbody tr:nth-child(odd):not(.head):not(.sortbottom) {
    background-color: #ffffff; /* White background for odd rows */
}

table.tictoc tbody tr:nth-child(even):not(.head):not(.sortbottom),
table.sortable tbody tr:nth-child(even):not(.head):not(.sortbottom) {
    background-color: #eeeeee; /* Light grey background for even rows */
}

/* add styles for table borders and padding */
table.sortable th, table.sortable td {
    border: 2px solid #dddddd; /* Border for table cells */
    text-align: left;
}
table.tictoc th, table.tictoc td {
    border: 2px solid #dddddd; /* Border for table cells */
}

/* Styling for header and sortbottom rows */
table.tictoc tr.head,
table.sortable tr.head,
table.sortable tr.sortbottom,
table.tictoc tr.sortbottom {
    background-color: #ccd9b6; /* Light greenish background */
}

/* Borders for the head and sortbottom rows */
table.sortable tr.head th,
table.sortable tr.sortbottom td {
    border: 2px solid #ffffff; /* White borders for header and footer cells */
    text-align: left;
}
table.tictoc tr.head th,
table.tictoc tr.sortbottom td {
    border: 2px solid #ffffff; /* White borders for header and footer cells */
}

/* Flex container for horizontal layout */
.form-container {
    display: flex;
    gap: 15px; /* Add space between the buttons/forms */
    align-items: center; /* Align vertically if needed */
}

/* Optional: Adjust form or button styling */
.form-container form {
    margin: 0; /* Remove default margin */
}

.form-container input[type="submit"] {
    padding: 5px 10px; /* Optional padding for better appearance */
    font-size: 1em; /* Ensure consistent button size */
}
.plead {
    font-size: 9pt;
    text-align: right !important;
    font-weight: bold;
    background-color: #88ff88;
}


    .head,
    .sortbottom,
    .headr { font-size: 9pt; text-align: left; font-weight: bold; border: 2px solid #ffffff !important; }
    .sortbottom,
    .head { background-color: #ccd9b6; } 
    .headr { background-color: #d9ccb6; }
    .headc { background-color: #ccd9b6; text-align: center; } 
    .pts,
    .psc { font-size: 9pt; text-align: right !important; font-weight: bold; background-color: #cddbb8; }
/*    .psc { font-size: 9pt; text-align: right; font-weight: bold; background-color: #ccd9b6; } */
    .inj { color: blue;}

    /* Extend styling for links within text */
.txt a {
    color: #007bff; /* Change link color */
    text-decoration: underline; /* Add underline to links */
}

/* Optional: Style for hovering over links */
.txt a:hover {
    color: #0056b3; /* Darken link color on hover */
    text-decoration: none; /* Remove underline on hover */
}
.ybg {
    background-color: yellow;
}

.ecell {
  text-align: center; /* This centers all text by default */
  white-space: normal; /* Allows text to wrap */
}

.eright {
  display: block;
  text-align: right; /* Right-aligns only the first line */
}

.ecenter {
  display: block;
  text-align: center; /* Centers all subsequent lines */
}

/* Styles for live draft lists */
    .sml { font-size: 7pt; text-align: left; }
    .yell{ font-style: italic; text-decoration: underline; background-color: #ffff55; }
    .gll { text-align: right; background-color: #ddeedd; }
    .txtl { text-align: center; }
    .numl { text-align: right !important; }

    .txt,
    .nsc,
    .cen,
    .scr { font-size: 9pt; text-align: center; }
    .numg { font-size: 9pt; text-align: right; background-color: #ccddcc; }
    .num { font-size: 9pt; text-align: right !important; }
    .tsc { font-size: 9pt; text-align: left; }
    .tac { font-size: 9pt; text-align: right; }
    .tec { font-size: 9pt; text-align: center; background-color: #eeeeee; }
    .tfc { font-size: 9pt; text-align: center; background-color: #ffffff; }
    .tic { font-size: 9pt; text-align: right; background-color: #eeeeee; }
    .ttc { font-size: 9pt; text-align: left; background-color: #eeeeee; }
    .toc { font-size: 9pt; text-align: right; background-color: #dddddd; }
    .yel { font-size: 9pt; text-align: left; font-style: italic; text-decoration: underline; background-color: #ffff55; }
    .yelc { font-size: 9pt; text-align: center; font-style: italic; text-decoration: underline; background-color: #ffff55; }
    .yll { font-size: 9pt; text-align: center; color=blue; text-decoration: underline; font-weight: bold; background-color: #ffff55; }
    .red { font-size: 9pt; text-align: right; font-weight: bold; background-color: #ffff55; }
    .gry { font-size: 9pt; text-align: right; font-weight: bold; background-color: #aaaaaa; }
    .plr { font-size: 9pt; text-align: left; width: 190px;}
    .plp { font-size: 9pt; text-align: left; color: red; width: 190px;}
    .pli { font-size: 9pt; font-style: italic; background-color: #ffff55; text-decoration: underline; text-align: left; width: 190px;}
    .bred { font-size: 1.2em; color: red; font-weight: bold; }
    .big { font-size: 1.2em; font-weight: bold; }
    .dull { font-size: 8pt; color: #777777; }
    .cst { font-size: 16pt; font-weight: bold; }
    .tmh { font-size: 12pt; background-color: #ffffff; }

.bbut, .bbut:visited, a.bbut:visited {
    font-size: 1em;
    padding: 10px 20px;
    background-color: #007BFF;
    color: white;
    border: none;
    cursor: pointer;
    position: relative;
    margin-bottom: 2px;
    font-weight: bold;
    transition: all 0.2s ease; /* Smooth transition for hover effects */
}
.bbut:hover, .bbut:visited:hover, a.bbut:visited:hover {
    background-color: #0056b3; /* Darker shade */
    transform: scale(1.02); /* Slight zoom */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.gbut, .gbut:visited, a.gbut:visited {
	font-size: 1em; padding: 10px 20px; background-color: #00bB7F; color: white;
	border: none; cursor: pointer; position: relative; margin-bottom: 2px; font-weight:bold; 
}
.gbut:hover, .gbut:visited:hover, a.gbut:visited:hover {
    background-color: #00a16e; /* Darker shade */
    transform: scale(1.02); /* Slight zoom */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
.ybut, .ybut:visited, a.ybut:visited {
	font-size: 1em; padding: 10px 20px; background-color: #ffc400c7; color: black;
	border: none; cursor: pointer; position: relative; margin-bottom: 2px; font-weight:bold; 
}
.ybut:hover, .ybut:visited:hover, a.ybut:visited:hover {
    background-color: #eeb30b; /* Darker shade */
    transform: scale(1.02); /* Slight zoom */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}
    .ttl { font-size: 16pt; font-weight: bold; background-color: #ffffff; color=#ff7733; }
    .bbb { background-color: #dddddd; }
    .lnk { background-color: #44bcb7; }
    .win  { background-color: rgb(17 218 18 / 50%); }
    .loss { background-color: rgb(218 18 18 / 50%); }
    .ib { padding: 1px; background-color: gray; }

/* for bracketScoring */
.scoring-table {
    border-collapse: collapse;
    margin: 20px 0;
}
.scoring-table th, .scoring-table td {
    padding: 8px 12px;
    text-align: center;
    border: 1px solid #ddd;
}
.scoring-table th {
    background-color: #f2f2f2;
    font-weight: bold;
}
.scoring-table input {
    width: 60px;
    text-align: center;
    padding: 4px;
}
.scoring-table h3 {
    margin: 0;
    white-space: nowrap;
}

/* for customizePoints and __k482_getScoringInfo.pl */
.point-scoring-table {
  width: auto;
  border: 1px solid #333333;
/*  border-collapse: collapse; */
}
.point-scoring-table th,
.point-scoring-table td {
  padding: 1px 1px;
  text-align: center;
  min-width: 30px; /* Minimum width for ALL columns */
  width: auto;      /* Can grow wider if needed */
  border: 1px solid #666666; /* Ensure first column has left border */

}
.point-scoring-table th:first-child,
.point-scoring-table td:first-child {
  text-align: left;  /* Left align first column */
  min-width: 120px;  /* Wider minimum for player type names */
  width: auto;       /* Can grow as needed */
  border: 1px solid #666666; /* Ensure first column has left border */

}


    .white-background { background-color: white; }

    .box { border: 2px solid #000000; border-collapse: collapse; padding: 10px; }

    /* Layout styles for Flexbox */
/*            display: flex; */
/*            flex-wrap: wrap; */
    .layout { flex-wrap: nowrap; max-width: 1200px; margin: 0 auto; margin-left: 160px; padding: 20px; box-sizing: border-box; }
    .layoutFP { flex-wrap: nowrap; max-width: 1200px; box-sizing: border-box; }

    .main-content { flex: 1; display: block; padding: 20px; background-color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); border-radius: 8px; margin-left: 20px; box-sizing: border-box; }

/*    @media (max-width: 768px) { */
/*            .sidebar, .main-content { flex-basis: 100%; margin-left: 0; margin-top: 20px; } */
/*	.sidebar { */
/*	       	display: none;  *//* Hide the sidebar */
 /*      	}
  /*     	.main-content { */
/*	       	flex-basis: 100%;  *//* Make the main-content take up full width */
/*	       	margin-left: 0;  *//* Remove the margin that was for the sidebar */
/*	       	padding: 20px; */
 /*      	} */
  /*  } */

    .main-content-no-sidebar {
	flex: 1;
	display: block;
	padding: 20px;
	background-color: #fff;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	margin-left: 0; /* No margin since there's no sidebar */
	box-sizing: border-box;
    }


    .form-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
    .form-table td { padding: 10px; vertical-align: top; }
    .form-table input[type="text"],
    .form-table textarea { width: 100%; padding: 8px; margin-top: 5px; border: 1px solid #ccd9b3; border-radius: 4px; box-sizing: border-box; }
    .form-table input[type="submit"] { background-color: #007BFF; color: white; padding: 10px 20px; border: none; border-radius: 4px; cursor: pointer; transition: background-color 0.3s ease; }
    .form-table input[type="submit"]:hover { background-color: #0056b3; }

.marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    background-color: #f0f0f0; /* Optional: Add a background color */
}

.marquee-content {
    display: inline-block;
    padding-left: 100%; /* Start off-screen */
    animation: marquee 80s linear infinite; */ /* Adjust the duration as needed */
}

.marquee-content .message {
    margin-right: 40px; /* Space between messages */
}

@keyframes marquee {
    0% {
        transform: translateX(0); /* Start scrolling immediately */
    }
    100% {
        transform: translateX(-100%); /* End scrolling when the content is fully off-screen */
    }
}

.blog-list {
  display: grid;
  gap: 20px;
}

.blog-item {
  background: #f9f9f9;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.blog-title {
  font-size: 1.5em;
  font-weight: bold;
  color: #007BFF;
  text-decoration: none;
}

.blog-title:hover {
  text-decoration: underline;
}

.blog-date {
  display: block;
  font-size: 0.9em;
  color: #666;
  margin-top: 5px;
}

.blog-excerpt {
  font-size: 1em;
  color: #555;
  margin: 10px 0;
}

.blog-thumbnail {
  flex: 0 0 150px; /* Fixed width for the thumbnail */
  margin-right: 20px;
}

.blog-thumbnail img {
/*  width: 100%; */
  height: auto;
  border-radius: 8px;
}

.blog-promo {
  display: flex;
  align-items: center;
  gap: 20px;
  border: 1px solid #ccc;
  padding: 15px;
  max-width: 800px;
  margin: 0 auto;
}
.blog-image img {
  width: 200px;
  height: auto;
}
.blog-link {
  text-decoration: underline;
  color: #0066cc;
}
.blog-link:hover {
  text-decoration: underline;
}
@media (max-width: 600px) {
  .blog-promo {
    flex-direction: column;
    text-align: center;
  }
}

.read-more {
  display: inline-block;
  padding: 8px 16px;
  background: #ccd9b6;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.9em;
  transition: background 0.2s ease;
}

.read-more:hover {
  background: #0056b3;
}



.blogcontainer {
    width: 100%; /* Ensure the container takes full width */
    overflow: hidden; /* Clear floats */
}

.image-section {
    float: left; /* Float the image to the left */
    width: 50%; /* Image takes 50% width */
    margin-right: 20px; /* Add some space between the image and text */
    margin-bottom: 20px; /* Add space below the image */
}

.image-section img {
    max-width: 100%; /* Ensure the image doesn't exceed its container */
    height: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image fits within its container */
}

.blogtext {
    width: 100%; /* Text takes full width by default */
    font-size: medium;
}

.blogtext.h1 {
	font-size: large;
}


.waiting-container {
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    margin-top: 50px;
}
.spinner {
    margin: 30px auto;
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #3498db;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.progress {
    margin: 20px 0;
    height: 10px;
    background: #e0e0e0;
    border-radius: 5px;
}
.progress-bar {
    height: 100%;
    background: #3498db;
    border-radius: 5px;
}
.error {
    color: #e74c3c;
    font-weight: bold;
}

.cup-section {
  position: relative;
  /* make sure the cell itself is transparent so the page white shows through */
  background: none;
  /* preserve the normal cell padding/content */
  padding: 0.5em; /* or whatever you already had */
}

.cup-section::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  transform: translate(-50%, -50%);
  background-image: url('/images/stanleycup.png');
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  opacity: 0.3;
  pointer-events: none;    /* so clicks go through to your cell content */
  z-index: 0;
}

/* make sure the cell content sits on top */
.cup-section > * {
  position: relative;
  z-index: 1;
}

.matchup-cell.fancy {
/*  background: linear-gradient(to bottom, #f8f8f8, #e8e8e8); */
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 12px;
  text-align: center;
}

.matchup-header { font-weight: bold; margin-bottom: 10px; color: #333; }

.team-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  margin: 10px 0;
}

.matchup-cell.vertical {
  border-radius: 8px;
  border: 1px solid #ddd;
  padding: 12px;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/* Optional hover effect */
.matchup-cell.vertical:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  transition: all 0.2s ease;
}

.team-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin: 10px 0;
}

.team-winner, .team-loser { position: relative; }

.win-badge, .loss-badge, .neutral-badge {
  position: absolute;
  right: -8px;
  top: -8px;
  background: #4CAF50;
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7em;
  font-weight: bold;
}

.loss-badge { background: #f44336; }

.neutral-badge { background: #777777; }

.vs-circle { background: #999; color: white; width:  34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8em; }

.result-details { margin-top: 12px; font-size: 0.85em; }

.predicted { color: #666; }

.actual { font-weight: bold; margin: 3px 0; }

.points-earned { color: grey; font-size: 1em; font-weight: bold; }

.key-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1em 0;
}
.key-table th, .key-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
}
.key-table th {
    background-color: #f2f2f2;
    position: sticky;
    top: 0;
}

.rotated-container {
  display: inline-block;
  transform: rotate(-90deg);
  white-space: nowrap;
}

.rotated-cell {
  height: 0; /* Let content determine height */
  padding: 20px 5px; /* Adjust padding for spacing */
}

</style>


