/* One file for tournament: the parts that used to be separate files follow in their old order, each in its old layer. */
/* 'variables' is now the base layer. 'overrides' is the strongest. */
@layer variables, reset, global, layout, components, overrides;

/* 2. Base layers */
@import url("../components/palette.8cd8c2d26dd9.css") layer(variables);
@import url("../components/reset.fb54b2947a87.css") layer(reset);
@import url("../components/basics.5b7213c2880b.css") layer(global);
@import url("../components/player-card.01c640a50a97.css") layer(components);

/* ==== layout.css (layer layout) ==== */
@layer layout {
/* layout.css — page containers, grids, and structural breakpoints */

/* Container base */
.container {
    max-width: 100%;
}

/* Tournament grid responsive columns */
@media (min-width: 320px) {
    .container {
        padding: 0 0.1rem;
    }
    .tournaments-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}

@media (min-width: 768px) {
    .tournaments-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .tournaments-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .tournaments-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}
}

/* ==== components/buttons.css (layer components) ==== */
@layer components {
.comment-submit-btn {
  background-color: var(--accent-teal);
  color: var(--bg-primary);
  font-size: 14px;
  font-weight: 600;
  padding: 0.1em 1.6em;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
  text-decoration: none;
  display: inline-block;
}

.comment-submit-btn:hover {
  background-color: var(--bg-primary);
  color: #0b1220;
}

.comment-submit-btn:active {
  transform: scale(0.97);
}

.submit-button {
    background-color: var(--warning);
    color: var(--ink);
    padding: 4px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1.1em;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.submit-button:hover {
    background-color: var(--accent-gold-dark);
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.submit-button:active {
    background-color: var(--accent-gold-dark);
    transform: scale(1.0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

.submit-button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 193, 7, 0.5);
}

.submit-button:disabled {
    background-color: var(--line);
    color: var(--ink-2);
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* Intro, bridges, rewards */ 

.button-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
  margin: 20px 0;
}

.row {
  display: flex;
  gap: 4px;
}

.center-row {
  justify-content: center;
}

.info-button {
  width: 88px;
  text-align: center;  
  background-color: var(--accent-gold);
  color: #840032;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.info-button:hover {
  background-color: var(--bg-primary);
}

.basic-button {
  width: 88px;
  text-align: center;  
  background-color: #6E0D25;
  color: var(--gold-bright);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.basic-button:hover {
  background-color: var(--danger-dark);
}

.disclaimer-button {
  width: 88px;
  text-align: center;
  padding: 1px 1px;
  background-color: var(--bg-footer);
  color: var(--bg-primary);
  text-decoration: none;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease;
}

.disclaimer-button:hover {
  background-color: var(--accent-teal);
}
}

/* ==== components/card.css (layer components) ==== */
@layer components {
.tournament-card {
    background-color: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

.tournament-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.match-card {
    background-color: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 0.375rem;
    overflow: hidden;
    transition: box-shadow 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}

.match-card:hover {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

/* --- Image Card Styling --- */
.image-item {
    border: 1px solid var(--line); /* Card border */
    border-radius: 5px; /* Rounded corners */
    padding: 5px; /* Internal padding */
    background-color: var(--surface-2); /* Card background */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); /* Subtle shadow */
    display: flex; /* Use flexbox for internal layout */
    flex-direction: column; /* Stack image and text vertically */
    overflow: hidden; /* Helps contain elements if needed */
}

.image-info-list {
  line-height: 1.2;
}

/* --- Image Styling within Card --- */
.image-item img {
    display: block; /* Remove extra space below image */
    width: 100%; /* Make image fill card width */
    height: auto; /* Maintain aspect ratio */
    margin-bottom: 1px; /* Space between image and text */
    border-radius: 3px; /* Optional: slightly rounded image corners */
}

/* --- Text Styling within Card --- */
.image-item p {
    margin-bottom: 8px;
    padding: 10px; /* Internal padding */
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.4;
}

.image-item p:last-child {
    margin-bottom: 0;
}

/* --- Comment Styling within Card --- */
.image-item .submission-comment {
    border: 2px solid var(--ink-2);
    background-color: var(--surface-3);
    padding: 8px;
    margin-top: 10px;
    border-radius: 3px;
    font-style: italic;
}

/* --- Match detail --- */
.match-card {
    background-color: var(--surface);
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.player-submissions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.2rem;
    width: 100%;
    font-size: 1rem;
    color: var(--text-main);
    margin: 0.2rem 0;
    font-weight: 600;
}

.player-submissions p {
    width: 100%;
    height: 175px;
    margin-bottom: 8px;
    background-color: #FCDC73; 
    padding: 10px; /* Internal padding */
    font-size: 0.9rem;
    color: var(--text-main);
    line-height: 1.4;
}

        .theme-card,
.submission-card {
    background-color: var(--surface-2);
    border: 1px solid var(--surface-3);
    border-radius: 8px;
    margin-bottom: 20px;
    box-shadow: 2px 2px 5px var(--surface-3);
}

.theme-header,
.submission-header {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    padding: 0.5rem;
    color: white;
    text-align: center;
    position: relative;
}

.theme-header h3,
.submission-header h3 {
    margin: 0;
    padding-left: 1.5em;
    font-size: 1.4em;
    color: var(--surface-2);
}

.theme-content,
.submission-content {
    padding: 5px;
    background-color: #FCDC73;
}

.theme-content p {
    margin: 5px 0;
    padding-left: 10px;
}

.theme-content span {
    font-weight: bold;
    margin-right: 5px;
}

.submission-content h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
    color: var(--ink-2);
}

.submission-content img {
    max-width: 100%;
    height: auto;
    border-radius: 5px;
    margin-bottom: 10px;
    display: block; /* Prevent inline spacing issues */
}

/* Responsive design */
@media (max-width: 768px) {
    .players-list {
        gap: 15px;
        flex-wrap: wrap;
    }

    .player-submissions {
        gap: 0.11rem;
        width: 100%;
        font-size: 0.875rem;
        color: var(--text-main);
        margin: 0.2rem 0;
        font-weight: 600;
    }
}

/* --- Media Query for Small Screens (Affecting Card Padding) --- */
@media (max-width: 480px) {
    .image-item {
        /* Reduce padding inside each card on small screens */
        padding: 1px;
        /* Reduce margin below image on small screens */
        margin-bottom: 10px;
    }
     .image-item img {
        margin-bottom: 10px; /* Also adjust image margin if needed */
     }

    .players-list {
        gap: 8px;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: center;
    }

    .player-submissions {
        gap: 0.11rem;
        width: 100%;
        font-size: 0.875rem;
        color: var(--text-main);
        margin: 0.2rem 0;
        font-weight: 600;
    }
}
}

/* ==== components/forms.css (layer components) ==== */
@layer components {
.comment-form {
  background-color: var(--accent-teal);
  height: 7.6em;
}

.comments-section {
  background-color: #BC96E6;
  border: 10px solid #BC96E6;
}

.comment {
    padding: 10px;
    margin-bottom: 10px;
    background: #FCDC73;    
}

.comment-header {
    font-size: 14px;
    color: var(--ink-2);
    margin-bottom: 4px;
}

.comment-author {
    font-weight: bold;
    margin-right: 8px;
}

.comment-text {
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.no-comments {
    color: var(--ink-3);
    font-style: italic;
    font-size: 14px;
    margin-bottom: 10px;
}

.submission-form .form-group {
    margin-bottom: 15px;
}

.submission-form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--ink-2);
}

.submission-form input[type="file"],
.submission-form input[type="number"],
.submission-form select,
.submission-form textarea {
    width: 100%;
    padding: 4px;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    font-size: 1em;
    box-sizing: border-box; /* Prevent padding from increasing width */
}

.submission-form textarea {
    resize: vertical; /* Allow vertical resizing of textarea */
}

.rating-input input[type="number"] {
    width: auto; /* Adjust width for number input */
}

.incentive-input select {
    width: 100%; /* Full width for select */
}

.form-error {
    color: var(--danger); /* Bootstrap error color */
    font-size: 0.9em;
    margin-top: 3px;
}

.submission-form .form-group label[for="{{ form.image.id_for_label }}"] {
    /* Style the label itself if you want */
    margin-bottom: 8px; /* Add a bit more space below the label */
    font-weight: bold; /* Keep label bold */
    display: block; /* Ensure label is on its own line */
}

.submission-form input[type="file"] {
    /* Style the file input "button" */
    padding: 10px; /* Add padding to the input */
    border: 1px solid var(--line-strong); /* Add a border */
    border-radius: 5px; /* Rounded corners */
    background-color: var(--surface); /* White background */
    cursor: pointer; /* Pointer cursor on hover */
    font-size: 1em; /* Consistent font size */
    box-sizing: border-box; /* Ensure padding/border doesn't increase width */
    width: 100%; /* Take full width of container */
    margin-bottom: 10px; /* Add some space below the input */
    /* Remove default file input styling for better control */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

.submission-form input[type="file"]:focus {
    outline: none; /* Remove default focus outline */
    border-color: var(--accent-teal-dark); /* Highlight border on focus (example primary color) */
    box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.25); /* Add a subtle focus shadow */
}

.submission-form input[type="file"]::file-selector-button {
    /* Style the "Choose File" / "Browse" button part specifically (browser-specific) */
    background-color: var(--accent-teal); /* Light gray background for the button part */
    color: #f8ff7b; /* Dark text color for the button text */
    padding: 10px 15px; /* Padding for the button part */
    border: none; /* Remove border from the button part */
    border-radius: 0 5px 5px 0; /* Rounded corners on the right side of the button part */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Hover effect */
}

.submission-form input[type="file"]::-webkit-file-upload-button {
    /* For Webkit browsers (Chrome, Safari) - older syntax */
    background-color: var(--accent-teal);
    color: #f8ff7b;
    padding: 10px 15px;
    border: none;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    transition: background-color 0.3s ease;
    -webkit-appearance: none; /* Important to override default webkit styling */
}

.submission-form input[type="file"]::file-selector-button:hover,
.submission-form input[type="file"]::-webkit-file-upload-button:hover {
    background-color: var(--accent-teal-dark); /* Darker gray on hover for the button part */
}

.form-section {
    background-color: var(--surface);
}

.form-field {   
    font-size: 14px;
}

.input-wrapper {
     background-color: var(--surface);
} 

.field-errors {
    color:red;
} 

.input-wrapper input[type="file"]::file-selector-button {
    background-color: var(--accent-teal);
    color: var(--bg-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 0.5em 1.6em;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease;
}

.input-wrapper input[type="file"]::file-selector-button:hover {
    background-color: var(--bg-primary);
    color: #0b1220;
}

.input-wrapper input[type="file"]::file-selector-button:active {
    transform: scale(0.97);
}
}

/* ==== components/table-rewards.css (layer components) ==== */
@layer components {
.reputation-table {
  border-collapse: collapse;
  width: 100%;
  font-family: 'Roboto', sans-serif;
  font-size: 14px;
  border-bottom: 5px solid #FCDC73;
  margin-bottom: 2rem;
}

.table-header {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-align: center;
    margin-bottom: 10px;
    color: #111827;
    border-bottom: 5px solid #FCDC73;    
}

.reputation-table th, .reputation-table td {
  width: 100px 70%;
  border: 1px solid var(--line-strong);
  padding: 8px 12px;
  text-align: left;
}
.reputation-table th {
  background-color: #FCDC73;
}
}

/* ==== components/title_section.css (layer components) ==== */
@layer components {
.title-section {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    margin-top: 0.5rem;
    padding: 0.3rem;
    color: #EFDCAB;
    text-align: center;
    position: relative;
}

h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 0rem;
    margin-top: 0; /* Remove top margin */
    line-height: 1; /* Tighten line height */
}

h2 {
    color: #FCDC73;
}

h3 {
    font-size: 1rem;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 0;
}

.section-title {
  justify-content: center;
  align-items: center;
  margin-top: 15px;
  background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 100%);
  padding: 0 22px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  margin-bottom: 8px;
}

.section-title h1 {
  font-size: 1.15rem;
  font-weight: 600;
  background: linear-gradient(135deg, #f4c542 0%, var(--accent-gold) 50%, #f4c542 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin: 0;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  text-align: center;
}
}

/* ==== components/tournament_links.css (layer components) ==== */
@layer components {
.tournament-links-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    margin-bottom: 1rem;
}

.tournament-link,
.back-to {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-grow: 1;
    padding: 0.2rem 0.5rem;
    color: var(--surface);
    text-decoration: none;
    font-weight: 600;
    border-radius: 0.375rem;
    transition: all 0.3s ease;
    text-align: center;
    margin: 0;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.tournament-link {
    background-color: #e8e0d0;
    color: #4a3f2f;
    border: 1px solid var(--ink-2);
}

.tournament-link:hover {
    background-color: #d9ceb8;
    color: #3a2f1f;
    border-color: #5a4f3f;
    transform: translateY(-2px);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.1);
}

.tournament-link:active {
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.back-to {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f);
    color: var(--line);
}

.back-to:hover {
    opacity: 0.9;
    transform: translateY(-2px);
}

.back-to:active {
    opacity: 0.8;
    transform: translateY(1px);
}

/* Optional: Hover effect */
.back-arrow:hover {
    color: #07d4f8;
    /*text-decoration: underline;*/
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .tournament-links-container {
        flex-direction: column;
        gap: 0.75rem;
    }

    .tournament-link,
    .back-to {
        width: 100%;
        max-width: none;
    }
}
}

/* ==== components/tournament_grids.css (layer components) ==== */
@layer components {
/* tournament_grids.css - Grid layouts for tournament pages */

.page-grid {
    display: grid;
    grid-template-rows: auto auto auto;
    gap: 0.5rem;
    align-items: start;
}

.tournaments-grid {
    display: grid;
    grid-template-columns: 1fr; /* Start with a single column */
    gap: 1rem;
}

.day-section {
    margin-bottom: 1em;
    background-color: #FCF8D6;
    text-align: center;
}

/* --- top images grid --- */
.grid-container {
    display: grid;
    /* Adjust '250px' to your preferred minimum item width */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 10px; /* Adjust spacing between items */
    padding: 15px; /* Padding around the grid */
    width: 100%; /* Ensure container tries to use full width */
    box-sizing: border-box; /* Include padding in the 100% width */
    margin-bottom: 1em; /* Space below the grid */
}
}

/* ==== components/tournament_list.css (layer components) ==== */
@layer components {
.tournament-info {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: center;
    text-align: center;
}

.tournament-info p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ink-2);
}

