/* Base styles */
body {
    font-size: 16px;
    line-height: 1.6;
    font-family: 'Inter', -apple-system-font, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
    font-weight: 400;
    color: #2d3436;
}

body {
    margin: 0 auto;
    max-width: 800px;
    padding: 2rem;
    background-color: #f9fafb;
}

/* Modern input styling */
#guess-wrapper {
    display: flex;
    margin: 1.5rem 0;
    align-items: center;
    gap: 1rem;
    width: 120%;
}

input {
    height: 50px;
    font-size: 1.2rem;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 0 1rem;
    transition: all 0.2s ease;
}

input:focus {
    border-color: #4299e1;
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.15);
    outline: none;
}

#guess {
    width: 75%;
}

#guesses {
    margin-bottom:40px;
}

#give-up-btn {
    height: 44px;
}

input[type="checkbox"] {
    margin-bottom: 20px;
}

body {
    padding-left:20px;
    padding-right:20px;
    padding-top:18px;
}


th {
    padding-left: 3em;
    text-align: right;
}

th#chronoOrder, th#alphaOrder, th#similarityOrder, input#give-up-btn, input#guess-btn, input#lower{
    cursor: pointer;
}

.gaveup {
    border: 1px solid black;
    padding-top: 0.7ex;
    padding-bottom: 0.7ex;
    padding-left: 0.7em;
    background-color: #eeeeff;
}

.close {
    text-align: right;
}

/*"Unusual word found!  This word is not in the list of \"normal\" words that we use for the top-1000 list, but it is still similar!";*/

.weirdWord {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.weirdWord .tooltiptext {
 visibility: hidden;
  width: 20em;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 0.3ex 0;
  border-radius: 1ex;

  position: absolute;
  z-index: 1;
}


.weirdWord:hover .tooltiptext {
  visibility: visible;
}

footer {
    margin-top: 200px;
}

.review {
    margin: 0;
}

.review__quote {
    font-size: medium;
}

.review__quote::before {
    content: '\201C';
}

.review__quote::after {
    content: '\201D';
}

.review__reviewer {
    margin-right: 20px;
    font-size: small;
}

body.rules-open {
    overflow: hidden;
}

body.rules-open #rules-underlay {
    display: block;
    float: top;
}

body.notification-open {
    overflow: hidden;
}

body.notification-open #notification-underlay {
    display: block;
    float: top;
}

body.settings-open #settings-underlay {
    display: block;
}

.dialog-underlay {
    background: rgba(0,0,0,.5);
    bottom: 0;
    display: none;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 1000;
}

body.dialog-open {
    overflow: hidden;
}

/* Dialog styling */
.dialog {
    background: white;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    overflow: hidden;
}

.dialog-close {
    color: black;
    font-size: 1.5em;
    height: 1em;
    line-height: 1em;
    left: .5em;
    position: absolute;
    top: .5em;
    width: 1em;
    z-index: 2;
}

.dialog-content {
    padding: 2.5rem;
}

.dialog-content > *:first-child {
    margin-top: 0;
}

.dialog-content > *:last-child {
    margin-bottom: 0;
}

#rules-heading {
    margin-top: 0;
}

header {
    align-items: center;
    display: flex;
    justify-content: space-between;
}

#menu {
    display: flex;
    column-gap: .5em;
    align-items: center;
    line-height: 1rem;
    z-index: 999; /* under modal */
}

#menu button,
.dialog-close {
    background: transparent;
    border: none;
    padding: 0;
    opacity: 0.6;
}

#menu button:hover {
  opacity: 1;
}

#menu button svg {
    height: 1.5em;
    width: 1.5em;
}

.percentile,
.progress-container,
.progress-bar {
    display: inline-block;
    background-color:#008000;
}

.percentile {
    text-align: right;
    width: 5em;
}

.progress-container {
    background-color: #eeeeee;
    width: 10em;
    text-align: left;
}

a {
    text-decoration: none;
}

.implicita {
    color: #000;
}


@media only screen and (max-width: 640px) {
    body, input {
        font-size: 14px;
    }

    #guess-wrapper {
        flex-grow: 1;
    }

    table {
        width: 100%;
    }

    th {
        padding-left: .5em;
    }

    .accordion {
        font-size: 14px;
    }
}

.embed-container {
    z-index: 0;
    position: relative;
     padding-bottom: 56.25%;
      height: 0;
      overflow: hidden;
       max-width: 100%;
}

.embed-container iframe, .embed-container object, .embed-container embed {
    position: absolute;
     top: 0;
     left: 0;
     width: 100%;
      height: 100%;
}

