.correct input,
.correct select,
.correct {
    border-color: green !important;
    color: green !important; /* Set text color */
    font-size: 14px !important; /* Example font size */
    line-height: 1.4;
}


.incorrect input,
.incorrect select,
.incorrect {
    /* border-color: red !important; */
    font-size: 14px !important; /* Example font size */
    color: rgb(161, 63, 63) !important; /* Set text color */
    line-height: 1.4;
}

body {
    background-image: url('images/blue.jpg');
    background-size: cover;
    /* background-position: center; */
  }

.task-columns {
    column-count: 8; /* Adjust the number of columns as needed */
    column-gap: 10px; /* Adjust the gap between columns */
}

.task-columns div {
    break-inside: avoid; /* Prevents items from being split across columns */
    margin-bottom: 10px; /* Adjust spacing between items */
}

.scrollable-container {
    max-height: 400px; /* Set maximum height for the container */
    overflow-y: auto; /* Enable vertical scrolling */
}

.sticky-container {
    position: fixed; /* Set the position to fixed */
    top: 3; 
    width: 100%; /* Set the width to 100% */
    /* background-color: #f1f1f1; Add background color */
    padding: 10px; /* Add padding for better visibility */
    z-index: 1000; /* Set the z-index to make sure it appears above other content */
}

/* Navbar link hover to match Games/Profile/Home */
.navbar-nav .nav-link {
    color: rgba(0,0,0,0.8);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: #0056b3; /* same tone as active link hover */
    background-color: rgba(0,86,179,0.06);
    border-radius: 4px;
}