.no-tournaments {
    grid-column: 1 / -1; /* Span across all columns */
    padding: 1.5rem;
    color: var(--ink-2);
    text-align: center;
    font-style: italic;
}

 /* Inside tournament_list.css */

 .view-details-link {
    display: block;
    text-align: center;
    padding: 0.5rem;
    margin-top: 0.5rem;
    background-color: #e8e0d0;
    color: #4a3f2f;
    text-decoration: none;
    border-radius: 0.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
    border: 1px solid var(--ink-2);
    transition: background-color 0.2s, border-color 0.2s;
  }

  .view-details-link:hover {
    background-color: #d9ceb8;
    border-color: #5a4f3f;
  }

  .back-link {
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: #007bff;
    color: var(--surface);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
    text-align: center;
}

.back-link:hover {
    background-color: #0056b3;
}

.tournament-card-row {
  display: flex;
  gap: 0.5rem;
}

.tournament-card-row .view-details-link {
  flex: 1;
  margin-top: 0.5rem;
}

.join-button {
  display: inline-block;
  padding: 4px 4px;
  background-color: var(--accent-gold);
  /* ink, not teal: teal on this gold read at 2.3 to 1 */
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 1.2rem;
  border: 2px solid green;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.green-button:hover {
  background-color: var(--activity-dark); /* Darker green on hover */
}
}

