:root{
    --dark: #2f4c39 ;
    --light: #FFFAEB;
    --accentC: #67A279;
    --accentR: #DD404B;
    --accentG: #E7D27E;
    --accentG2: #DFC353;

  --font-size-m1: 0.6rem; /* 9.9px */
  --font-size-P: 1.0rem; /* 16px */
  --font-size-H3: 1.6rem; /* 25.9px */
  --font-size-H2: 2.6rem; /* 41.9px */
  --font-size-H1: 4.2rem; /* 67.8px */

  --font-heading: Arial,sans-serif;
  --font-body: Arial,sans-serif;

  --font-weight-H3: 400; /* 25.9px */
  --font-weight-H2: 700; /* 41.9px */
  --font-weight-H1: 1000; /* 67.8px */
}

 html {
        overflow-x: hidden;
        overscroll-behavior: none;
    }

body{
    background-color: var(--light);
    color: var(--dark);
    margin: 0%;
}

h1{
font-size:var(--font-size-H1);
font-family: var(--font-heading);
font-weight: var(--font-weight-H1);
}

h2{
font-size:var(--font-size-H2);
font-family: var(--font-heading);
font-weight: var(--font-weight-H2);
padding: 0 2%;
margin: 45px 0 15px; 
}

.h2-container{
    display: flex;
}

.h2-container img{
    width: 50px;
    height: 100%;
    object-fit: contain;
    margin: 45px 0 15px;

}

.h2-container h2{
padding: 0 2%;
margin: 45px 0 15px; 
}

h3{
font-size:var(--font-size-H3);
font-family: var(--font-heading);
font-weight: var(--font-weight-H3);
}

p{
font-family: var(--font-body);
margin: 0;
}

table {
    font-family: var(--font-body);
}

.header{
    background-color: var(--dark);
    color: var(--light);
    width: 96%;
    margin: 0%;
    padding: 20px 2%;
}

.header img{
    width: 150px;
}


.results-wrapper {
padding: 0px 2%;
margin: 0 0 45px 0;
}
.results-wrapper table{
    width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}

.results-wrapper th, .results-wrapper td {
  border: 1.5px solid var(--dark);
  border-collapse: collapse;
  Padding: 3px;
  font-family: var(--font-body);
  text-align: center ;
}

.table-player {
    width:25%;
}

.winner{
    background-color: var(--accentG);
    color: var(--dark);
}

.players-container{
padding: 0px 2%;
grid-template-columns:repeat(auto-fit, minmax(250px,1fr));
display: grid;
gap: 30px;
margin-top: 60px;
}

