/* Some thinksquare branding */
a {
    color: #3B945E;
}
:root {
    --bs-primary: #3B945E;
}


.debug {
    font-family: monospace;
    font-size: 0.8em;
    border: 1px solid #ccc;
    border-radius: 2px;
    padding: 4px 8px;
    display: inline-block;
    margin: 10px;
    background: #333;
    color: #fff;
}
.debug h1,
.debug h2 {
    font-size: inherit !important;
    padding: 0 !important;
    margin: 0 !important;
    font-weight: bold !important;
}

.debug h1 {
    text-align: center;
    margin-bottom: 20px !important;
}
.debug h2 {
    margin: 20px 0 0 0 !important;
    text-decoration: underline;
    font-style: italic;
}
.debug .action {
    text-decoration: underline;
    color: #98d8ff;
    cursor: pointer;
}


.btn-primary {
    --bs-btn-border-color: #3B945E;
    --bs-btn-hover-bg: #286f44;
    --bs-btn-hover-border-color: #286f44;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-bg: #286f44;
    --bs-btn-active-border-color: #0a53be;
}
.btn-primary,
.dropdown-item.active,
.dropdown-item:active {
    background: #3B945E;
}



/* get rid of the white border on the account dropdown button */
button.dropdown-toggle,
button.dropdown-toggle:hover {
    color: #fff;
    outline: none !important;
    border: none;
}


.help-text {
    font-size: .875em;
    font-style: italic;
    color: #6f6f6f;
}


/* user groups listings */
.ul.groups-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.groups-list li {
    margin-bottom: 10px;
}
ul.groups-list li a {
    background: #efefef;
    /* make them easy to click */
    display: block;
    padding: 10px;
}


.join-code {
    background: #efefef;
    font-family: "Lucida Console", Courier, monospace;
    padding: 4px;
    border: 1px solid #000;
    border-radius: 4px;
}


#breadcrumbs-holder {
    background: #efefef;
}
#breadcrumbs-holder > div {
    padding: 0.8rem 1.5rem! important;
}
#breadcrumbs-holder ol {
    margin-bottom: 0;
}


body.section_organisation.section_manage #managers .card {
    background: #efefef;
}




#games-listing-cards {
    padding-top: 25px;
}
#games-listing-cards #games {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    gap: 20px;
}
#games-listing-cards .card {
    border-radius: 5px;
    padding: 12px;
    width: 340px;
}
#games-listing-cards .card .game-icon img {
    width: 80px;
    height: 80px;
}
#games-listing-cards .card .game-teaser {
    display: flex;
    margin-bottom: 12px;
}
#games-listing-cards .card ul.skills-description {
    font-size: 0.9em;
}



/* replicate the original thinksquare styling on the games listing. it hides lots of the newer features (like recent games, learn, and dev status) but looks like the old games listing view */
body.thinksquare-style #games-listing-cards #games {
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    gap: 20px;
}
body.thinksquare-style #games-listing-cards .card {
    background: #57BA98;
    border: 5px solid #3B945E;
    border-radius: 5px;
    padding: 5px;
    width: 160px;
}
body.thinksquare-style #games-listing-cards .card .game-title {
    height: 3em;
    line-height: 1.5em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    margin-bottom: 8px;
}
body.thinksquare-style #games-listing-cards .card h3 {
    text-align: center;
    font-size: 1.3em;
}
body.thinksquare-style #games-listing-cards .card h3 a {
    color: #fff;
    text-align: center;
    text-decoration: none;
}
body.thinksquare-style #games-listing-cards .card .game-icon img {
    width: 100%;
    height: 100%;
    padding: 4px;
}
body.thinksquare-style #games-listing-cards .card .game-teaser {
    display: block; /* override the flex on the normal style */
}
body.thinksquare-style #games-listing-cards .card ul.skills-description {
    padding: 0;
    margin: 4px 0 0 0;
    list-style-position: inside;
    font-size: 0.9em;
}
body.thinksquare-style #games-listing-cards .card ul.skills-description li {
    color: blue;
}
body.thinksquare-style #games-listing-cards .game-action-buttons,
body.thinksquare-style #games-listing-cards .release-status {
    display: none !important;
}