/* ==== components/tournament_tree.css (layer components) ==== */
@layer components {
/* tournament_tree.css */

.tree-page {
  max-width: 600px;
  margin: 2rem auto 0;
  padding: 0 .5rem;
}

/* ---- Header ---- */
.tree-header {
  padding-left: 1rem;
  margin-bottom: .8rem;
}

.tree-header h1 {
  font-size: 1rem;
  font-weight: 800;
  color: #0a0a12;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0;
}

/* ---- Search ---- */
.tree-search {
  display: flex;
  gap: 0;
  margin-bottom: .8rem;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

#searchInput {
  flex: 1;
  padding: .45rem .6rem;
  border: none;
  background: var(--dark-bg);
  color: rgba(255, 255, 255, .85);
  font-size: 0.875rem;
  outline: none;
}

#searchInput::placeholder {
  color: rgba(255, 255, 255, .3);
}

#searchInput:focus {
  background: #13132a;
}

#searchButton {
  padding: .45rem 1rem;
  border: none;
  background: var(--accent-teal);
  color: var(--surface);
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}

#searchButton:hover {
  background: var(--accent-teal-dark);
}

/* ---- Tree container ---- */
.tree-wrap {
  background: #0a0a12;
  border-radius: 10px;
  padding: .6rem .5rem;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
}

