/* HEADER */

#top-wrapper {
  max-width: 1200px;
  width: 95%;
  margin: 0 auto;
  padding: 0;
}


.main-div {
  background-color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  padding: 0px;
  margin-bottom: 1px;
  min-width: 540px;
}

#header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 2px 0;
  max-width: 1200px;
  padding-top: 10px;
  padding-left: 20px;
  background-color: white;
  min-width: 540px;
  width: 95%;
}

#logo {
  margin-top: 3px;
  margin-right: 70px;
}

#logo img {
  max-height: 50px;
}

#menu {
  flex-grow: 1;
  margin-right:40px;
  padding-bottom: 6px;
}

#menu ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: flex-start;
}

#menu ul li {
  position: relative;
  border-right: 1px solid #ddd;
}

#menu ul li a {
  color: #666;
  display: block;
  padding-top: 4px;
  padding-bottom: 4px;
  padding-left: 15px;
  padding-right: 15px;
  transition: background-color 0.3s; 
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

#menu ul li:hover > a {
  background-color: #e7e7e7;
}

#menu ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: white;
  border: 1px solid #e7e7e7;
  z-index: 1000;
}

#menu ul li:hover > ul {
  display: block;
}

#menu ul ul li {
  width: 200px;
  margin-left: 0;
}

#menu ul ul li a {
  padding: 10px 15px;
}

.full-width {
  display: flex;
  flex-wrap: wrap;
  gap: 0px; /* Provides spacing between flex items */
  /* justify-content: flex-end; */
  justify-content: flex-start;
  width: 100%;
}

#header-bottom {
  background-color: #fff;
  color: gray;
  padding: 0;
  min-width: 540px;
}

#header-bottom .header-item {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

#header-bottom a {
  color: white;
  text-decoration: none;
  padding: 5px 10px;
}

#header-bottom a:hover {
  background-color: #555;
}

.header-item {float:left; margin-left:18px; padding-right:5px;padding-top:5px;}

#user_status {
  float: right;
  margin-top: -30px;
}

#user_status input[type="text"],
#user_status input[type="password"] {
  width: 120px;
  margin-right: 5px;
}

#user_status input[type="submit"] {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  padding: 2px 10px;
}

#user_status a {
  color: #0066cc; /* Adjust this color to match your site's link color */
  text-decoration: none;
}

#user_status a:hover {
  text-decoration: underline;
}

#header-bottom #user_status {
  background-color: white;
  padding: 5px 10px;
  margin-top: 10px;
  border-radius: 4px;
}

#header-bottom #user_status a {
  color: #0066cc; /* Adjust this color to match your site's link color */
  text-decoration: none;
  background-color: transparent;
  transition: background-color 0.2s ease;
}

#header-bottom #user_status a:hover,
#header-bottom #user_status a:focus {
  text-decoration: underline;
  background-color: transparent;
}

/* Session streak badge */
.streak-badge {
  display: inline-block;
  background-color: #f0f0f0;
  color: #666;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: bold;
  margin-left: 8px;
  border: 1px solid #ddd;
}

.streak-badge.on-fire {
  background: linear-gradient(135deg, #ff6b35 0%, #f7931e 50%, #ffcc00 100%);
  color: white;
  border: none;
  box-shadow: 0 0 8px rgba(255, 107, 53, 0.6);
  animation: fire-glow 1.5s ease-in-out infinite alternate;
}

@keyframes fire-glow {
  0% {
    box-shadow: 0 0 5px rgba(255, 107, 53, 0.4);
  }
  100% {
    box-shadow: 0 0 15px rgba(255, 107, 53, 0.8), 0 0 20px rgba(247, 147, 30, 0.4);
  }
}

/* END HEADER */

/* MAIN CONTENT */

#main_content {
  background-color: #fff;
  max-width: 1200px; /* Adjust this value as needed */
  margin: 0 auto; /* Centers the content */
  width: 95%; /* Creates some space on the sides */
}

#wrapper {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px;
}