.players-block {
    background-color: var(--light);
    border: 6px solid var(--dark);
    min-height: 300px;
    padding-top: 20px;  /* space for image */
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.players-block img {
    width: 50%;
    z-index: 2;
    margin-top: -100px; /* optional small overlap */
    animation: teeter 2s infinite ease-in-out;
    transform-origin: center bottom; /* pivot point */
}
    /* Animation */
@keyframes teeter {
    0%   { transform: rotate(0deg); }
    25%  { transform: rotate(-5deg); }
    50%  { transform: rotate(5deg); }
    75%  { transform: rotate(-5deg); }
    100% { transform: rotate(0deg); }
}

.players-block h3 {
    background-color: var(--dark);
    color: var(--light);
    padding: 5px 0;
    width: 90%;
    text-align: center;
    clip-path: polygon(
        0 0,
        100% 0,
        95% 50%,
        100% 100%,
        0 100%,
        5% 50%
    );
    margin: 0px 0 0px 0;
    font-weight: bold;

}
.player-stats{
    width:90%;
    margin: 15px auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
    gap: 10px;
}

.player-stats th{
text-align: left;
}

.player-stats td{
text-align: right;
}


.players-standing {
    width: 90%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
    gap: 30px;
    padding: 15px 0;
}

.player-rank{
    font-size: var(--font-size-H1);
    font-weight: var(--font-weight-H2);
    color: var(--dark);
    margin:  20px 25%;
    width: 50%;
    text-align: center;
    background-color: var(--light);
}

.standing-header{
    background-color: var(--dark);
    width: 90%;
    margin: 0 auto;
    color: var(--light);
    text-align: center;
    border: 6px solid var(--dark);
}

.standing-header p{
    Padding:5px;
    margin: 0;
}


.score-element{
    color:var(--dark);
    text-align: center;
}

.score-element-title{
    font-weight: bold;
    padding: 0px 0 0 0;
}
.score-element-num{
    font-weight: bold;
    font-size: var(--font-size-H2);
}


.checkerboard-bg{
    width: 100%;
    margin: 0px auto;
   background: conic-gradient(var(--dark) 90deg, var(--light) 90deg 180deg, var(--dark) 180deg 270deg, var(--light) 270deg);
    background-repeat: repeat;
    background-size: 30px 30px;
    background-position: top left; 
}

.house-rules-container {
    background-color: var(--dark);
    color: var(--light);
    padding: 15px; 
    width: 94%;
    margin: 0px auto;
}

.house-rules-container h2{
 margin: 0 0 15px 0;
}

.house-rules-container li{
font-family: var(--font-body);
font-size: var(--font-size-P);
margin: 10px 0;
}

.majors-wrapper {
    padding: 0 2% 45px;
}

.majors-tabs{
    width: 100%;
    display: flex;
    gap: 10px;
}

.majors-tabs button {
    background-color: transparent;
    border: 3px solid var(--dark);
    color: var(--dark);
    padding: 10px;
    font-weight: bold;
}

.majors-tabs .tab-active, .majors-tabs button:hover {
    background-color: var(--dark);
    color: var(--light);
}

.majors-details {
    width: 100%;
    display: flex;
    Gap: 30px;
    margin: 15px 0;
    font-weight: bolder;
     font-weight: bolder;
    display: flex;      
    flex-wrap: nowrap;
}

.majors-details span{
    font-weight:500;
}
    

.majors-table {
        width: 100%;
    margin: 0 auto;
    border-collapse: collapse;
}

.majors-table td:first-child, .majors-table th:first-child {
    font-weight: bold;
    text-align: left;
}

.majors-table th, .majors-table td {
  border: 1.5px solid var(--dark);
  background-color: var(--light);
  Padding: 5px;
  font-family: var(--font-body);
  text-align: center ;
}

.majors-table td {
height: 45px;
  padding: 5px;          /* ensures spacing */
  vertical-align: middle; /* center content vertically */
}

.major-table-head td{
    background-color: var(--dark);
    color: var(--light);
    min-width: 45px;
    border-right: 1.5px solid var(--light);
    border-left: 1.5px solid var(--light);
}


.majors-table td:last-child{
border-right: 1.5px solid var(--dark);
} 

.majors-table td:first-child{
border-left: 1.5px solid var(--dark);
}

.majors-table .winner-row td:nth-child(11), .majors-table .winner-row td:nth-child(21), .majors-table td:nth-child(11), .majors-table td:nth-child(21),.majors-table th:nth-child(11), .majors-table th:nth-child(21){
    background-color: var(--dark);
    color: var(--light);
}

.major-table-head th{
    font-weight: bolder;
    font-style: oblique;
}


.majors-table .no-cell{
    background-color: var(--light);
    border: 1.5px solid var(--light);
    border-right: 1.5px solid var(--dark);
    border-bottom: 1.5px solid var(--dark);
}

.majors-table .winner-row td {background-color: var(--accentG);}

.majors-table td span {
  display: inline-flex;       /* use flex for centering */
  align-items: center;
  justify-content: center;
  width: 22px;                 /* fixed size */
  font-size: 16px;
  text-align: center;
  line-height: 1;
  vertical-align: middle;
}

/* Circle for 1 under par */
.circle {
  display: inline-block;
  border: 1.5px solid var(--dark);
  border-radius: 50%;
  padding: 3px;
  text-align: center;
  height: 22px;
}

/* Double circle for 2+ under */
.double-circle {
  display: inline-block;
    border: 1.5px solid var(--dark);
  outline: 1.5px solid var(--dark);
  outline-offset: 2px;
  border-radius: 50%;
  padding: 3px;
  text-align: center;
  height: 22px;
}

/* Square for 1 over */
.square {
  display: inline-block;
  border: 1.5px solid var(--dark);
  padding: 3px;
  text-align: center;
  height: 22px;
}

/* Double square for 2+ over */
.double-square {
  display: inline-block;
  border: 1.5px solid var(--dark);
  outline: 1.5px solid var(--dark);
  outline-offset: 2px;
  padding: 3px;
  text-align: center;
  height: 22px;
}

.footer{
    background-color: var(--dark);
    color: var(--light);
    width: 100%;
    margin: 0%;
    padding: 0 0 0 0;
    text-align: right;
}

.footer img{
    width: 150px;
    padding: 20px 0;
}


/* Login Style */

/* Center everything */
.login-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 20px; /* prevents touching edges on mobile */
    min-height: 100vh;
}