body.section_game.section_play h1.game-title {
    text-align: center;
}

.game-title {
    text-align: center;
}

body.section_game-plays td.winning_player_names li,
body.section_game-plays td.winning_player_names ul {
  margin: 0px;
  padding: 0px;
  list-style:none
}

.justify-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* todo: use css grid, not flexbox to do this */
ul.puzzle-grid-numeric {
    display: flex;
    flex-wrap: wrap;
    max-width: 600px;
    align-items: center;
    justify-content: center;
}
ul.puzzle-grid-numeric,
ul.puzzle-grid-numeric li {
    padding: 0;
    margin: 0;
    list-style: none;
}
ul.puzzle-grid-numeric li {
    width: 50px;
    height: 50px;
    margin: 5px;
    border: solid #000 4px;
    border-radius: 5px;
}
ul.puzzle-grid-numeric li > * {
    width: 100%;
    height: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul.puzzle-grid-numeric li a:hover {
    background: #efefef;
}
ul.puzzle-grid-numeric .solved-status-none-found {
    background: white;
}
ul.puzzle-grid-numeric .solved-status-some-to-go {
    background: lightblue;
}
ul.puzzle-grid-numeric .solved-status-all-solved {
    background: lightgreen;
}
ul.puzzle-grid-numeric .locked-status- {
    background: gray;
}
ul.puzzle-grid-numeric .solved-status-error {
    background: red;
}


#game-grid-select {
    text-align: center;
}
#game-grid-select img {
    width: 100px;
    height: 100px;
}

#game-skill-type-select {
    text-align: center;
}
#game-skill-type-select img {
    width: 300px;
    height: 300px;
    border: solid transparent 10px;
}

#game-skill-type-select img:hover {
    border: solid green 10px;
}

#difficulty-select {
    text-align: center;
}

#difficulty-select ul {
    list-style: none;
    margin: auto;
    width: 300px;
    padding: 0;
}

#difficulty-select ul li a {
    text-align: center;
    width: 300px;
    border: 2px solid black;
    padding: 5px;
    color: black;
    text-decoration: none;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    border-radius: 10px;

    display: block;
}

#difficulty-select ul li a:hover {
    background: grey;
}

.recently_played_table {
    text-align: center;
}

#difficulty-select img {
    width: 300px;
    border: solid transparent 10px;
}

#difficulty-select img:hover {
    border: solid green 10px;
}

.alert-error {
    background: red;
}

/* --- Game Daily & Streak Styles --- */

/* 1. The Streak "Pill" - Fire icon and number */
.streak-badge {
    background-color: #fff5f2 !important; /* Very light orange background */
    color: #d9480f !important;           /* Deep orange/rust text for visibility */
    border: 1px solid #ffdecb !important;
    font-size: 0.7rem !important;
    padding: 2px 8px !important;
    font-weight: 800 !important;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* 2. The Gold Achievement Button (State: Completed) */
.gold-achievement-btn {
    background: linear-gradient(135deg, #FFD700 0%, #FFB900 100%) !important;
    border: 1px solid #E6B800 !important;
    color: #4d3d00 !important; /* Dark brown text for better contrast on gold */
    font-weight: 700 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4), 0 2px 4px rgba(0,0,0,0.1);
    text-shadow: 0 1px 0 rgba(255,255,255,0.2);
    transition: transform 0.1s ease-in-out;
}

.gold-achievement-btn:hover {
    background: linear-gradient(135deg, #FFB900 0%, #FFD700 100%) !important;
    border-color: #D4AF37 !important;
    color: #332900 !important;
    transform: translateY(-1px);
}

/* 3. Action Button Layout Fixes */
.game-action-buttons .btn-sm {
    font-size: 0.75rem; /* Shrink font slightly to ensure 4 buttons fit */
    white-space: nowrap; /* Prevent text wrapping inside buttons */
}

/* Ensure the placeholder div matches the height of the buttons */
.daily-placeholder {
    height: 31px; 
    width: 100%;
    display: block;
}

/* Vertical alignment for the streak label */
.streak-container {
    min-height: 22px; /* Reserves space so buttons don't jump when streak appears */
    display: flex;
    justify-content: center;
    align-items: center;
}