/* login section */

#login {
  padding-top: 10px;
}

.login-section {
  position:relative;
  float:left;
  height:120px;
  padding-left:5px;
  margin-right:20px;
}

#temp-name {width: 220px; margin-left:10px;}
#temp-name-text-field {width:80px; height:16px;}
#temp-name-submit-button {margin-bottom:11px; font-weight:bold;}

#teaser-outer-div {width:580px;}
#teaser {width: 100%;
    margin: 0 auto;}

#challenge-button {
  font-weight: bold;
  color: white;
  width: 198px;
  margin-bottom: 15px;
  background-color: #e74c3c;
  border: none;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
}

#login {margin-right:20px; padding:5px padding-top: 10px}
#login-username, #login-password {width:120px; height:16px; margin-bottom:3px;}
#login-button {width:135px; font-weight:bold;}

/* end login section */

#game-container {
  display: flex;
  justify-content: space-between;
  max-width: 1200px;
  margin: 0 auto;
}

/* score sidebars */

.boxed {
  background-color: white;
  border: 1px solid #ddd;
  padding: 5px;
  margin: 2px;
}

#yesterday-daily {
  width: 95%;
  margin-right: auto;
  margin-left: auto;
  background-color: white;
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-bottom: 15px;
}

#scores-left, #scores-right  {
  display: flex;
  flex-direction: column;
  height: 100%;
  width: 20%;
  background-color: white;
  border: 1px solid #e7e7e7;
  box-sizing: border-box;
}

div#scores-right table tbody tr td{padding:3px;}
div#scores-right table tbody tr td a{text-decoration: underline}

#scores-left-content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  width: 100%;
  box-sizing: border-box;
}

.score-sidebar {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  margin-bottom: 20px;
  width: 100%;
  box-sizing: border-box;
}

.score-sidebar > * {
  width: 100%;
  box-sizing: border-box;
}

#highlights {
  background-color: white;
  padding: 0;
}

.section_title {
  background-color: #e4f1f8;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  margin-bottom: 5px;
  color: #666;
}

.section_content {
  padding: 0px;
}

#winner-list {
  margin-top: 2px;
  border: 1px solid #666;
}

#play-challenge {
  width: 95%;
  margin: auto;
  align-items: center;
  padding: auto;
}

.score_table {
  width: 95%;
  align: center;
  border-collapse: collapse;
  border: 1px solid #ddd;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 15px;
}

.score_table th {
  background-color: white;
  font-size: 14px;
  color: #666;
}

.score {margin-left:0px; margin-right:0px; padding:1px;}
.score td {margin:0px; padding:3px;}

.score_table td {
  padding-top: 3px;
  padding-bottom: 1px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

.row_0 {margin:0px; padding:0px;width:100%;background-color:#f6f6f6;}
.row_1 {margin:0px; padding:0px;width:100%;background-color:#e4f1f8;}

/* user display */

.user-display {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 1px; /* Minimal vertical spacing */
  max-width: 185px;
}

.user-name {
  max-width: 100px; /* Adjust based on your layout */
  text-overflow: ellipsis;
  margin-right: 3px;
  font-size: 1em; /* Slightly smaller font */
  display: flex;
  align-items: flex-end;
  margin-bottom: 3px;
}

.trophy-container {
  display: flex;
  align-items: center;
}

.trophy {
  margin-right: 0px;
}

.trophy img {
  width: 12px; /* Even smaller trophies */
  height: 12px;
}

.rank-icon {
  margin-bottom: 0px;
}

.rank-icon img {
  width: 12px;
  height: 12px;
}

/* Ensure all content is visible */
.float {
  overflow: visible;
}

/* end user display */

/* end score sidebars */

/* board area */

#main {
  flex: 1;
  max-width: 800px;
  margin: 0 5px;
  display: flex;
  flex-direction: column;
  width: 60%;
}

#board-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin-bottom: 20px;
  border: none;
}

.board_container {
  flex: 1; /* Grow to fill remaining space */
  min-width: 300px; /* Ensures the board has a minimum width */
}

#board {
  width: 100%;
  max-width: 600px;
  padding-bottom: 20px;
  margin: 0px auto;
}