/* Responsive logo */
.login-image {
    width: 250px;
    max-width: 80%;   /* shrink on small screens */
    height: auto;
    display: block;
}

/* Form layout */
.login-password {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px; /* larger tap targets */
    width: 100%;
    max-width: 250px; /* contain form on desktop */
}

/* Labels + Inputs */
.login-password label,
.login-password input {
    width: 100%;
    font-family: var(--font-body);
    font-size: 1rem;
}

/* Input styling */
.login-password input[type=password] {
    border: 3px solid var(--dark);
    color: var(--dark);
    padding: 10px; /* more thumb-friendly */
    border-radius: 6px;
}

.login-password input[type=button] {
    background-color: var(--dark);
    color: var(--light);
    padding: 10px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
}


 .login-password input[type=button]:hover {
        opacity: 0.85;
 }


.tech-buttons {
 background-color: transparent;
 width: 100%;
 gap: 10px;
}

.tech-buttons a{
 color: var(--dark);
 text-decoration: none;
 font-family: var(--font-body);
 font-weight: var(--font-weight-H2);
 background-color: transparent;
 padding: 10px;
 border: 3px solid var(--dark);
 display: inline-block;
 width: 200px;
 text-align: center;
}

.tech-buttons a:hover{
 color: var(--light);
 background-color: var(--dark);
}

.main-content{min-height: 48vh;margin: 0 2%;}

@media (max-width: 768px) {

    body {
        overflow-x: hidden;
    }

    .main-content{min-height: 56vh;margin: 0 2%;}

    html {
        overflow-x: hidden;
        overscroll-behavior: none;
    }

    h2{
        margin:  15px auto 0px ;
    }

  .players-container {
    display: flex;                /* switch from grid → horizontal flow */
    overflow-x: auto;
    gap: 16px;
    padding: 60px 5% 15px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
  }

  .players-block {
    min-width: 95%;              /* controls card width in viewport */
    flex: 0 0 auto;
    scroll-snap-align: center;
    margin: 0 auto;
  }

  .players-container::-webkit-scrollbar, .majors-table-container::-webkit-scrollbar {
  display: none;
}

.players-container, .majors-table-container {
  scrollbar-width: none;
}

.players-block img {
    width: 150px;
    margin-top: -80px;
  }

.majors-table-container {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
   

}

  .majors-table {
    width: max-content;    /* prevent shrinking */
        border-collapse: separate;  /* change here */
    border-spacing: 0;
    border-width: 0.5px;          /* no extra gaps */
  }

  /* Freeze first column */
  .majors-table th:first-child,
  .majors-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 3; /* above other cells for visibility */
  }

  .majors-table th:last-child,
  .majors-table td:last-child {
    position: sticky;
    right: 0;
    z-index: 3; /* above other cells for visibility */
  }
  .majors-details p {
        flex-wrap: wrap; /* allow span to break to next line */
    }

    .majors-details span {
        display: block;    /* force span to next line */
        width: 100%;
    }


    .login-wrapper {
      max-height: 100vh;
      padding: 0%;
  }

  .login-image {
      width: 70%;
      max-width: 500px;
  }

  .login-password label,
  .login-password input {
      font-size: 1.2rem; /* normal size for mobile */
      padding: 5px;
      width: 70%;
      margin: 0 auto;
  }


  .footer img{
    width: 80px;
  }

  .header img{
    width: 100px;
  }

}