#tree {
  list-style: none;
  padding: 0;
  margin: 0;
}

#tree ul {
  list-style: none;
  padding-left: 1.1rem;
  margin: 0;
  border-left: 1px solid rgba(59, 151, 151, .15);
}

/* ---- Tree node row ---- */
.tree-node {
  display: flex;
  align-items: center;
  padding: .3rem 0;
}

/* ---- Toggle button ---- */
.toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent-teal);
  color: var(--surface);
  font-size: 0.875rem;
  font-weight: 700;
  margin-right: .4rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
  line-height: 1;
  border: none;
}

.toggle:hover {
  background: #2d7a7a;
}

/* ---- Node content ---- */
.tree-node-content {
  cursor: pointer;
  padding: .2rem .5rem;
  border-radius: 4px;
  color: rgba(255, 255, 255, .75);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background .12s, color .12s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tree-node-content:hover {
  background: rgba(59, 151, 151, .15);
  color: rgba(255, 255, 255, .95);
}

/* ---- States ---- */
.highlighted {
  background: rgba(255, 214, 102, .2);
  color: var(--gold-light);
  font-weight: 700;
}

.selected {
  background: rgba(59, 151, 151, .2);
  color: var(--surface);
  font-weight: 700;
}

/* ---- Footer links ---- */
.tree-footer {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-top: .8rem;
}

.tree-link {
  padding: .4rem 1.2rem;
  background: #0a0a12;
  color: var(--gold-light);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 6px;
  transition: background .15s;
}

.tree-link:hover {
  background: #13132a;
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
  .tree-page {
    padding: 0 2px;
  }

  .tree-header {
    padding-left: .5rem;
  }

  .tree-wrap {
    padding: .4rem .3rem;
  }

  #tree ul {
    padding-left: .8rem;
  }

  .tree-node-content {
    font-size: 0.875rem;
  }

  .toggle {
    width: 16px;
    height: 16px;
    font-size: 0.875rem;
  }
}
}