#board td {margin:0; padding:0;}
#board tr {margin:0; padding:0;}

/* challenge info above board */

turbo-frame#main-content {
  width: 100%;
  display: flex;
  flex-direction: column;
}

#challenge-info {
  background-color: #cfc;
  border-top: 1px solid #3c3;
  border-bottom: 1px solid #3c3;
  padding: 5px 10px;
  font-size: 14px;
  text-align: center;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
  align-self: stretch;
}

/* end challenge info */

#current-score {
  text-align: center;
  width: 100%;
  margin-right: 10px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

#current-score > * {
  margin: 0;
}

.outer_center { text-align: center; }
.inner_center { display: inline-block; }

.board {
  margin: 0 auto; /* Center the board */
  float: none; /* Remove float */
  clear: both; /* Ensure it's below the score */
}

.board-area {float:left;}

.area {float:left;}
.area-top-left {border-width:1px;border-color:#fff; border-top-style:solid;border-left-style:solid;}
.area-top-middle {border-width:1px;border-color:#000; border-top-style:solid;border-left-style:solid;border-right-style:solid;}
.area-top-right {border-width:1px;border-color:#fff; border-top-style:solid;border-right-style:solid;}

.area-center-left {border-width:1px;border-color:#000; border-top-style:solid;border-left-style:solid;border-bottom-style:solid;}
.area-center {border:1px solid black;}
.area-center-right {border-width:1px;border-color:#000; border-top-style:solid;border-bottom-style:solid;border-right-style:solid;}

.area-bottom-left {border-width:1px;border-color:#fff; border-left-style:solid;border-bottom-style:solid;}
.area-bottom-middle {border-width:1px;border-color:#000; border-left-style:solid;border-bottom-style:solid;border-right-style:solid;}
.area-bottom-right {border-width:1px;border-color:#fff; border-bottom-style:solid;border-right-style:solid;}

.cell {float:left; background-color:#bbb; margin:0; cursor:default; margin:1px;}
.number{float:left; background: transparent;padding:0;}


/* reconstruct */

.chain-info {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
  text-align: center;
}

.chain-info__item {
  margin: 0 5px;
}

.chain-info__item--username {
  font-size: 20px;
  font-weight: bold;
}

/* end reconstruct */

/* puzzles */
#puzzle-play-area {
  display: flex;
  flex-direction: column;
  width: 100%;
}

#puzzle_nav {
  width: 100%;
  text-align: center;
  border-bottom: 1px solid;
  padding: 7px;
  margin-bottom: 20px;
}

.columns-container {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

#puzzle-racks {
  flex: 1;
  max-width: 200px;
}

#board {
  flex: 2;
  max-width: 600px;
}

#puzzle-stats {
  flex: 1;
  max-width: 200px;
}

.puzzle_title {
  font-size: 24px;
  padding: 10px 0;
}

.puzzle-small {
  border: solid 1px;
  margin: 8px;
  padding: 5px;
  border-radius: 8px;
}

a.puzzle_link {
  text-decoration: none;
}

a.puzzle_link:hover {
  color: red;
  background: yellow;
}

.puzzle.hover {
  background: yellow;
}

.round-preview {
  clear: both;
}

.solver {
  margin-right: 3px;
}

.max_score {
  margin-left: 5px;
}

#create_puzzle {
  text-align: center;
  border-top: 1px dotted;
  border-bottom: 1px dotted;
  padding: 5px 0;
}

.puzzle_filter {
  float: left;
  margin: 2px 5px;
}

#puzzle_filters select {
  width: 130px;
}

#puzzle_filters select.small_select {
  width: 50px;
}

.bottom_margin {
  margin-bottom: 10px;
}

#puzzle_filters {
  border-bottom: solid 1px;
}

#puzzle_edit {
  height: 14px;
  width: 1px;
}