/* Dark mode */
body.dark {
    background: #111;
    color: #fafafa;
    color-scheme: dark;
}

body.dark a {
    color: #9af;
}

body.dark #menu button {
    color: #fafafa;
}

body.dark .dialog {
    background: #333;
}

body.dark .dialog-close {
    color: #fafafa;
}

body.dark .progress-container {
    background: #333;
}

body.dark .implicita {
    color: #FFF;
}

body.dark .panel {
    background: #334;
}

body.dark #menu .burger-menu .bar {
    background-color: #fafafa;
}

/*
Accordion styling taken from
https://www.w3schools.com/howto/howto_js_accordion.asp
*/
.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: right;
  border: none;
  outline: none;
  font-size: 17px;
  transition: 0.4s;
  margin-top: 3px;
}


body.dark .accordion {
  background-color: #666;
  color: #eee;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: right;
  border: none;
  outline: none;
  font-size: 17px;
  transition: 0.4s;
  margin-top: 3px;
}

.active, .accordion:hover {
  background-color: #ccc;
}

.panel {
  padding: 0 18px;
  background-color: #eeeeff;
  display: none;
  overflow: hidden;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 17px;
  color: #777;
  float: left;
  margin-right: 5px;
}

.accordion.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
  font-size: 17px;
}


body.dark .accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  color: #FFF;
  margin-right: 5px;
}

body.dark .accordion.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
  font-size: 17px;
}

img.emoji {
  height: 1rem;
  vertical-align: text-top;
}

#tooltip-menu {
    position: absolute;
    background-color: #fff;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    padding: 5px;
    display: none;
    transform: translateX(50%); /* Move left by 100% of its own width */
}


.burger-menu {
    display: none; /* Hide the hamburger menu button by default */
    background-color: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
}

.burger-menu .bar {
    width: 20px;
    height: 3px;
    background-color: #000; /* Adjust the color as needed */
    margin: 5px auto;
    transition: 0.4s;
    border-radius: 10px;
}

/* Add animation for the bars when menu is toggled */
.burger-menu.active .bar:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.burger-menu.active .bar:nth-child(2) {
    opacity: 0;
}

.burger-menu.active .bar:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Media query for mobile devices */
@media screen and (max-width: 768px) {
    /* Show the hamburger icon and hide the navigation buttons */
    .burger-menu {
        display: block !important;
    }

    #menu button {
        display: none;
    }

    /* Style the hamburger icon as needed */
    .burger-menu {
        /* Add styles for the hamburger icon, e.g., background, size, etc. */
    }
    #menu button {
      display: none;
      opacity: 1;

    }

    #menu {
      top: 2rem;
      left: 1rem;
      position: fixed;
      display: flex;
      flex-direction: column-reverse;
      background-color: #f3f3f38a;
      padding: 4px;
      border-radius: 2px;
      row-gap: .4em;
    }

    #menu.active {
      height: auto;
    }

    body.dark #menu {
      background-color: #7570708a;
    }
}

.show {
    display: block !important;
}

.material-symbols-rounded {
  vertical-align: bottom;
}

#statistics-table td {
  padding-left: 2em;
  padding-top: 0.2em;
}

.shimmer {
  -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  20% {-webkit-mask-position:left}
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}

/* The snackbar - position it at the bottom and in the middle of the screen */
#snackbar {
  visibility: hidden; /* Hidden by default. Visible on click */
  min-width: 250px; /* Set a default minimum width */
  margin-left: -125px; /* Divide value of min-width by 2 */
  text-align: center; /* Centered text */
  border-radius: 5px; /* Rounded borders */
  padding: 16px; /* Padding */
  position: fixed; /* Sit on top of the screen */
  z-index: 9999; /* Add a z-index if needed */
  left: 50%; /* Center the snackbar */
  top: 30px; /* 30px from the bottom */
  justify-content: center;
  color: #000; /* Text color should always be black, even in dark mode */
}

/* Show the snackbar when clicking on a button (class added with JavaScript) */
#snackbar.show {
  visibility: visible; /* Show the snackbar */
  /* Add animation: Take 0.5 seconds to fade in and out the snackbar.
  However, delay the fade out process for 3.5 seconds */
  -webkit-animation: fadein 0.5s, fadeout 0.5s 3.5s;
  animation: fadein 0.5s, fadeout 0.5s 3.5s;
}

/* Animations to fade the snackbar in and out */
@-webkit-keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@keyframes fadein {
  from {top: 0; opacity: 0;}
  to {top: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}

@keyframes fadeout {
  from {top: 30px; opacity: 1;}
  to {top: 0; opacity: 0;}
}