/* ==== components/tutorial.css (layer components) ==== */
@layer components {
        .tutorial-container {
            line-height: 1.6;
            max-width: 800px;
            margin: 0 auto;
            padding: 10px;
            background: #f0f2f5;
            color: var(--text-main);
        }
        .container {
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }

        .section {
            margin-bottom: 25px;
        }

        .step {
            background: #f8f9fa;
            padding: 15px;
            border-left: 4px solid #3498db;
            margin-bottom: 15px;
            border-radius: 0 5px 5px 0;
        }
        .highlight {
            background: #e8f4f8;
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
        .emoji {
            font-size: 1.2em;
        }
        .back-button {
            display: inline-block;
            padding: 2px 15px;
            background-color: var(--accent-teal);
            color: white;
            text-decoration: none;
            border-radius: 5px;
            margin-bottom: 2px;
            transition: background-color 0.3s;
        }
        .back-button:hover {
            background-color: var(--accent-teal-dark);
        }

        @media (max-width: 420px) {
            .tutorial-container {
                line-height: 1.6;
                max-width: 600px;
                margin: 0 auto;
                padding: 1px;         
            }
        
            .container {
                padding: 0.1rem;
            }        
        }
}

/* ==== components/match_list.css (layer components) ==== */
@layer components {
/* match_list.css - Match listing and navigation */

.matches-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* Initial 4-column layout */
    gap: 1.5rem;
}

.match-details p {
    margin: 0;
    font-size: 0.875rem;
}

.player-name{
  text-align: center;
}

.back-link {
    display: block;
    margin-top: 0;
    padding: 0.75rem 1.25rem;
    background-color: #007bff;
    color: var(--surface);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
    text-align: center;
}

.back-link:hover {
    background-color: #0056b3;
}
}

/* ==== components/match_detail_page.css (layer components) ==== */
@layer components {
/* match_detail_page.css - Match detail page styles */

/* Match Detail Container */
.match-detail-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.2rem 0.1rem;
}

/* Match Header */
.match-header {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    padding: 0.5rem;
    color: white;
    text-align: center;
    position: relative;
}

.match-header h2 {
    font-size: 2.4rem;
    font-weight: 800;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.match-header p {
    font-size: 1.1rem;
    font-weight: 500;
    margin-top: 0.5rem;
    margin-bottom: 0;
    opacity: 0.9;
}

/* Players Header Section */
.players-header {
    display: flex;
    gap: 4px;
    justify-content: space-around;    
    align-items: center;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
    background: var(--background-light);
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
}

.players-header .player-column {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
}

.players-header .player-column > div {
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    border-radius: 30px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 2;
}

/* Match Content */
/* The round cards are white and so is .match-card, so every card and every gap
   between them was one unbroken white field. This strip carries the tan page
   ground the round cards were drawn against, so each round reads as its own. */
.match-content {
    padding: 0.1rem;
    background-color: var(--bg-primary);
}

/* Tournament detail - Players Section */
.players-section {
    display: flex;
    margin-top: 10px;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}

.players-section .player-column {
    flex: 1;
    min-width: 0;
}

.players-section h3 {
    text-align: center;
    width: 100%;
}

.players-list {
    display: flex;
    justify-content: center;
    gap: 10px;
    max-width: 1200px;
    width: 100%;
}

.match-container {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    text-align: center;
}

.match-block {
    background-color: #DAEFB3;
    border: 2px solid var(--line);
    padding: 2px;
    margin-bottom: 16px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    min-width: 100px;
    box-sizing: border-box;
    font-weight: bold;
}

.match-block a {
    display: block;
    margin-bottom: 5px;
}

.description {
  margin-top: 1rem;
    font-size: 1.1em;
    line-height: 1.5;
}

.matches-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #007bff;
    color: var(--surface);
    text-decoration: none;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease-in-out;
}

.matches-link:hover {
    background-color: #0056b3;
}

.round-winner {
    background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
    color: var(--text-main);
    padding: 6px 14px;
    border-radius: 20px;
    font-weight: bold;
    text-align: center;
    color: white;
    box-shadow: 0 3px 6px rgba(0,0,0,0.4), 0 0 10px rgba(255,215,0,0.5);
    font-size: 0.95em;
    margin: 10px auto 0;
    border: 3px solid #ffd700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

/* ---- Submission stats ---- */
.submission-stats {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: .25rem 0;
    font-size: .9rem;
    color: var(--ink-2);
    line-height: 1.3;
}

.stat-total {
    font-weight: 700;
    color: var(--ink);
}

.stat-crown {
    font-size: 0.875rem;
}

/* ---- Round card ---- */
/* Each round is one card. It used to be a cream block (#FCF8D6) on a tan page
   (var(--bg-primary)) with no border and a 1em gap — two shades that close together read
   as one continuous strip, so a reader could not tell where Day 2 began. White
   lifts it off the page, and the teal top edge marks the start of a round the
   same way the heading marks its name. Both classes are used on this page
   only, so this overrides the shared .day-section safely. */
.day-section {
    background-color: var(--surface);
    border: 1px solid var(--accent-gold);
    border-top: 4px solid var(--accent-teal);
    border-radius: 10px;
    margin-bottom: 1.75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
}

/* ---- Round heading ---- */
/* Day N is what a reader scans for, so it takes the teal and the weight; the
   theme sits under it, quiet. Centred, on the card's white ground. */
.day-section h4 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    margin: 0;
    padding: .6rem .5rem .45rem;
    border-bottom: 2px solid var(--accent-teal);
}