/* Header / Navbar improvements */
.navbar {
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.navbar-brand {
    font-weight: 700;
    font-size: 1.25rem;
    padding-right: 1rem;
}
.brand-logo { height: 44px; width: auto; display: inline-block; vertical-align: middle; }
.navbar-nav .nav-item { margin-left: 0.25rem; margin-right: 0.25rem; }
.navbar .container, .navbar .container-fluid { align-items: center; }
.navbar .logout-btn { margin-left: 0.5rem; }
.navbar .nav-link { padding: .45rem .6rem; }

/* Make the header content a little taller on desktop for visual balance */
@media (min-width: 992px) {
    .navbar { padding-top: 0.9rem; padding-bottom: 0.9rem; }
}

/* Stronger logout button styling */
.logout-btn {
    color: #fff !important;
    background-color: #d9534f; /* a stronger red */
    border: 1px solid #c12e2a;
    padding: 4px 8px;
    border-radius: 4px;
    text-decoration: none;
}
.logout-btn:hover {
    background-color: #c9302c;
    border-color: #ac2925;
    color: #fff !important;
}

/* Ensure there's breathing room above the footer when page content is short */
main {
    padding-bottom: 2.5rem; /* adjust for small/medium/large spacing needs */
}

/* Subtle top shadow on footer to separate it from content */
.footer {
    box-shadow: 0 -6px 18px rgba(0,0,0,0.12);
}

/* Footer info: stack lines and align to the right on larger screens, center on small screens */
.footer-info {
    line-height: 1.2;
    font-size: 0.9rem; /* slightly smaller text */
    margin-right: 5px; /* inset from the right edge */
    margin-bottom: 5px; /* inset from the bottom edge */
}

@media (max-width: 576px) {
    .footer-info {
        text-align: center !important;
        margin-right: 0; /* center properly on small screens */
    }
}

/* Game stats table styling */
.stats-table thead th {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #f8f9fa;
}
.stats-table .team-cell {
    position: sticky;
    left: 0;
    background: #fff;
    z-index: 4;
}
.rank-badge {
    display: inline-block;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #0d6efd;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}
.stats-table thead th .sort-indicator { margin-left: 6px; font-size: 0.9em; }
.cell-time { font-variant-numeric: tabular-nums; }
.total-cell { background: linear-gradient(90deg, #fff, #f8fff8); }

@media (max-width: 768px) {
    .stats-table thead th.level-col { display: none; }
}

/* Responsive tweaks specific to play page and small screens */
@media (max-width: 1200px) {
    .task-columns {
        column-count: 6;
    }
}

@media (max-width: 992px) {
    .task-columns {
        column-count: 4;
    }
    .scrollable-container {
        max-height: 350px;
    }
}

@media (max-width: 768px) {
    /* Make task columns readable on tablets/phones */
    .task-columns {
        column-count: 2;
    }
    .task-columns div {
        font-size: 0.95rem;
    }
    /* Reduce height of the answers box so it doesn't dominate the page */
    .scrollable-container {
        max-height: 250px;
    }
    /* Make buttons and form controls more tappable */
    .btn, input[type=submit] {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    /* Single column on small phones */
    .task-columns {
        column-count: 1;
    }
    .scrollable-container {
        max-height: 180px;
    }
    /* Stack hint counters and make them wrap */
    #hints-container {
        display: block;
    }
    .task-columns div {
        font-size: 0.95rem;
        padding: 6px 0;
    }
    /* Ensure images inside levels/hints scale correctly */
    img {
        max-width: 100%;
        height: auto;
    }
}

/* Play page specific UI */
.level-image-wrapper {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    background: #f6f6f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.level-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.play-timer {
    position: sticky;
    top: 1rem;
    padding: 12px;
    border-radius: 8px;
    background: linear-gradient(180deg,#fff,#f8f9fa);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    text-align: center;
    margin-bottom: 1rem;
}
.play-timer .count {
    font-size: 1.6rem;
    font-weight: 600;
}
.timer-progress {
    height: 8px;
    border-radius: 6px;
    overflow: hidden;
    background: #e9ecef;
}
.timer-progress > .fill {
    height: 100%;
    width: 0%;
    transition: width 0.3s linear;
}
.timer-fill-green { background: #2ecc71; }
.timer-fill-amber { background: #8a2be2; } /* changed to violet */
.timer-fill-red   { background: #e74c3c; }

.hint-card { padding: 10px; margin-bottom: 8px; border-radius: 6px; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.04); }
.hint-card.locked { opacity: 0.7; }
.hint-card .hint-body { display: none; }
.hint-card.unlocked .hint-body { display: block; }

/* Answers feed */
.answers-feed .answer-item { padding: 6px 8px; border-bottom: 1px solid #eee; }
.answers-feed .answer-item.correct { background: #e8f8ee; }
.answers-feed .answer-item.incorrect { background: #fff6f6; }

@media (max-width: 768px) {
    .level-image-wrapper { aspect-ratio: 4/3; max-width: 100%; }
    .play-timer .count { font-size: 1.25rem; }
}

/* Modal image constraint for full-size hint modal */
#hintImageModalImg {
    max-height: 80vh;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

/* Task dots under the progress bar (Mockup A) */
.tasks-dots-row { display: flex; gap: 12px; justify-content: center; align-items: center; }
.task-dot { width: 14px; height: 14px; border-radius: 50%; display: inline-block; border: none; cursor: default; box-shadow: 0 2px 6px rgba(0,0,0,0.12); }
.task-dot:focus { outline: 3px solid rgba(0,123,255,0.25); }
.task-dot.task-complete { background: #28a745; } /* green */
.task-dot.task-incomplete { background: #b0b0b0; } /* grey for incomplete */
.task-dot.me-2 { margin-right: 8px; }

@media (max-width: 576px) {
    .task-dot { width: 10px; height: 10px; }
}

/* Bonuses list styling */
.bonuses-list { margin-top: 0.5rem; }
.bonus-item { font-size: 0.95rem; line-height: 1.2; }
.bonus-title { color: #123; font-size: 0.95rem; font-weight:600; }
/* Slimmer outlined checkmark for elegance */
.bonus-mark { width: 18px; height: 18px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; color: #fff; font-weight:700; font-size:12px; box-shadow: none; }
/* Ensure inline SVG uses currentColor for stroke/fill and scales nicely */
.bonus-mark svg { width: 16px; height: 16px; display: block; }
.bonus-mark svg circle, .bonus-mark svg path { stroke: currentColor; }
.bonus-answer { font-size: 0.95rem; color: #495057; margin-left: 8px; font-weight:500; }
.bonus-unlock { font-size: 0.95rem; color: #6c757d; margin-left: 8px; font-weight:400; }
.bonus-completed .bonus-title { color: #1b5e20; }
.bonus-completed .bonus-mark { background: transparent; border: none; color: #28a745; }
.bonus-locked .bonus-mark { background: transparent; color: #6c757d; border: none; }
.bonus-locked .bonus-title { color: #222; }

/* Completed game stamp (watermark) */
.card { position: relative; overflow: visible; }

/* Diagonal 'rubber stamp' style for completed games */
.completed-stamp {
    position: absolute;
    /* position at right edge and vertically centered */
    left: auto;
    right: 55px;
    top: 25%;
    transform: translateY(-50%) rotate(-24deg);
    width: 25%;
    aspect-ratio: 1 / 1; /* keep stamp square/circular */
    display: block;
    text-align: center;
    font-weight: 900;
    font-size: 1.6rem;
    letter-spacing: 6px;
    color: transparent; /* hide text because image contains the label */
     /* try absolute static path first (works when static files served at /static/),
         then fallback to relative path if necessary */
     background-image: url('/static/images/completed-stamp.png'), url('images/completed-stamp.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    padding: 0;
    /* small drop shadow to lift the stamp */
    opacity: 0.7;
    z-index: 50;
    pointer-events: none;
    transform-origin: center center;
    /* avoid blend modes which may flatten/alter the image */
    mix-blend-mode: normal;
    text-transform: uppercase;
}

/* textured overlay to emulate inked stamp imperfections */
.completed-stamp::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.06; /* very subtle texture */
    pointer-events: none;
}

@media (max-width: 576px) {
    .completed-stamp { right: 8px; width: 40%; transform: translateY(-50%) rotate(-12deg); opacity: 0.45; }
}