@media (max-width: 768px) {
  .columns-container {
    flex-direction: column;
  }

  #puzzle-racks,
  #board,
  #puzzle-stats {
    width: 100%;
    max-width: 100%;
  }
}
/* end puzzles */

#dice-box {float:left; width:350px; clear:both; height:60px; margin:10px 0px 0px 0px; padding:6px 0 3px 0; border: solid #000 1px;}
#dice-box table tbody tr td div.die { margin-right:1px;}

#game-actions {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}

/*#game-actions button {
  font-size: 14px;
  padding: 8px 0;
  width: 120px;
  margin: 0 5px;
  border-radius: 4px;
  cursor: pointer;
  text-transform: capitalize;
}*/

/*#game-actions button:first-child {
  background-color: #3498db;
  color: white;
  border: none;
}

#game-actions button:last-child {
  background-color: #f0f0f0;
  border: 1px solid #ccc;
}*/

.game-action-button {width:110px;}

#main-chat {
  flex: 1;
  overflow-y: auto;
}
/* end board area */

/* END MAIN CONTENT */


/* Main layout styles */
/*#game-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

#scores-left, #scores-right, #main {
    flex: 1 1 100%;
}*/

/*@media (max-width: 1200px) {
    #game-container {
        flex-direction: column;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    #scores-left {
        width: 20%;
        order: 0;
    }

    #main {
        width: 60%;
        order: 1;
    }

    #scores-right {
        width: 20%;
        order: 2;
    }
}*/

/* Responsive styles */
@media (max-width: 1200px) {
    #game-container {
        flex-direction: row;
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    #main {
        width: 100%;
        order: -1; /* Ensures main content is at the top */
    }

    #scores-left, #scores-right {
        width: 50%;
        min-width: 240px;
        flex-basis: 50%;
    }

}
/* End Responsive adjustments */










/* scaffold */
body, p, ol, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

td {padding:3px;}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a { color: #000; text-decoration: underline;}
a.btn {text-decoration:none;}

a:hover { color: red;}

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#error-explanation {
  width: 400px;
}

#error-explanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#error-explanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#error-explanation ul li {
  font-size: 12px;
  list-style: square;
}

#error-explanation {
  color: #f00;
  ul {
    font-family: Arial, Verdana;
    font-size: 14px;
    font-weight:bold;
    margin: 0 0 0 0px;
    padding: 0px 0 0px 0;
    list-style: disc;
  }
  ul li {
    display: block;
    position: relative;
    float: none;
    border-right: none;
  }
}

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  background-color: #f0f0f0;
  margin: 0;
  padding: 0;
}

div {padding:0; margin:0;}

h1 {
  font-size: 36px;
  margin: 0;
  padding: 5px 0 0 0;
  font-family: Arial, sans-serif;
  color: #3399cc;
}