.day-section h4 > span:first-child {
    color: var(--accent-teal);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.day-section h4 > span:last-child {
    color: var(--ink-3);
    font-size: 0.875rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ---- Mobile ---- */
@media (max-width: 480px) {
    .match-detail-container {
        padding: 0 2px;
    }

    .day-section {
        border-top-width: 3px;
        border-radius: 8px;
        margin-bottom: 1rem;
    }

    .day-section h4 {
        padding: .35rem .3rem .3rem;
        gap: .1rem;
    }

    .day-section h4 > span:first-child {
        font-size: 1.05rem;
        letter-spacing: .04em;
    }

    .day-section h4 > span:last-child {
        font-size: 0.875rem;
    }

    .match-header h2 {
        font-size: 1.1rem;
        letter-spacing: 0;
    }

    .match-header p {
        font-size: 0.875rem;
    }

    .players-header {
        flex-direction: column;
        align-items: stretch;
        gap: .4rem;
        margin-top: .3rem;
        margin-bottom: .3rem;
    }

    .players-header .player-column {
        width: 100%;
    }

    .description {
        font-size: 0.875rem;
    }

    .round-winner {
        font-size: 0.875rem;
        padding: 4px 10px;
        border-width: 2px;
        letter-spacing: 0;
    }

    .match-block {
        min-width: 80px;
        font-size: 0.875rem;
    }

    .submission-stats {
        font-size: .9rem;
        gap: 0;
    }

    .avatar-container[class*="frame-"] {
        width: 140px;
        height: 140px;
    }

    .profile-image {
        width: 100px;
        height: 100px;
    }
}

/* ---- Champion plaque ---- */
/* The foot of the page, and the only place on it that celebrates. It was a
   flat green strip, two names and two numbers, so a week won read exactly like
   a week lost. Ported from .winner-announcement on the tournament results page
   — the same navy-to-gold ground, the same gold glow, the same bouncing trophy
   between two pulsing sparkles — one size down, because a week is not a
   season, and the two now read as one family. */
.champion-plaque {
    position: relative;
    overflow: hidden;
    margin: 1.5rem 0 .5rem;
    padding: 1.4rem 1rem 1.1rem;
    border-radius: 16px;
    text-align: center;
    background: linear-gradient(135deg, #1a2a6c 0%, #5f4e06 100%);
    box-shadow: 0 8px 25px rgba(255, 210, 0, .3);
}

.champion-plaque::before,
.champion-plaque::after {
    content: '\2728';
    position: absolute;
    top: 10px;
    font-size: 1.6rem;
    animation: champion-sparkle 2s ease-in-out infinite;
}

.champion-plaque::before { left: 14px; }

.champion-plaque::after { right: 14px; animation-delay: 1s; }

@keyframes champion-sparkle {
    0%, 100% { opacity: .5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.champion-trophy {
    display: block;
    font-size: 2.6rem;
    line-height: 1;
    animation: champion-bounce 2s ease-in-out infinite;
}

@keyframes champion-bounce {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25% { transform: translateY(-10px) rotate(-5deg); }
    75% { transform: translateY(-10px) rotate(5deg); }
}

.champion-eyebrow {
    margin: .35rem 0 .7rem;
    color: var(--surface);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .18em;
}

/* The face wears the gold the rest of the plaque is trimmed with. */
.champion-ring {
    width: 92px;
    height: 92px;
    margin: 0 auto;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--accent-gold);
    box-shadow: 0 0 0 4px rgba(255, 210, 0, .18), 0 6px 14px rgba(0, 0, 0, .35);
}

.champion-ring img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.champion-name {
    margin: .6rem 0 0;
    color: var(--surface);
    font-size: 1.9rem;
    font-weight: 800;
    line-height: 1.1;
    text-shadow: 3px 3px 6px rgba(0, 0, 0, .3);
}

.champion-total {
    margin: .1rem 0 0;
    color: var(--accent-gold);
    font-size: 1.5rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* A gold hairline with the week's tally of days sitting on it. The plaque runs
   the full width of the page, so the rule and the runner-up are held to a
   column instead: at 1200px a name pinned to one edge and a score pinned to
   the other stop being one line about one player. */
.champion-rule {
    position: relative;
    height: 1px;
    max-width: 420px;
    margin: 1.1rem auto .9rem;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .75), transparent);
}

.champion-days {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 3px 12px;
    border: 1px solid rgba(212, 175, 55, .75);
    border-radius: 20px;
    background: rgba(0, 0, 0, .35);
    color: var(--accent-gold);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    white-space: nowrap;
}

.champion-runner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    max-width: 320px;
    margin: 0 auto;
    padding: 0 .4rem;
    color: rgba(255, 255, 255, .72);
    font-size: .9rem;
    font-weight: 600;
}

.champion-runner + .champion-runner {
    margin-top: .3rem;
}

.champion-runner-score {
    font-variant-numeric: tabular-nums;
}

/* Nobody lost a drawn match, so both names keep full weight. */
.champion-plaque--draw .champion-runner {
    color: var(--surface);
}

@media (max-width: 480px) {
    .champion-plaque {
        margin: 1rem 0 .4rem;
        padding: 1rem .4rem .8rem;
        border-radius: 10px;
    }

    .champion-plaque::before,
    .champion-plaque::after {
        top: 8px;
        font-size: 1.2rem;
    }

    .champion-plaque::before { left: 8px; }

    .champion-plaque::after { right: 8px; }

    .champion-trophy {
        font-size: 2rem;
    }

    .champion-eyebrow {
        margin: .3rem 0 .55rem;
        font-size: 0.875rem;
        letter-spacing: .12em;
    }

    .champion-ring {
        width: 76px;
        height: 76px;
        border-width: 2px;
    }

    .champion-name {
        font-size: 1.4rem;
    }

    .champion-total {
        font-size: 1.2rem;
    }

    .champion-rule {
        margin: .9rem 0 .75rem;
    }

    .champion-days {
        padding: 2px 9px;
        font-size: 0.875rem;
    }

    .champion-runner {
        padding: 0 .2rem;
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .champion-plaque::before,
    .champion-plaque::after,
    .champion-trophy {
        animation: none;
    }
}
}

/* ==== components/round_detail_page.css (layer components) ==== */
@layer components {
/* round_detail_page.css - Round detail page styles */

.round-container {
    max-width: 610px;
    margin: 20px auto;
    font-family: 'Roboto', sans-serif;
    color: var(--text-main);
}

/* Score Container */
.score-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--surface-2);
    border-radius: 12px;
    padding: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 2px solid var(--line);
    font-family: 'Roboto', sans-serif;
}

.score-text {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
}

.score-text > span.winning:nth-child(odd) {
    color: white;
}

.score-text > span:nth-child(even) {
    color: var(--text-main);
    padding: 2px 8px;
    border-radius: 4px;
}

.score-text > span.winning {
    padding: 0px 8px;
    background-color: #4CA771;
    color: white;
    box-shadow: 0 0 5px rgba(80, 200, 120, 0.5);
}

.score-text > span:nth-child(3) {
    color: var(--text-main);
}
}