.chain-1 {background-color:#f66;}
.chain-2 {background-color:#66f;}
.chain-3 {background-color:#6f6;}
.bonus-1 {background-color:#E6E8FA;}
.bonus-2 {background-color:#D4A017;}

.label-1 {color:#f00;}
.label-2 {color:#00f;}
.label-3 {color:#090;}
.label-bonus {color:#D4A017;}

.draggable{background: transparent;padding:0; isolation: isolate; cursor: grab;}
.die { background: transparent; padding:0; margin-right: 1px; cursor: grab}
.dragging { cursor: grabbing}

#reconstruct-container {width:100%; background-color:white; margin:10px 0; padding-top:10px;}

.game-stats {text-align:left; margin-left:5px;}

.placed {padding:0px;background-color:#fff;}
.legal { background-color:#fff;}

.noclick:hover {display:none}

.ability-area {float:left;}
.ability {background-color:#bbb;border:1px solid; margin:10px; width:300px}
.ability-active {background-color:#6f6;} 
.ability-available{background-color:white;} 
.ability-available-hover {background-color:yellow;} 

.legal_hover {background-color:yellow;}

#remove-die {height: 100px; width:100px; margin:10px;}

#scores {padding:1px 0px 1px 5px; }

.extended {width:300px;}

.ztooltip {margin-right:5px; margin-left:3px;}
a.ztooltip span {display:none; padding:2px 3px; margin-left:8px; font-size:12px;}
a.ztooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;z-index:2;font-size:12px;}
a.ztooltip {text-decoration:none;}

a img {text-decoration:none; border:none;}

.header {
  background-color: #f8f8f8;
  border-bottom: 1px solid #e7e7e7;
  margin-bottom: 0px;
}

#challenge-button {font-weight:bold; color:white; width:90%; margin-bottom:15px;}



#instructions {padding:10px 0 10px 8px;}
#faq {padding:10px; width:1050px}
#walkthrough {padding: 10px;}

#challenge_winners {
    display: inline-block;
    width: 25%;
    vertical-align: top;
    margin-right: 20px;
    margin-left: 20px;
}

#daily-challenge-games {
    display: inline-block;
    background-color: white;
    padding: 10px;
    width: calc(70% - 20px);
    vertical-align: top;
}

/* User stats styling */
#user-stats {
  flex: 0 0 300px; /* Don't grow, don't shrink, width 300px */
  padding: 10px;
}


#timed-play-area {min-height: 700px}
#round-summary {float:left; width:710px;}
#scores-timed {width: 300px; float:left; height:100%; padding: 10px 0 10px 10px; margin-left: 5px;}

/* Basic button styles */
/*.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  text-decoration: none;
  cursor: pointer;
  margin-right: 15px;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}*/


.btn {
    display: inline-block;
    margin-bottom: 0;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    color: #333333;
    text-shadow: 0 1px 1px rgba(255,255,255,0.75);
    background-color: whitesmoke;
    background-image: -moz-linear-gradient(top, #fff, #e6e6e6);
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fff), to(#e6e6e6));
    background-image: -webkit-linear-gradient(top, #fff, #e6e6e6);
    background-image: -o-linear-gradient(top, #fff, #e6e6e6);
    background-image: linear-gradient(to bottom, #fff, #e6e6e6);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFFFFFF', endColorstr='#FFE6E6E6', GradientType=0);
    border-color: #e6e6e6 #e6e6e6 #bfbfbf;
    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
    filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
    border: 1px solid #cccccc;
    border-bottom-color: #b3b3b3;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    -moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05)
}


/* Danger button style */
.btn-danger {
  color: white;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #da4e49;
  background-image: -moz-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ee5f5b), to(#bd362f));
  background-image: -webkit-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: -o-linear-gradient(top, #ee5f5b, #bd362f);
  background-image: linear-gradient(to bottom, #ee5f5b, #bd362f);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFEE5F5B', endColorstr='#FFBD362F', GradientType=0);
  border-color: #bd362f #bd362f #802420;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  *background-color: #bd362f;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.btn-danger:hover {
  color: #fff;
  background-color: #c82333;
  border-color: #bd2130;
}

.btn-small {
  padding: 2px 10px;
  font-size: 11.9px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px
}

/* Large button size */
.btn-large {
  padding: 0.75rem 1.5rem;
  font-size: 17.5px;
  line-height: 1.5;
  border-radius: 0.3rem;
  font-weight: bold;
  border-color: #0044cc #0044cc #002a80;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
}

/* Primary button style */
.btn-primary {
  color: white;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #006ccc;
  background-image: -moz-linear-gradient(top, #08c, #04c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#08c), to(#04c));
  background-image: -webkit-linear-gradient(top, #08c, #04c);
  background-image: -o-linear-gradient(top, #08c, #04c);
  background-image: linear-gradient(to bottom, #08c, #04c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF0088CC', endColorstr='#FF0044CC', GradientType=0);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}

.btn-primary:hover {
  color: #fff;
  background-color: #0056b3;
  border-color: #0056b3;
}

.btn-warning {
  color: white;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #f9a732;
  background-image: -moz-linear-gradient(top, #fbb450, #f89406);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#fbb450), to(#f89406));
  background-image: -webkit-linear-gradient(top, #fbb450, #f89406);
  background-image: -o-linear-gradient(top, #fbb450, #f89406);
  background-image: linear-gradient(to bottom, #fbb450, #f89406);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFFBB450', endColorstr='#FFF89406', GradientType=0);
  border-color: #f89406 #f89406 #ad6704;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  *background-color: #f89406;
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.btn-warning:hover {
  color: #212529;
  background-color: #e0a800;
  border-color: #d39e00;
}

.btn-success {
  color: white;
  text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
  background-color: #5bb65b;
  background-image: -moz-linear-gradient(top, #62c462, #51a351);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#62c462), to(#51a351));
  background-image: -webkit-linear-gradient(top, #62c462, #51a351);
  background-image: -o-linear-gradient(top, #62c462, #51a351);
  background-image: linear-gradient(to bottom, #62c462, #51a351);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF62C462', endColorstr='#FF51A351', GradientType=0);
  border-color: #51a351 #51a351 #387038;
  border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
  filter: progid:DXImageTransform.Microsoft.gradient(enabled=false)
}
.btn-success:hover {
  color: #fff;
  background-color: #218838;
  border-color: #1e7e34;
}

/* Combine styles for game action button */
.btn.btn-primary.btn-large.game-action-button,
.btn.btn-large.game-action-button {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  min-width: 150px;
  margin-right: 2px;
}

/* Styles for the Undo button */
.btn-large.game-action-button[disabled] {
  background-color: #f8f9fa;
  border-color: #f8f9fa;
  color: #6c757d;
  cursor: not-allowed;
}

/* Container for the buttons */
#game-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* specific buttons */
#big-signup-button {
  width: 200px;
}

/* flash messages **************************/

.flash_message {
  width: 100%;
  margin: 10px 0;
  padding: 10px;
  border-radius: 4px;
  box-sizing: border-box;
}

.flash_message.notice { 
  border: solid 1px #cce5ff;
  background-color: #e6f3ff;
  color: #004085;
}

.flash_message.alert, 
.flash_message.error { 
  border: solid 1px #f5c6cb;
  background-color: #f8d7da;
  color: #721c24;
}

.flash_message.admin { 
  border: solid 1px #c3e6cb;
  background-color: #d4edda;
  color: #155724;
}

.inactive_alert { 
  border: solid 1px #f5c6cb;
  background-color: #f8d7da;
  color: #721c24;
  border-radius: 4px;
  margin-bottom: 10px;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
/* Score Colors */
.score_silver {color:#bbb;}
.score_black {color:black;}
.score_gold {color:#999900;}
.score_green {color:green;}
.score_blue {color:blue;}
.score_red {color:red;}
.score_orange {color:#FF6633;}
.score_purple {color:#660099;}
.score_cyan {color:#006C8B;}

.score_silver a{color:#bbb;}
.score_black a{color:black;}
.score_gold a{color:#999900;}
.score_green a{color:green;}
.score_blue a{color:blue;}
.score_red a{color:red;}
.score_orange a{color:#FF6633;}
.score_purple a{color:#660099;}
.score_cyan a{color:#006C8B;}

/* pretty tables *******************************************/

table.pretty { z-index:5; border-collapse: collapse; }

.pretty td, .pretty th {
  padding: 4px 10px;
  border: solid 1px #AAA;
}

.pretty th .current {
  padding-right: 12px;
  background-repeat: no-repeat;
  background-position: right center;
}

/* pretty-big tables */

table.pretty-big {
  font-size:24px;
}

.pretty-big td, .pretty th {padding: 4px 15px;}
.pretty-big th .current {
  padding-right: 12px;
  background-repeat: no-repeat;
  background-position: right center;
}

/* Leaderboard *************************/

#leaderboard_nav {
  clear:both;
  height:42px;
  width: 100%;
}

.header_item {
  float:left;
  margin: 10px 5px 0px 5px;
  padding: 0px 4px;
  background-color: white;
}

.header_item a {
  font-size: 20px;
  color: #3399cc;
}

.selected a {color: red; }

/* Replayer *************************/
#replay_buttons {padding-top: 30px; padding-left:68px;}

.replayer_action {float:left; margin-right:3px; height:60px; width:135px;}
.replayer-button {width: 125px;}

/* Tournaments **********************/

.tournament-div {overflow: scroll}
#new-tournament-button {float:left; clear:both; margin: 10px 10px 0px 10px;}
.tournament-table-title {clear:both; margin: 30px 10px 5px 10px; font-size:18px; font-weight:bold;}
.tournament-table {float:left; clear:both; margin: 10px 10px 0px 10px;}
.tournament-table td, th {padding:10px; border:1px solid #ccc;}
.tournament-table-paging {float:left; clear:both; padding:0px 10px 10px 10px;}

.my-tournament {background-color: #ffc}
.my-tournament-incomplete {background-color:#9f9;}

.new-tournament-attribute {clear:both; margin:5px;}
.new-tournament-label {float:left; width:150px;}
.new-tournament-field {float:left; margin-left:10px; }

#tournament-title {
  width:100%;
  font-size:16px;
  padding:10px;
  text-align:center;
  margin-bottom:10px;
  background-color:#cfc;
  height:20px;
  float:left;
  }

  #tournament-players {
    width:100%;
    font-size:16px;
    padding:10px;
    text-align:center;
    float:left;
    margin-bottom:10px;
  }

  #tournament-join-button {
    width:100%;
    font-size:16px;
    padding:10px;
    text-align:center;
    margin-bottom:10px;
    float:left;
  }

.winner {
  width:100%;
  font-size:24px;
  padding:10px;
  text-align:center;
  margin-bottom:10px;
  }

.round-title  {
  width:100%;
  font-size:14px;
  padding:10px;
  text-align:center;
  margin-bottom:10px;
  background-color:#eef;}

.matchup {margin: 10px; padding:5px;}
.matchup-results {float:left; clear:both;}
.matchup-standings {float:left; clear:both; margin-bottom:20px;}
.matchup-results {}
.matchup-results table td {border:1px solid #ccc; height:30px; padding:5px 5px 5px 5px; text-align:center;}

.matchup-winner {font-weight:bold; color:green;}
.user-matchup {background-color:#ffc;}
.winning-chain {background-color:#cfc;}

/* faq */
  .question {
      font-weight: bold;
      color: #2980b9;
      margin-top: 20px;
  }
  .answer {
      margin-bottom: 20px;
  }
  .levels {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 10px;
  }


/* walkthrough */
  #walkthrough h1 {
    text-align: center !important;
    width: 100%;
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .intro {
      text-align: center;
      margin-bottom: 30px;
      width: 100%;
  }
  .step {
      width: 100%;
      margin-bottom: 40px;
      border-bottom: 1px solid #ccc;
      padding-bottom: 20px;
  }
  .step-title {
      font-weight: bold;
      color: #2980b9;
      margin-bottom: 10px;
  }
  .step-content {
      margin-bottom: 20px;
  }
  .step-image {
      text-align: center;
      margin-bottom: 20px;
  }
  .step-image img {
      max-width: 100%;
      height: auto;
  }

.step-image {
  margin-top: 20px;
}

/* general */
.cleared {clear:both;}
.clear_right {clear:right;}
.float {float:left;}
.float_right {float:right;}
.strikethrough {text-decoration: line-through; color:gray;}

.text-small {font-size:12px;}
.text-medium {font-size:16px;}
.text-large {font-size:20px;}
.text-center {text-align:center;}

.black {color:black;}
.red {color:red;}
.red_link a {color:red;}
.red_link a.visited {color:red;}

.bgwhite {background-color: white}

.max-width {width:100%;}

.text_section {margin-bottom:10px; margin-left: 10px; font-size:14px;}