/* ==== components/image_detail.css (layer components) ==== */
@layer components {
/* Basic styles for image_detail.html */

.image-detail-container {
    max-width: 900px; /* Adjust as needed */
    margin: 20px auto; /* Center the container and add some top/bottom margin */
    padding: 2px;
    background-color: var(--surface-2); /* Light background for the container */
    border: 1px solid var(--line);
    border-radius: 8px;
    font-family: 'Roboto', sans-serif; /* Or your site's font */
}

.image-detail-header {
    text-align: center;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--surface-3);
    padding-bottom: 1px;
}

.image-detail-header h2 {
    margin-top: 0;
    color: var(--text-main);
}

.back-link { /* If you add a back link */
    display: inline-block;
    margin-bottom: 15px;
    color: #007bff;
    text-decoration: none;
}

.back-link:hover {
    text-decoration: underline;
}

.image-display-area {
    text-align: center; /* Center the image within its container */
    margin-bottom: 20px;
}

.full-size-image {
    max-width: 600px;
    width: 100%;
    height: auto;
    border: 1px solid var(--line-strong);
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: block;
    margin: 0 auto;
}

.image-info {
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--surface);
    padding: 15px;
    border-radius: 4px;
    border: 1px solid var(--surface-3);
}

.image-info p {
    margin: 8px 0;
    line-height: 1.6;
    color: var(--ink-2);
}

.image-info p strong {
    color: var(--text-main);
}

/* Share button — one confident solid action against the light gallery mount,
   set apart from the blue text back-link so the hierarchy is clear. */
.image-share {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 auto 20px;
    text-align: center;
}

.share-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 32px;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--surface);
    background-color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 999px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
    transition: transform 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

.share-btn:hover {
    background-color: var(--ink);
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.share-btn:active {
    transform: translateY(0);
}

.share-btn:focus-visible {
    outline: 3px solid var(--accent-teal-dark);
    outline-offset: 2px;
}

.share-status {
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 700;
    color: #1e7e34;
}

@media (max-width: 480px) {
    .image-share {
        gap: 8px;
        margin-bottom: 14px;
    }
    .share-btn {
        padding: 11px 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .share-btn {
        transition: none;
    }
    .share-btn:hover {
        transform: none;
    }
}
}

/* ==== components/authority_statement.css (layer components) ==== */
@layer components {
/* authority_statement.css - Authority/legitimacy statement styles */

.authority-statement {
    max-width: 800px;
    margin: 10px auto;
    padding: 10px 10px;
    background: var(--surface);
    border: 1px solid var(--surface-3);
    line-height: 1.3;
    color: #1f2937;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.statement-header {
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-align: center;
    margin-bottom: 10px;
    color: #111827;
    padding-bottom: 20px;
}

.statement-body {
    margin-bottom: 10px;
    /*text-align: justify;*/
}

.statement-body p {
    margin-bottom: 8px;
}

.statement-signature {
    text-align: center;
    border-top: 1px solid var(--line);
    padding-top: 10px;
}

.platform-name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.platform-tagline {
    font-size: 0.95rem;
    font-style: italic;
    color: var(--ink-2);
    letter-spacing: 1px;
}

.img_sm {
    display: flex;
    justify-content: center;
}
}

/* ==== components/responsive.css (layer overrides) ==== */
@layer overrides {
/* responsive.css */

/* Small tablets / medium screens */
@media (max-width: 780px) {
  .container {
    max-width: 100%;
    padding: 0 10px;
  }

  .cart-grid {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .cart-items {
    padding: 10px;
  }

  .product-list {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .cart-title {
    font-size: 1.4rem;
  }

  .item-card {
    flex-direction: column;      
    width: 100%;
  }

  .item-card__image {
    width: 200px;                  
    height: auto;                 
    object-fit: cover;
  }

  .item-card__quantity-controls {
    gap: 5px;
  }

  .pricing-breakdown p {
    font-size: 14px;
  }
}

/* Small phones */
@media (max-width: 480px) {
  .container {
    max-width: 100%;
    padding: 0 5px;
  }

  .cart-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cart-items {
    padding: 5px;
  }

  .product-list {
    grid-template-columns: 1fr;
    gap: 5px;
  }

  .cart-title {
    font-size: 1.3rem;
  }

  .item-card {
    flex-direction: column;
    width: 100%;
  }

  .item-card__image {
    width: 200px;
    height: auto; 
    object-fit: cover;
  }

  .item-card__quantity-controls {
    gap: 4px;
  }

  .pricing-breakdown p {
    font-size: 14px;
  }
}

/* Tournament-specific responsive adjustments */
@media (max-width: 992px) {
}

@media (max-width: 768px) {

    .security-header h1 {
        font-size: 2rem;
    }

    .section-header {
        flex-direction: column;
        text-align: center;
    }

    .section-icon {
        margin-right: 0;
        margin-bottom: 0.2rem;
    }

    .pulse {
        animation: pulse 2s infinite;
    }
}

@keyframes pulse {
    0% { opacity: 1; }
    50% { opacity: 0.7; }
    100% { opacity: 1; }
}

@media (max-width: 600px) {
      .back-link {
        width: 240px;
        margin-bottom: 1rem;
    }
}

/* --- Media Query for Small Screens (Affecting Grid Container) --- */
@media (max-width: 480px) {
    .grid-container {
        /* Reduce padding around the grid on small screens */
        padding-left: 2px;
        padding-right: 2px;
        /* Reduce gap between items on small screens */
        gap: 5px;
    }
    /* Note: The .image-item padding is now controlled ONLY in image-card.css */
}
}

/* ==========================================================================
   Moved out of the pages: what Bridge, Intro, Originals, Security, Rewards
   and the image page used to write on their own tags. Last in the file, as
   a tag's own style outranked everything above.
   ========================================================================== */

/* a statement with the blue line down its left side */
p.t-note {
    padding-left: 10px;
    border-left: 5px solid #3498db;
}

/* Originals: its two green statements */
p.t-green {
    background-color: #DAEFB3;
}

/* Rewards: the column widths of its three tables */
.t-col-10 { width: 10%; }
.t-col-20 { width: 20%; }
.t-col-30 { width: 30%; }
.t-col-70 { width: 70%; }

/* Rewards: badges not yet open */
.reputation-table tr.inactive { color: #b0b0b0; opacity: 0.6; }

/* the image page: the back link in white, the title line boxed */
.back-link.back-link--white { color: white; }
p.t-boxed { border: 1px solid #333; }

/* the player card on the tournament and match pages
   (templates/includes/player-card.html), once written on its tags */
.pc-info { text-align: center; }
.pc-info p.pc-level { margin: 0.5rem 0; }
.pc-info img.pc-level-icon { height: 2.8em; display: block; margin: 0.5rem auto; }
.pc-info span.pc-level-raw { display: block; }
.player-badges-grouped.pc-center { text-align: center; }
.badges.badges-in-row.pc-badge-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; }