/* === Three Readings Inactive for Today (greyed out with overlay) === */
.three-readings-card.is-inactive-today {
  filter: grayscale(80%);
  opacity: 0.6;
  pointer-events: none;
  background-color: #f7f7f7;
  border-style: dashed;
  position: relative;
}
.three-readings-card.is-inactive-today::after {
  content: "You’ve finished this reading for today. Check back tomorrow!";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255,255,255,0.9);
  color: #444;
  padding: 12px 18px;
  border-radius: 8px;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* === Three Readings Inactive Card Styles === */
.three-readings-card.is-inactive {
    filter: grayscale(80%);
    opacity: 0.6;
    pointer-events: none;
    background-color: #f7f7f7;
    border-style: dashed;
}
.three-readings-card.is-inactive .reading-type-label,
.three-readings-card.is-inactive .reading-topic-label,
.three-readings-card.is-inactive .reading-snippet {
    color: #999;
}
/* === Three Readings Layout === */
.three-readings-flex {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  gap: 1rem;
  margin: 1.5rem 0;
}
.three-readings-card {
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  padding: 32px 24px 24px 24px;
  flex: 1 1 0px;
  min-width: 300px;
  max-width: 420px;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  margin: 0 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.three-readings-card:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px rgba(0,0,0,0.13);
}
.three-readings-card .reading-type-label {
  font-weight: bold;
  font-size: 1.25rem;
  color: #d32f2f;
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.three-readings-card .reading-topic-label {
  font-size: 1.1rem;
  color: #37474f;
  margin-bottom: 0.7rem;
}
.three-readings-card .reading-snippet {
  color: #555;
  font-size: 1.08rem;
  line-height: 1.46;
  margin-bottom: 0;
}
@media (max-width: 900px) {
  .three-readings-flex {
    flex-direction: column;
    gap: 1.6rem;
    align-items: stretch;
  }
  .three-readings-card {
    max-width: 100%;
    margin: 0;
  }
}
.speaker-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: none;
    border: none;
    font-size: 28px;
    color: #555;
    cursor: pointer;
    transition: color 0.2s ease;
}
.speaker-btn:hover {
    color: #d32f2f;
}

#enable-toggle {
    position: absolute;
    top: 15px;
    right: 60px; /* slightly to the left of the speaker */
    background: none;
    border: none;
    font-size: 16px;
    color: #888;
    cursor: pointer;
    opacity: 0.8;
    transition: color 0.2s ease;
}
#enable-toggle:hover {
    color: #d32f2f;
}

#forgot-button {
    background-color: #e53935;
    border-color: #e53935;
    color: #fff;
}
#forgot-button:hover {
    background-color: #b71c1c;
    border-color: #b71c1c;
    color: #fff;
}

.understand-label {
    font-size: 0.8em;
    color: #666;
    display: block;
    margin-left: 25%;
    margin-bottom: 10px;
    white-space: nowrap;
    text-align: left;
}
.difficulty-top-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    position: relative;
}

.next-label {
    font-size: 0.75em;
    color: #888;
    position: relative;
    margin-left: 8px;
    pointer-events: none;
    font-weight: 500;
    letter-spacing: 0.02em;
}


/* ===== Custom indicator tooltips for polysemous & lexeme ===== */
.indicator-tooltip {
    position: absolute;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 0.85rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease;
    z-index: 50;
}
.card-indicator:hover .indicator-tooltip {
    opacity: 1;
    visibility: visible;
}

.polysemous-tooltip {
    background-color: #e53935; /* red */
}

.lexeme-tooltip {
    background-color: #43a047; /* green */
}

/* ===== Card Polysemous/Lexeme Indicators ===== */
.card-indicator {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-left: 6px;
    position: relative;
    cursor: help;
}

.polysemous-indicator {
    background-color: #e53935; /* red */
}

.lexeme-indicator {
    background-color: #43a047; /* green */
}

.deck-card-div .inactive-tooltip {
    position: absolute;
    top: 47%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #ffffff;
    color: #000;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px 20px;
    font-size: 0.75rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    max-width: 90%;
    text-align: center;
    z-index: 20;
    white-space: normal;       /* allow text to wrap */
    word-wrap: break-word;     /* break long words if needed */
}

.deck-card-div.activated-False:hover .inactive-tooltip {
    visibility: visible;
    opacity: 1;
}
.progress-container .progress-info {
  display: none;
  position: absolute;
  bottom: 110%;
  left: 8px;
  background: #fff;        /* white background */
  color: #000;             /* black text */
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 4px;
  white-space: nowrap;
  z-index: 1000;
  border: 1px solid #ccc;  /* optional: subtle border so it stands out */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* optional subtle shadow */
}

.progress-container .progress-info::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 12px;
  border-width: 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent; /* white arrow */
}
.progress-container.has-label:hover .progress-info {
  display: block;
}
.reading-card.is-inactive {
    filter: grayscale(70%);
    opacity: 0.6;
    pointer-events: none; /* optional: disable clicking */
}

.copy-deck-button {
    background-color: var(--primary-accent);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* Base style for all selects */
select {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    background: #fff;
    box-sizing: border-box;

    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='gray' d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 28px;
    cursor: pointer;
}

select:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(211,47,47,0.12);
}

.copy-deck-button:hover {
    background-color: var(--highlight);
    color: black;
}
a { 
    color: var(--text-dark);
    text-decoration: none;
}

.fan-counter {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
    text-align: center;
}
.explore-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 20px;
}

.pagination-link {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: white;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.pagination-link:hover {
    background-color: #f0f0f0;
}

.pagination-link.active {
    background-color: var(--primary-accent);
    color: white;
    border-color: var(--primary-accent);
    font-weight: bold;
}

.pagination-ellipsis {
    padding: 6px 12px;
    color: #999;
}

.truncate-text {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}


:root {
    --bg-light: #fdf3f3;
    --gray-ui: #f7eaea;
    --primary-accent: #d32f2f;
    --text-dark: #212121;
    --highlight: #ffc107;
    --accent-alt: #283593; /* Indigo 800 */
}

body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

header {
    background-color: var(--primary-accent);
    color: var(--text-dark);
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header h1 {
    margin: 0;
    margin-left: 80px;
}

nav ul.masthead-links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 2.5rem;
    margin-left: auto;
    margin-right: 50px;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.1rem;
}

nav ul.masthead-links li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
    font-size: 1.2rem;
}

nav ul.masthead-links li a:hover {
    color: var(--highlight);
}

.content {
    padding: 2rem;
}

.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.alert-success {
    background-color: #c8e6c9;
    color: #256029;
}

.alert-warning {
    background-color: #fff9c4;
    color: #795548;
}

/* ===== Flash messages (Flask flash) ===== */
.flash-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto 16px;
}

.alert {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.alert .alert-icon {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 18px;
  background-color: currentColor;
  opacity: 0.35;
}

.alert .alert-text { flex: 1 1 auto; }

.alert .alert-close {
  appearance: none;
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  margin-left: 8px;
  color: inherit;
  opacity: 0.6;
}
.alert .alert-close:hover { opacity: 1; }

/* Add an info style (Bootstrap-like mapping) */
.alert-info {
  background-color: #cfe8ff;
  color: #0b3d91;
}

/* Ensure contrast for existing variants */
.alert-success { border-color: #8bc34a33; }
.alert-warning { border-color: #ff980033; }
.alert-danger  { border-color: #f4433633; }


.register-container {
max-width: 400px;
margin: 80px auto;
padding: 40px;
background: var(--gray-ui);
border-radius: 10px;
border: 1px solid #e0d4d4;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
font-family: 'Segoe UI', sans-serif;
}

.register-container fieldset {
border: none;
padding: 0;
margin: 0;
}

.register-container legend {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}

.register-container div {
margin-bottom: 20px;
}

.register-container label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}

.register-container input {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 6px;
}

.register-container input[type="submit"] {
background-color: var(--primary-accent);
color: white;
border: none;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.register-container input[type="submit"]:hover {
background-color: var(--highlight);
color: black;
}

.register-footer {
text-align: center;
margin-top: 30px;
font-size: 14px;
color: #333;
}

.register-footer a {
color: var(--primary-accent);
text-decoration: none;
font-weight: 500;
}

.register-footer a:hover {
text-decoration: underline;
}
.alert-danger {
    background-color: #ffcdd2;
    color: #b71c1c;
}

/* ==== Horizontal Session Progress Bar ==== */
/* Sleek modern horizontal progress bar */
.session-progress-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 2rem auto;
  text-align: center;
}

.session-progress-bar-horizontal {
  width: 100%;
  height: 40px;
  background-color: #e6e6e6;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.session-progress-fill-horizontal {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, #d32f2f, #f44336, #ff9800);
  border-radius: 20px 0 0 20px;
  transition: width 0.5s ease-in-out;
}

.session-progress-label-horizontal {
}


.session-progress-label-inside {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: 500;
  font-size: 1rem;
  color: black;
  pointer-events: none;
  white-space: nowrap;
}

.progress-fill-total {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #ffeb3b; /* stronger yellow */
  transition: width 0.5s ease-in-out;
}

.progress-fill-improvement {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #ff5722; /* deeper orange */
  transition: width 0.5s ease-in-out;
}

.progress-fill-regression {
  position: absolute;
  top: 0;
  height: 100%;
  background-color: #e53935; /* red */
  transition: width 0.5s ease-in-out;
}


.session-progress-congrats {
  margin-top: 10px;
  font-size: 1rem;
  font-weight: 400;
  color: #333;
}

.congrats-positive {
  color: #2e7d32; /* green for success */
  font-weight: 500;
}

.congrats-negative {
  color: #c62828; /* red for warning */
  font-weight: 500;
}

.congrats-neutral {
  color: #555; /* neutral gray */
  font-weight: 500;
}

.form-div{
    display: flex;
    flex-direction: column;
}

.login-footer {
  text-align: center;
  margin-top: 30px;
  font-size: 20px;
  color: #333;
}

.login-footer a {
  color: var(--primary-accent);
  text-decoration: none;
  font-weight: 500;
}

.login-footer a:hover {
  text-decoration: underline;
}
.login-container {
    max-width: 400px;
    margin: 80px auto;
    padding: 40px;
    background: var(--gray-ui);
    border-radius: 10px;
    border: 1px solid #e0d4d4;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    font-family: 'Segoe UI', sans-serif;
}

.login-container fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.login-container legend {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.login-container div {
    margin-bottom: 20px;
}

.login-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.login-container input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.login-container input[type="submit"] {
    background-color: var(--primary-accent);
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-container input[type="submit"]:hover {
    background-color: var(--highlight);
    color: black;
}

.login-container small {
    display: block;
    text-align: center;
    margin-top: 15px;
}
.card {
  background: white;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 40px;
  max-width: 700px;
  min-height: 400px;
  margin: 50px auto;
  text-align: center;
  transition: box-shadow 0.3s ease;
  position: relative;
}

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

.play-button {
  background-color: #283593; /* soft indigo */
  color: white;
  border: 2px solid #283593;
  padding: 12px 24px;
  margin: 10px 8px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.play-button:hover {
  background-color: #303f9f;
  color: white;
  border-color: #303f9f;
}

.play-button:active {
  transform: scale(0.96);
}

.difficulty {
  text-align: center;
  margin-top: 20px;
}
.next-button {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.back{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
}

.answer{
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    height: 100%;  
}

.prof-page-container{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 75lvh;
}

.left-screen-sc{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 70%;
}

.profile-ssc{
    display: flex;
    background-color: white;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px;
}

.profile-pic {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
}

.profile-info-ssc{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.deck-display-ssc{
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-color: white;
    padding: 20px;
}

.deck-holder{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.add-deck-sssc{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.sidebar-sc{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: lightgray;
    width: 20%;
}
.sidebar-sc h2{
    border-top:#333;

}

.card-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 20px;
}

.card-pagination a {
    padding: 8px 16px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.card-pagination a:hover {
    background-color: #0056b3;
}

.play-back{
    display: flex;
    flex-direction: column;
    gap: 30px;

    padding-left: 30px;
    padding-right: 30px;
}

.play-word {
  position: relative;
  cursor: pointer;
  text-decoration: underline dotted;
}
.play-word.yellow-text {
  color: black;
}


.play-message {
  display: none;
  text-align: center;
  position: absolute;
  font-size: 18px;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  background-color: white;
  color: black;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  max-width: 100px;
  max-height: 70px;
  white-space: normal;
  word-wrap: normal;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}


.play-word:hover .play-message,
.play-message:hover {
  display: block;
}

.play-truncate-select{
    width: 150px; /* or any desired width */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}


.deck-info-div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 15px;
    border: 1px  solid black;
}

.change-deck-div{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 25px;

}

.deck-info-sc{
    display: flex;
    flex-direction: column;
}

.deck-bottom-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.deck-bottom-actions .deck-show-all {
    background-color: #fff8f8;
    color: var(--primary-accent);
    border: 1px solid #f2cccc;
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.deck-bottom-actions .deck-show-all:hover {
    background-color: #fbeee7;
    color: #b71c1c;
    border-color: #e7bcbc;
}

.deck-bottom-actions .deck-play-button {
    background-color: var(--primary-accent);
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.deck-bottom-actions .deck-play-button:hover {
    background-color: var(--highlight);
    color: black;
}

.deck-bottom-actions .deck-delete-button {
    background-color: #faeaea;
    color: #b71c1c;
    border: 1px solid #f5cccc;
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.deck-bottom-actions .deck-delete-button:hover {
    background-color: #f8bbbb;
    color: #a02a2a;
    border-color: #e4a6a6;
}

/* ================= decks.html ================= */


/* ================= decks.html ================= */
.decks-container {
    background-color: #f9fbfc;
    padding: 2.5rem;
    max-width: 1000px;
    margin: 30px auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.deck-card {
    position: relative;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    color: var(--text-dark);
    padding: 1rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    min-width: 180px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    cursor: pointer;
}

.deck-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.deck-card-link {
    color: #3f51b5;
    text-decoration: none;
    font-weight: 500;
}

.deck-card-link:hover {
    text-decoration: none;
}

.deck-form-wrapper {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    padding: 10px 12px; /* was 2rem */
    border-radius: 6px;
    margin-top: 12px;   /* was 2.5rem */
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    max-width: 520px;   /* keep wrapper compact */
}

/* === Compact regular deck cards (non-contexto) === */
.deck-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
/* Full-width grid for Contexto decks */
.deck-grid--full {
    grid-template-columns: 1fr;
}

.deck-card.deck-card--compact {
    padding: 0.8rem 1rem;
    min-width: auto;
    font-size: 1.05rem; /* slightly larger, still compact */
    border-radius: 10px;
}

/* thin top row to host the badge */

.deck-card--compact .deck-card-topline {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 18px;
    margin-bottom: 6px;
}

/* ===== Contexto help icon and modal ===== */
.deck-help {
    position: absolute;
    top: 8px;
    left: 10px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #ffffff;
    color: #283593; /* indigo */
    border: 1px solid #c7cdfc;
    font-weight: 700;
    font-size: 12px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    user-select: none;
}
.deck-help:hover { background: #eef1ff; }

/* Inline help icon next to h2 title */
.decks-title .deck-help {
    position: static;
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
}

/* Full-screen modal for Contexto help */
.contexto-help-modal {
    display: none;           /* toggled to flex via JS */
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    justify-content: center;
    align-items: center;
    z-index: 10000;
}
.contexto-help-content {
    background: #ffffff;
    width: min(92vw, 760px);
    max-height: 85vh;
    overflow: auto;
    border-radius: 12px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.25);
    padding: 22px 24px;
}
.contexto-help-content h3 { margin: 0 0 10px 0; }
.contexto-help-content p { margin: 0 0 10px 0; line-height: 1.55; }
.contexto-help-close {
    display: inline-block;
    margin-top: 8px;
    background: #ffffff;
    color: var(--primary-accent);
    border: 1px solid #e7c6c6;
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 0.95rem;
    cursor: pointer;
}
.contexto-help-close:hover { background: #fff2f2; }



/* nicer review due badge */
.review-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 999px;
    background-color: #eef1ff; /* light indigo background */
    color: #283593;           /* deep indigo text */
    border: 1px solid #c7cdfc; /* subtle indigo border */
    white-space: nowrap;
}


.reviewed-today-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 0.75rem;
    line-height: 1.2;
    border-radius: 999px;
    background-color: #fff4e5; /* light orange background */
    color: #e65100;           /* deep orange text */
    border: 1px solid #ffcc80; /* subtle orange border */
    white-space: nowrap;
}

.new-badge {
    display: inline-block;
    padding: 4px 10px;
    font-size: 0.85rem;
    font-weight: bold;
    line-height: 1.2;
    border-radius: 999px;
    background-color: #ffeb3b; /* bright yellow */
    color: #000; /* black text */
    white-space: nowrap;
}

/* small hover pop for compact cards */
.deck-card.deck-card--compact:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
}

/* When a deck has reviews due, color the entire card */
/* When a deck has reviews due, color the entire card (softer indigo) */
.deck-card.is-due {
    background-color: #7986cb; /* muted, greyed indigo */
    color: #ffffff;
    border-color: #5c6bc0;     /* slightly darker edge */
}
/* Ensure internal link/text stays readable on blue */
.deck-card.is-due .deck-card-link {
    color: #ffffff;
}

/* Contexto deck: nice red color */
/* Contexto deck: nice red color */
.deck-card.contexto {
    background-color: #e74c3c; /* slightly milder red */
    color: #ffffff;
    border-color: #d32f2f;
}
.deck-card.contexto .deck-card-link {
    color: #f5f5f5; /* or 1a1a1a for nice off black */
    font-weight: bold;

}

/* Ensure Contexto decks that are due use the blue due style */
.deck-card.contexto.is-due {
    background-color: #7986cb; /* same as .deck-card.is-due */
    color: #ffffff;
    border-color: #5c6bc0;
}

/* Keep links readable on the blue card */
.deck-card.contexto.is-due .deck-card-link {
    color: #ffffff;
}


/* Icon contrast on blue card */
.deck-card.is-due .deck-icon {
    background-color: #ffffff; /* flips to white so it doesn't disappear */
}

/* Badge style on blue card: subtle outline for contrast */
.deck-card.is-due .review-badge {
    background-color: transparent; /* let the blue card show through */
    color: #ffffff;
    border-color: #ffffff66; /* soft white outline */
}

/* Slight hover lift still visible on dark bg */
.deck-card.is-due:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* deck icon next to name */
.deck-icon {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 8px;
    border-radius: 4px; /* rounded square, not a dot */
    background-color: #c7c7c7; /* neutral */
    vertical-align: -1px;
}

.deck-card.is-due .review-badge {
    background-color: var(--accent-alt);
    color: #ffffff;
    border-color: #222b6f; /* darker indigo border */
}
/* ================= deck.html ================= */


.deck-info-div {
    padding: 2rem;
    background-color: #f9fbfc;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 2rem;
    max-width: 1000px;
    margin-inline: auto;
}

.deck-info-sc h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #37474f;
}

.deck-info-sc h3 {
    font-size: 1.1rem;
    color: #607d8b;
    margin: 0.25rem 0;
}

.change-deck-div {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.change-deck-div form p {
    margin: 0.5rem 0;
}

.change-deck-div button,
.change-deck-div input[type="submit"] {
    background-color: #3f51b5;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.change-deck-div button:hover,
.change-deck-div input[type="submit"]:hover {
    background-color: #303f9f;
}

.deck-add-card {
    padding: 2rem;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 1000px;
    margin: 2rem auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.deck-add-card label {
    font-size: 16px;
}

.deck-card-input {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#results li {
    list-style: none;
    margin: 0.3rem 0;
    cursor: pointer;
    color: #3f51b5;
}

#results li:hover {
    text-decoration: underline;
}
.deck-card-display {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 10px 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Two-row variant for Contexto decks */
.deck-card-display--two {
    display: grid;
    grid-auto-flow: column;            /* fill down, then to the right */
    grid-auto-columns: 200px;          /* column width matches card width */
    grid-template-rows: repeat(2, auto); /* exactly two rows */
    gap: 20px;
    padding: 10px 0;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Ellipsis for overflowing text in two-row Contexto deck cards */
.deck-card-display--two .deck-card-div p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Make the Show-all tile span both rows when in two-row mode */
.deck-card-display--two .deck-final-show {
    grid-row: span 2;
}

.deck-card-div {
    min-width: 180px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative;
}

.deck-card-div .review-badge,
.deck-card-div .reviewed-today-badge {
    position: absolute;
    top: 14px;
    right: 18px;
}
.deck-card-div .new-badge {
    position: absolute;
    top: 14px;
    right: 18px;
}
.deck-final-show{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 180px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
    
    background-color: #fff8f8;
    color: var(--primary-accent);
    border: 1px solid #f2cccc;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

.deck-card-div:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


.no-cards {
  text-align: center;
  padding: 20px;
  background-color: #fff8f8;
  border: 1px dashed #f2cccc;
  border-radius: 6px;
  color: #b71c1c;
  font-size: 1.1rem;
  margin: 20px auto;
}


.card-text-translation {
    font-size: 0.9rem;
    color: #616161;
    margin-top: 0.5rem;
}

.deck-create-button {
    padding: 2px 6px;
    font-size: 14px;
}

.deck-create-button p {
    margin: 0;
}

/* ================= card.html ================= */



/* ================= finished.html ================= */

.finished-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

.finished-title {
    font-size: 32px;
    margin-bottom: 30px;
}

.finished-card-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-bottom: 40px;
}

.finished-card-div {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 30px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.finished-word {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.finished-translation {
    font-size: 20px;
    color: #666;
}

.finished-play-again-wrapper {
    margin-top: 20px;
}

.finished-play-again-button {
    display: inline-block;
    background-color: #f0f0f0;   
    color: #333;                 
    padding: 12px 24px;
    border-radius: 6px;
    border: 1px solid #ccc;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.finished-play-again-button:hover {
    background-color: #e2e2e2;
    color: black;
}

/* === Finished Home Button Styles === */
.finished-home-wrapper {
    margin-top: 20px;
}

.finished-home-button {
    display: inline-block;
    background-color: var(--primary-accent);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    border: none;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.finished-home-button:hover {
    background-color: var(--highlight);
    color: black;
}

#wild-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(173, 216, 230, 0.95); /* light blue */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.wild-card-div {
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 300px;
}

.wild-word {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.wild-translation {
    font-size: 22px;
    margin-bottom: 20px;
}

#next-wild {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.wild-note {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}
/* === Deck tooltip: slightly narrower than the card === */
.deck-card-div .card-hover-info-True {
    top: 0;                   /* stay at very top inside the card */
    left: 8px;                /* inset from the left edge */
    right: 8px;               /* inset from the right edge */
    width: auto;              /* width is defined by left/right insets */
    transform: none;          /* cancel any previous centering transforms */
    box-sizing: border-box;   /* keep padding inside width */
}
/* ================= explore.html ================= */

.ex-card-display {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 10px 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.ex-card-div {
    min-width: 180px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
    
}

.customize-card-display {
    width: 80%;
    max-width: 700px;
    margin: 40px auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: sans-serif;
    min-height: 600px; /* Add this line for vertical length */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.customize-card-display .card-half {
    padding: 20px;
    text-align: center;
}

.customize-card-display .card-divider {
    border-top: 1px solid #ddd;
    margin: 0;
}

.text-box {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 6px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 20px;
}

.text-box-applied {
    padding: 20px;
    border-radius: 6px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 20px;
    background-color: white;
    box-shadow: 0 0 0 2px #ccc;
}

/* ================= explore.html ================= */


.explore-card-display{
    display: flex;
    flex-direction: row;
    gap: 15px;

    overflow-x: auto;
    max-width: 100%;
    white-space: nowrap;

    padding-bottom: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.explore-card-div{
    display: flex;
    flex-direction: column;
    align-items: center;

    border: 1px solid #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
}

.explore-div{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.explore-profile-pic{
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 50%;
}

.explore-deck-info{
    display:flex;
    flex-direction: row;
    gap: 20px;

}

.explore-deck-display{
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.explore-user-info{
    display: flex;
    flex-direction: column;

    padding-top: 10px;
}

.explore-pagination{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.explore-fan-copy-holder{
    display: flex;
    flex-direction: column;
    align-items: space-evenly;
    justify-content: center;

    margin-left: auto;
}

.progress-container {
  width: 100%;
  background-color: #e0e0e0;
  border-radius: 6px;
  overflow: hidden;
  height: 22px;                 /* was 14px – gives room for text */
}

.progress-container.has-label {
  position: relative;
  overflow: visible; /* allow tooltip to escape */
}
.progress-container .progress-label {
  position: absolute;
  top: 50%;
  left: 8px;
  transform: translateY(-50%);
  font-size: 12px;        /* match help text size */
  font-weight: normal;    /* subtle, not bold */
  color: #666;            /* match help text color */
  z-index: 2;
  pointer-events: none;
  white-space: nowrap;
}
.progress-container .progress-bar {
  position: relative;
  z-index: 1;               /* under the label */
}

.progress-bar {
  height: 100%;
  background-color: var(--highlight);
  transition: width 0.3s ease;
}

.card-settings{
    display: flex;
    flex-direction: column;
    height: 50lvh;
}

.input-large {
    width: 100%;
    height: 1.5em; /* adjust height */
    font-size: 1.2em; /* adjust font */
}


/* ===== Modal cards: ordered, grid, and card-like look ===== */
.modal-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0 0 12px 0;
}

.modal-card-item {
    position: relative;
    list-style: none; /* we're numbering with a counter */
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    padding: 14px;
    min-height: 140px;
    min-width: 150px;
    max-width: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.modal-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

/* Numbering bubble via CSS counter */
.modal-card-item::before {
    position: absolute;
    top: 10px;
    left: 12px;
    font-weight: 700;
    color: #9e9e9e;
}

/* Keep badge consistent and in the top-right corner */
.modal-card-item .review-badge {
    position: absolute;
    top: 8px;
    right: 10px;
}
.modal-card-item .reviewed-today-badge {
    position: absolute;
    top: 8px;
    right: 10px;
}
.modal-card-item .new-badge {
    position: absolute;
    top: 8px;
    right: 10px;
}

.modal-card-word { margin: 4px 0 6px 0; font-size: 1.15rem; }
.modal-card-translation { margin: 0; color: #616161; font-size: 1.05rem; }


.modal{
    display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); justify-content:center; align-items:center;
}

.modal-div{
    background:white; padding:20px; border-radius:8px; text-align:center;
}

.deck-header-box {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* ===== Edit Deck panel (minimal, clean) ===== */
.edit-deck-panel {
    background-color: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    box-shadow: 0 1px 6px rgba(0,0,0,0.06);
    padding: 16px 18px;
    max-width: 720px;
    margin: 0 auto 20px;
}

.edit-deck-form .form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 16px;
}

@media (max-width: 700px) {
  .edit-deck-form .form-grid { grid-template-columns: 1fr; }
}

.edit-deck-form .form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    gap: 16px;
}

.edit-deck-form .edit-input,
.edit-deck-form select {
    box-sizing: border-box; /* prevents padding/border from overflowing */
    width: 100%;            /* make them fit the grid cell exactly */
}
/* Edit Deck panel styles */
.edit-deck-form .edit-input {
    width: 100%;
    padding: 6px 10px;           /* shorter */
    font-size: 13px;             /* slightly smaller */
    height: 36px;                /* compact control height */
    border: 1px solid #d6d6d6;
    border-radius: 6px;          /* a bit tighter */
    background-color: #ffffff;
    box-shadow: none;
}
.edit-deck-form select {
    width: 100%;
    padding: 6px 34px 6px 10px;  /* room for custom arrow */
    font-size: 13px;
    height: 36px;
    border: 1px solid #d6d6d6;
    border-radius: 6px;
    background-color: #ffffff;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 6px;
    cursor: pointer;
}
.edit-deck-form .edit-input:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(211,47,47,0.12);
}
.edit-deck-form select:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(211,47,47,0.12);
}

.edit-deck-actions {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    margin-top: 12px;
}

/* Buttons – minimal */


.deck-header-content h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.deck-header-content p {
    margin: 0;
    font-size: 1.1rem;
    color: #555;
}

.deck-header-actions{
    display: flex;
    flex-direction: column;
    gap:10px;
}

.deck-header-actions .deck-edit-button {
    background-color: white;
    border: 1px solid var(--primary-accent);
    color: var(--primary-accent);
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.deck-header-actions .deck-edit-button:hover {
    background-color: var(--primary-accent);
    color: white;
}

.deck-card-top {
    margin-bottom: 1rem;
}

.deck-card-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.deck-card-top-inner h3 {
    font-size: 1.4rem;
    color: var(--text-dark);
    margin: 0;
}

.deck-card-top-inner .deck-show-all {
    background-color: #fff8f8;
    color: var(--primary-accent);
    border: 1px solid #f2cccc;
    padding: 6px 14px;
    font-size: 0.95rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.deck-add-play-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    margin: 2rem auto;
    max-width: 1000px;
}


.deck-play-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.deck-create-card-buttons{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.deck-create-card-buttons button {
    background-color: white;
    color: var(--primary-accent);
    border: 1px solid var(--primary-accent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.deck-create-card-buttons button:hover {
    background-color: var(--primary-accent);
    color: white;
}

.deck-play-button {
    background-color: var(--primary-accent);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.deck-play-button:hover {
    background-color: var(--highlight);
    color: black;
}

.dictionary-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
}

.deck-card-tools {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 100%;
    max-width: 1000px;
}
.deck-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}
/* ================= language index (above decks) ================= */
.language-index {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    padding: 12px 16px;
    margin: 20px auto 10px;
    max-width: 1000px;
}

.language-index-title {
    font-weight: 600;
    font-size: 1rem;
    color: #37474f;
    margin-bottom: 8px;
}

.language-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.language-chip {
    background-color: #fff8f8;
    color: var(--primary-accent);
    border: 1px solid #f2cccc;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.95rem;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.1s ease-in-out;
    text-decoration: none;
    display: inline-block;
}

.language-chip:hover {
    background-color: var(--primary-accent);
    color: #ffffff;
    border-color: var(--primary-accent);
    transform: translateY(-1px);
}

.language-chip.is-active {
    background-color: var(--primary-accent);
    color: #ffffff;
    border-color: var(--primary-accent);
}


/* ================= pretty multi-select ================= */
.nice-multiselect {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    min-height: 180px;
    padding: 8px;
    border: 1px solid #d0caca;
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    font-size: 14px;
    line-height: 1.4;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.nice-multiselect:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.15);
}

.nice-multiselect option {
    padding: 8px 10px;
}

/* Hover feedback for options (supported in most modern browsers) */
.nice-multiselect option:hover {
    background-color: #fff1f1;
}

/* Make selected options look like chips */
.nice-multiselect option:checked {
    background: var(--primary-accent) linear-gradient(0deg, var(--primary-accent), var(--primary-accent));
    color: #ffffff;
}

/* helper text under the control */
.select-note {
    display: block;
    margin-top: 6px;
    color: #666;
    font-size: 12px;
}

.copy-deck-button {
    background-color: var(--primary-accent);
    color: white;
    border: none;
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.copy-deck-button:hover {
    background-color: var(--highlight);
    color: black;
}

.fan-counter {
    margin-top: 10px;
    font-size: 0.9rem;
    color: #555;
    text-align: center;
}
.explore-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    padding-bottom: 20px;
}

.pagination-link {
    padding: 6px 12px;
    border: 1px solid #ccc;
    background-color: white;
    color: #333;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.2s, color 0.2s;
}

.pagination-link:hover {
    background-color: #f0f0f0;
}

.pagination-link.active {
    background-color: var(--primary-accent);
    color: white;
    border-color: var(--primary-accent);
    font-weight: bold;
}

.pagination-ellipsis {
    padding: 6px 12px;
    color: #999;
}

.truncate-text {
    display: inline-block;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
}


:root {
    --bg-light: #fdf3f3;
    --gray-ui: #f7eaea;
    --primary-accent: #d32f2f;
    --text-dark: #212121;
    --highlight: #ffc107;
    --accent-alt: #283593; /* Indigo 800 */
}

body {
    margin: 0;
    font-family: 'Segoe UI', sans-serif;
    background-color: var(--bg-light);
    color: var(--text-dark);
}

header {
    background-color: var(--primary-accent);
    color: var(--text-dark);
    padding: 1rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

header h1 {
    margin: 0;
    margin-left: 80px;
}

nav ul.masthead-links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 2.5rem;
    margin-left: auto;
    margin-right: 50px;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 1.1rem;
}

nav ul.masthead-links li a {
    text-decoration: none;
    color: white;
    font-weight: bold;
    transition: color 0.2s ease-in-out;
    font-size: 1.2rem;
}

nav ul.masthead-links li a:hover {
    color: var(--highlight);
}

.content {
    padding: 2rem;
}

.alert {
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 5px;
}

.alert-success {
    background-color: #c8e6c9;
    color: #256029;
}

.alert-warning {
    background-color: #fff9c4;
    color: #795548;
}
.register-container {
max-width: 400px;
margin: 80px auto;
padding: 40px;
background: var(--gray-ui);
border-radius: 10px;
border: 1px solid #e0d4d4;
box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
font-family: 'Segoe UI', sans-serif;
}

.register-container fieldset {
border: none;
padding: 0;
margin: 0;
}

.register-container legend {
font-size: 24px;
margin-bottom: 20px;
text-align: center;
}

.register-container div {
margin-bottom: 20px;
}

.register-container label {
display: block;
margin-bottom: 5px;
font-weight: 500;
}

.register-container input {
width: 100%;
padding: 10px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 6px;
}

.register-container input[type="submit"] {
background-color: var(--primary-accent);
color: white;
border: none;
font-size: 16px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.register-container input[type="submit"]:hover {
background-color: var(--highlight);
color: black;
}

.register-footer {
text-align: center;
margin-top: 30px;
font-size: 14px;
color: #333;
}

.register-footer a {
color: var(--primary-accent);
text-decoration: none;
font-weight: 500;
}

.register-footer a:hover {
text-decoration: underline;
}
.alert-danger {
    background-color: #ffcdd2;
    color: #b71c1c;
}

.form-div{
    display: flex;
    flex-direction: column;
}

.login-footer {
  text-align: center;
  margin-top: 30px;
  font-size: 20px;
  color: #333;
}

.login-footer a {
  color: var(--primary-accent);
  text-decoration: none;
  font-weight: 500;
}

.login-footer a:hover {
  text-decoration: underline;
}
.login-container {
    max-width: 400px;
    margin: 80px auto;
    padding: 40px;
    background: var(--gray-ui);
    border-radius: 10px;
    border: 1px solid #e0d4d4;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    font-family: 'Segoe UI', sans-serif;
}

.login-container fieldset {
    border: none;
    padding: 0;
    margin: 0;
}

.login-container legend {
    font-size: 24px;
    margin-bottom: 20px;
    text-align: center;
}

.login-container div {
    margin-bottom: 20px;
}

.login-container label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
}

.login-container input {
    width: 100%;
    padding: 10px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

.login-container input[type="submit"] {
    background-color: var(--primary-accent);
    color: white;
    border: none;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.login-container input[type="submit"]:hover {
    background-color: var(--highlight);
    color: black;
}

.login-container small {
    display: block;
    text-align: center;
    margin-top: 15px;
}
.card {
  background: white;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  padding: 40px;
  max-width: 700px;
  min-height: 400px;
  margin: 50px auto;
  text-align: center;
  transition: box-shadow 0.3s ease;
}

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

.play-button {
  background-color: #283593; /* soft indigo */
  color: white;
  border: 2px solid #283593;
  padding: 12px 24px;
  margin: 10px 8px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.play-button:hover {
  background-color: #303f9f;
  color: white;
  border-color: #303f9f;
}

.play-button:active {
  transform: scale(0.96);
}

.difficulty {
  text-align: center;
  margin-top: 20px;
}
.next-button {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px;
}
.back{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap:10px;
}

.answer{
    font-size: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 30px;
    height: 100%;  
}

.prof-page-container{
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    height: 75lvh;
}

.left-screen-sc{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 70%;
}

.profile-ssc{
    display: flex;
    background-color: white;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    padding: 10px;
}

.profile-pic {
    width: 100px;
    height: 100px;
    display: block;
    border-radius: 50%;
}

.profile-info-ssc{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.deck-display-ssc{
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    background-color: white;
    padding: 20px;
}

.deck-holder{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.add-deck-sssc{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.sidebar-sc{
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: lightgray;
    width: 20%;
}
.sidebar-sc h2{
    border-top:#333;

}

.card-pagination {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-top: 1px solid #e0e0e0;
    margin-top: 20px;
}

.card-pagination a {
    padding: 8px 16px;
    background-color: #007BFF;
    color: white;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    transition: background-color 0.2s ease;
}

.card-pagination a:hover {
    background-color: #0056b3;
}

.play-back{
    display: flex;
    flex-direction: column;
    gap: 30px;

    padding-left: 30px;
    padding-right: 30px;
}

.play-word {
  position: relative;
  cursor: pointer;
  text-decoration: underline dotted;
}

.play-message {
  display: none;
  text-align: center;
  position: absolute;
  font-size: 20px;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
  background-color: white;
  color: black;
  padding: 8px 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 200px;
  white-space: normal;
  word-wrap: normal;
  z-index: 1000;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  pointer-events: auto;
}

.play-word:hover .play-message,
.play-message:hover {
  display: block;
}

.play-truncate-select{
    width: 150px; /* or any desired width */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle;
}


.deck-info-div{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
    padding: 15px;
    border: 1px  solid black;
}

.change-deck-div{
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 25px;

}

.deck-info-sc{
    display: flex;
    flex-direction: column;
}

.deck-bottom-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    flex-wrap: wrap;
}

.deck-bottom-actions .deck-show-all {
    background-color: #fff8f8;
    color: var(--primary-accent);
    border: 1px solid #f2cccc;
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.deck-bottom-actions .deck-show-all:hover {
    background-color: #fbeee7;
    color: #b71c1c;
    border-color: #e7bcbc;
}

.deck-bottom-actions .deck-play-button {
    background-color: var(--primary-accent);
    color: white;
    border: none;
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.deck-bottom-actions .deck-play-button:hover {
    background-color: var(--highlight);
    color: black;
}

.deck-bottom-actions .deck-delete-button {
    background-color: #faeaea;
    color: #b71c1c;
    border: 1px solid #f5cccc;
    padding: 8px 16px;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

.deck-bottom-actions .deck-delete-button:hover {
    background-color: #f8bbbb;
    color: #a02a2a;
    border-color: #e4a6a6;
}

/* ================= decks.html ================= */


/* ================= decks.html ================= */
.decks-container {
    background-color: #f9fbfc;
    padding: 2.5rem;
    max-width: 1000px;
    margin: 30px auto;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
}

.deck-card {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    color: var(--text-dark);
    padding: 1rem 1.5rem;
    border-radius: 6px;
    font-size: 1rem;
    min-width: 180px;
    text-align: center;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.deck-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.deck-card-link {
    color: #3f51b5;
    text-decoration: none;
    font-weight: 500;
}

.deck-card-link:hover {
    text-decoration: none;
}

.deck-form-wrapper {
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    padding: 2rem;
    border-radius: 6px;
    margin-top: 2.5rem;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    display: none;
}
/* ================= deck.html ================= */


.deck-info-div {
    padding: 2rem;
    background-color: #f9fbfc;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-bottom: 2rem;
    max-width: 1000px;
    margin-inline: auto;
}

.deck-info-sc h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: #37474f;
}

.deck-info-sc h3 {
    font-size: 1.1rem;
    color: #607d8b;
    margin: 0.25rem 0;
}

.change-deck-div {
    margin-top: 1rem;
    padding: 1rem;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}

.change-deck-div form p {
    margin: 0.5rem 0;
}

.change-deck-div button,
.change-deck-div input[type="submit"] {
    background-color: #3f51b5;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.change-deck-div button:hover,
.change-deck-div input[type="submit"]:hover {
    background-color: #303f9f;
}

.deck-add-card {
    padding: 2rem;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 6px;
    max-width: 1000px;
    margin: 2rem auto;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.deck-add-card label {
    font-size: 16px;
}

.deck-card-input {
    width: 100%;
    max-width: 400px;
    padding: 0.5rem;
    font-size: 1rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#results li {
    list-style: none;
    margin: 0.3rem 0;
    cursor: pointer;
    color: #3f51b5;
}

#results li:hover {
    text-decoration: underline;
}

/* Deck card container: ensure tooltips are positioned inside */
.deck-card-div {
    min-width: 180px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
    position: relative; /* ensure tooltips position inside */
}
.card-type-unfamiliar {
    --tier-color: #9e9e9e;
    border-top: 6px solid var(--tier-color); /* grey */
}
.card-type-acquainted {
    --tier-color: #ff9800;
    border-top: 6px solid var(--tier-color); /* orange */
}
.card-type-confident {
    --tier-color: #4caf50;
    border-top: 6px solid var(--tier-color); /* green */
}
.card-type-proficient {
    --tier-color: #9c27b0;
    border-top: 6px solid var(--tier-color); /* purple */
}
.card-type-mastered {
    --tier-color: #000000;
    border-top: 6px solid var(--tier-color); /* black */
}

.unfamiliar-color{
    background-color: #9e9e9e;
}
.acquainted-color{
    background-color: #ff9800;
}
.confident-color{
    background-color: #4caf50;
}
.proficient-color{
    background-color: #9c27b0;
}
.mastered-color{
    background-color: #000000;
}
.unfamiliar-color,
.acquainted-color,
.confident-color,
.proficient-color,
.mastered-color {
  display: inline-block;
  width: 10px;       /* size of the dot */
  height: 10px;
  border-radius: 50%; /* makes it circular */
  margin-right: 6px; /* spacing before the label text */
}

.deck-final-show{
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 180px;
    padding: 15px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
    
    background-color: #fff8f8;
    color: var(--primary-accent);
    border: 1px solid #f2cccc;
    font-size: 1rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

.deck-card-div:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}


.card-text-translation {
    font-size: 0.9rem;
    color: #616161;
    margin-top: 0.5rem;
}

.deck-create-button {
    padding: 2px 6px;
    font-size: 14px;
}

.deck-create-button p {
    margin: 0;
}

/* ================= card.html ================= */



/* ================= finished.html ================= */

.finished-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 20px;
    text-align: center;
}

.finished-title {
    font-size: 32px;
    margin-bottom: 30px;
}

.finished-card-display {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px;
    margin-bottom: 40px;
}

.finished-card-div {
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    padding: 30px;
    width: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.finished-word {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.finished-translation {
    font-size: 20px;
    color: #666;
}

.finished-play-again-wrapper {
    margin-top: 20px;
}

.finished-play-again-button {
    display: inline-block;
    background-color: #f0f0f0;   
    color: #333;                 
    padding: 12px 24px;
    border-radius: 6px;
    border: 1px solid #ccc;
    text-decoration: none;
    font-size: 16px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.finished-play-again-button:hover {
    background-color: #e2e2e2;
    color: black;
}

#wild-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(173, 216, 230, 0.95); /* light blue */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.wild-card-div {
    background-color: white;
    padding: 40px;
    border-radius: 10px;
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.5);
    text-align: center;
    width: 300px;
}

.wild-word {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 10px;
}

.wild-translation {
    font-size: 22px;
    margin-bottom: 20px;
}

#next-wild {
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer;
}

.wild-note {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}
/* ================= explore.html ================= */

.ex-card-display {
    display: flex;
    flex-direction: row;
    gap: 12px;
    padding: 10px 0;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.ex-card-div {
    min-width: 180px;
    background-color: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
    cursor: pointer;
    transition: transform 0.2s;
    
}

.customize-card-display {
    width: 80%;
    max-width: 700px;
    margin: 40px auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: sans-serif;
    min-height: 600px; /* Add this line for vertical length */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.customize-card-display .card-half {
    padding: 20px;
    text-align: center;
}

.customize-card-display .card-divider {
    border-top: 1px solid #ddd;
    margin: 0;
}

.text-box {
    background-color: #f5f5f5;
    padding: 20px;
    border-radius: 6px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 20px;
}

.text-box-applied {
    padding: 20px;
    border-radius: 6px;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    cursor: pointer;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    margin-top: 20px;
    background-color: white;
    box-shadow: 0 0 0 2px #ccc;
}

/* ================= explore.html ================= */


.explore-card-display{
    display: flex;
    flex-direction: row;
    gap: 15px;

    overflow-x: auto;
    max-width: 100%;
    white-space: nowrap;

    padding-bottom: 15px;
    margin-top: 10px;
    margin-bottom: 10px;
}

.explore-card-div{
    display: flex;
    flex-direction: column;
    align-items: center;

    border: 1px solid #ccc;
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); 
}

.explore-div{
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.explore-profile-pic{
    width: 60px;
    height: 60px;
    display: block;
    border-radius: 50%;
}

.explore-deck-info{
    display:flex;
    flex-direction: row;
    gap: 20px;

}

.explore-deck-display{
    display: flex;
    flex-direction: row;
    gap: 50px;
}

.explore-user-info{
    display: flex;
    flex-direction: column;

    padding-top: 10px;
}

.explore-pagination{
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.explore-fan-copy-holder{
    display: flex;
    flex-direction: column;
    align-items: space-evenly;
    justify-content: center;

    margin-left: auto;
}



.card-settings{
    display: flex;
    flex-direction: column;
    height: 50lvh;
}

.input-large {
    width: 100%;
    height: 1.5em; /* adjust height */
    font-size: 1.2em; /* adjust font */
}

.modal-card-item{
    padding: 10px;
    border-bottom: 1px solid #ccc;
}


.modal{
    display:none; position:fixed; top:0; left:0; width:100%; height:100%; background-color:rgba(0,0,0,0.5); justify-content:center; align-items:center;
}

.modal-div{
    background:white; padding:20px; border-radius:8px; text-align:center;
}

.deck-header-box {
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    padding: 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 2rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.deck-header-content h2 {
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
    color: var(--text-dark);
}

.deck-header-content p {
    margin: 0;
    font-size: 1.1rem;
    color: #555;
}

.deck-header-actions .deck-edit-button {
    background-color: white;
    border: 1px solid var(--primary-accent);
    color: var(--primary-accent);
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.9rem;
    transition: background-color 0.2s;
}

.deck-header-actions .deck-edit-button:hover {
    background-color: var(--primary-accent);
    color: white;
}

.deck-card-top {
    margin-bottom: 1rem;
}

.deck-card-top-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 900px;
    margin: 0 auto;
}

.deck-card-top-inner h3 {
    font-size: 1.4rem;
    color: var(--text-dark);
    margin: 0;
}

.deck-card-top-inner .deck-show-all {
    background-color: #fff8f8;
    color: var(--primary-accent);
    border: 1px solid #f2cccc;
    padding: 6px 14px;
    font-size: 0.95rem;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.deck-add-play-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
    margin: 2rem auto;
    max-width: 1000px;
}

.deck-play-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.deck-create-card-buttons{
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.deck-create-card-buttons button {
    background-color: white;
    color: var(--primary-accent);
    border: 1px solid var(--primary-accent);
    border-radius: 6px;
    padding: 6px 12px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.deck-create-card-buttons button:hover {
    background-color: var(--primary-accent);
    color: white;
}

.deck-play-button {
    background-color: var(--primary-accent);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1.2rem;
    border-radius: 6px;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s;
}

.deck-play-button:hover {
    background-color: var(--highlight);
    color: black;
}

.dictionary-title {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 1rem;
    color: #333;
}

.deck-card-tools {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    width: 100%;
    max-width: 1000px;
}
.deck-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    margin-top: 30px;
}

/* ================ Multi-checkbox chips ================ */
.checkbox-chip-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.checkbox-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    user-select: none;
    cursor: pointer;
    border: 1px solid #f2cccc;
    border-radius: 999px;
    background-color: #fff8f8;
    padding: 6px 10px;
    line-height: 1;
    transition: background-color 0.2s, border-color 0.2s, transform 0.1s ease-in-out, box-shadow 0.2s;
}

.checkbox-chip:hover {
    background-color: #ffeaea;
    transform: translateY(-1px);
}

/* Hide the native checkbox but keep it accessible */
.checkbox-chip input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
}

/* The visible label text inside the chip */
.checkbox-chip span {
    font-size: 0.95rem;
    color: var(--primary-accent);
}

/* Checked state */
.checkbox-chip input[type="checkbox"]:checked + span {
    background-color: var(--primary-accent);
    color: #ffffff;
    border-radius: 999px;
    padding: 6px 10px;
}

/* Focus ring for keyboard users */
.checkbox-chip input[type="checkbox"]:focus + span {
    outline: none;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.2);
    border-radius: 999px;
}

/* Disabled state (if any choices are disabled) */
.checkbox-chip input[type="checkbox"]:disabled + span {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ===== Readings horizontal scroller ===== */
.readings-wrap {
    position: relative;
    max-width: 1000px;
    margin: 12px auto 24px;
    padding: 6px 36px; /* room for buttons */
}

.reading-scroller {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 10px 4px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
/* hide scrollbar where possible */
.reading-scroller::-webkit-scrollbar { height: 8px; }
.reading-scroller::-webkit-scrollbar-track { background: #f3f3f3; border-radius: 8px; }
.reading-scroller::-webkit-scrollbar-thumb { background: #d0d0d0; border-radius: 8px; }

.reading-card {
    flex: 0 0 340px;         /* card width */
    scroll-snap-align: start;
    background-color: #ffffff;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    padding: 18px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.reading-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0,0,0,0.10);
}

.reading-title {
  margin: 0 0 10px 0;
  font-size: 1.2rem;       /* bigger title */
  font-weight: 700;
  color: var(--text-dark);
}

.reading-snippet {
  margin: 0;
  font-size: 1.05rem;      /* bigger snippet text */
  line-height: 1.45;
  color: #555;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;   /* show more lines */
  overflow: hidden;
}


/* Simple sideways scroller for readings (larger, centered, framed) */
/* Readings Section Wrapper, Header, Subtitle, and Scroller */
.reading-section {
  max-width: 1200px;
  margin: 24px auto;
}

.reading-header {
  font-size: 2rem;
  margin: 0 0 12px 0;
  color: var(--text-dark);
  text-align: left;
}

.reading-subtitle {
  font-size: 1.1rem;
  color: #666;
  margin-bottom: 16px;
}

.reading-simple-scroller {
  overflow-x: auto;
  overflow-y: hidden;
  padding: 24px;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  max-width: 1200px;
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reading-cards-row {
  display: flex;
  flex-direction: row;
  gap: 24px;
}

.reading-card {
  flex: 0 0 340px;         /* wider card */
  padding: 18px;           /* bigger spacing */
}

.reading-card:hover{
    cursor:pointer;
}

.opt-in-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.opt-in-inline input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin: 0;
}

.opt-in-inline label {
  display: inline;
  margin: 0;
  font-weight: 500;
}

.reading-simple-scroller::-webkit-scrollbar { height: 8px; }
.reading-simple-scroller::-webkit-scrollbar-thumb { background: #bbb; border-radius: 6px; }
.reading-card .truncate-text {
  max-width: none;            /* don’t cap width */
  white-space: normal;        /* allow wrapping */
  overflow: hidden;           /* still prevent overflow */
  text-overflow: ellipsis;    /* keep ellipsis if needed */
  display: -webkit-box;       /* multi-line clamp */
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;      /* show up to 2 lines */
}
.reading-article {
  max-width: 1000px;
  margin: 10px auto 48px;
  padding: 28px 28px 20px;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}

.reading-hero { margin-bottom: 8px; }
.reading-hero__title {
  font-size: 2.1rem;
  line-height: 1.25;
  margin: 0;
  color: var(--text-dark);
}

.reading-body {
  font-size: 1.12rem;
  line-height: 1.75;
  color: #333;
  margin-top: 10px;
  word-break: break-word;
  hyphens: auto;
}

/* Comfortable spacing for common elements inside the reading body */
.reading-body p { margin: 0 0 1rem 0; }
.reading-body h2 { font-size: 1.5rem; margin: 1.6rem 0 0.75rem; }
.reading-body h3 { font-size: 1.25rem; margin: 1.2rem 0 0.5rem; }
.reading-body ul, .reading-body ol { padding-left: 1.25rem; margin: 0.75rem 0 1rem; }
.reading-body blockquote {
  margin: 1.25rem 0;
  padding: 0.75rem 1rem;
  background: #fff8f8;
  border-left: 4px solid var(--primary-accent);
  border-radius: 6px;
  color: #444;
}
.reading-body img, .reading-body video, .reading-body iframe {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}
.reading-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  background: #f6f6f6;
  padding: 2px 6px;
  border-radius: 4px;
}
.reading-body pre code {
  display: block;
  padding: 12px;
  overflow-x: auto;
}

.reading-actions {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.btn-highlight {
    background-color: var(--highlight);
    color: black;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
.btn-highlight:hover {
    background-color: #ffb300; /* slightly darker shade of highlight */
}
/* .btn-finished {
    background-color: #4caf50;
    color: white;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 0.95rem;
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.05s ease;
}
.btn-finished:hover {
    background-color: #388e3c;
}
*/

.reading-top-actions {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}
.reading-top-actions{
    margin-right: 200px;
    margin-bottom: 20px;
}
/* ===== Report panel (play.html) ===== */
.report-panel {
  background-color: #ffffff;
  border: 1px solid #e5d2d2;
  border-radius: 8px;
  padding: 10px 12px;
  margin: 16px auto;
  max-width: 600px;       /* keeps it narrower */
  font-size: 0.9rem;      /* smaller overall */
}

.report-title {
  margin: 0 0 4px 0;
  font-size: 1rem;
}

.report-subtitle {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 0.85rem;
}

.report-other input[type="text"] {
  font-size: 0.85rem;
  padding: 6px 8px;
}

.report-actions {
  margin-top: 10px;
}

.speaker-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.report-thanks {
  font-size: 0.85rem;
  padding: 6px 8px;
  margin-left: 400px;
}

.report-toggle {
  margin-left: auto;
  margin-right: 300px;
  display: block;
  font-size: 0.9rem;
  padding: 6px 12px;
}

.spinner-center {
    display: none;
    width: 50px;
    margin: 0 auto;
}

/* ===== Profile page polish ===== */
.prof-page-container{
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 20px;
    align-items: start;
    max-width: 1100px;
    margin: 24px auto;
    padding: 0 16px;
}

.left-screen-sc{ width: 100%; gap: 16px; }

.profile-ssc{
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 24px 28px;
    display: flex;
    gap: 18px;
    justify-content: flex-start;
    align-items: center;
}

.profile-pic{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    border: 3px solid #fff;
}

.profile-info-ssc h2{ margin: 0 0 6px 0; font-size: 1.6rem; }
.profile-info-ssc h4{ margin: 0; font-weight: 500; color: #616161; }

.deck-display-ssc{
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 28px;
}

/* Sidebar card */
.sidebar-sc{
    position: sticky;
    top: 24px;
    align-self: start;
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 24px 26px;
}
.sidebar-header h2{ margin: 4px 0 10px 0; font-size: 1.25rem; }

.sidebar-links{ list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sidebar-links li{ margin: 0; }
.sidebar-links a{
    display: block;
    padding: 14px 18px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text-dark);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.05s ease;
}
.sidebar-links a:hover{ background-color: #fff2f2; color: #b71c1c; transform: translateY(-1px); }

/* Responsive: stack on small screens */
@media (max-width: 900px){
  .prof-page-container{ grid-template-columns: 1fr; }
  .sidebar-sc{ position: static; order: -1; }
  .profile-ssc{ flex-wrap: wrap; text-align: center; justify-content: center; }
}
/* ===== Account page styles ===== */
.account-edit-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    padding: 28px 32px;
    max-width: 600px;
    margin: 0 auto;
}

.account-edit-card fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.account-edit-card legend {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
    color: var(--text-dark);
}

.account-edit-card .form-div {
    margin-bottom: 20px;
}

.account-edit-card label {
    display: block;
    margin-bottom: 6px;
    font-weight: 500;
    color: #333;
}

.account-edit-card input[type="text"],
.account-edit-card input[type="email"],
.account-edit-card input[type="file"] {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
}

.account-edit-card .form-error {
    display: block;
    font-size: 0.8rem;
    color: #b71c1c;
    margin-top: 4px;
}

.account-edit-card .form-actions {
    text-align: center;
    margin-top: 24px;
}
.deck-display-ssc form {
    max-width: 640px;
    margin: 0 auto;
}

.deck-display-ssc fieldset {
    border: none;
    margin: 0;
    padding: 0;
}

.deck-display-ssc legend {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text-dark);
}

.deck-display-ssc .form-div {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}

.deck-display-ssc label {
    font-weight: 500;
    color: #333;
}

.deck-display-ssc input[type="text"],
.deck-display-ssc input[type="email"],
.deck-display-ssc input[type="file"],
.deck-display-ssc select,
.deck-display-ssc textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    background: #fff;
}

.deck-display-ssc input[type="text"]:focus,
.deck-display-ssc input[type="email"]:focus,
.deck-display-ssc input[type="file"]:focus,
.deck-display-ssc select:focus,
.deck-display-ssc textarea:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(211,47,47,0.12);
}

/* generic error message style (reused) */
/* generic error message style (reused) */
.form-error {
    display: block;
    font-size: 0.85rem;
    color: #b71c1c;
    margin-top: 4px;
}

/* ===== Inline form errors ===== */
.input-invalid {
  border-color: #e57373 !important;
  box-shadow: 0 0 0 3px rgba(244, 67, 54, 0.12);
}
.error-list {
  margin: 6px 0 0 0;
  padding-left: 18px;
}
.error-list .form-error {
  color: #b71c1c;
  font-size: 0.85rem;
  margin: 2px 0;
}

.deck-display-ssc .form-actions {
    text-align: center;
    margin-top: 24px;
}

/* ===== Decks: create form polish ===== */
.deck-form {
    max-width: none;   /* remove centering width cap */
    width: 100%;
    margin: 0;         /* was 0 auto */
    display: block;
    font-size: 0.9rem;
}
.deck-form legend {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: var(--text-dark);
}


.deck-form .help-text{
    margin: 0 0 16px 0;
    font-size: 0.8rem;
    color: #616161;
}
.deck-form .form-group{
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.deck-form label{ font-weight: 600; color: #333; }
.deck-form input[type="text"],
.deck-form select{
    width: 100%;
    padding: 6px 8px;
    font-size: 0.85rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    box-sizing: border-box;
}
.deck-form input[type="text"]:focus,
.deck-form select:focus{
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(211,47,47,0.12);
}
.deck-form .form-actions{ text-align: center; margin-top: 6px; }

/* Cleaner language selector for deck form */
.deck-form select {
    appearance: none;
    background: #fff url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='gray' d='M7 10l5 5 5-5z'/></svg>") no-repeat right 8px center;
    background-size: 12px;
    padding-right: 28px;
}

.decks-container:has(.deck-form-wrapper) {
    padding: 1.5rem; /* was 2.5rem */
}

.deck-form legend,
.deck-form .help-text { text-align: left; }


.deck-form-center {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}
.login-container select {
    width: 100%;
    padding: 10px 12px;            /* same as deck-display-ssc */
    font-size: 0.95rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-sizing: border-box;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'><path fill='gray' d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px;
    padding-right: 28px;           /* room for arrow */
    cursor: pointer;
}

.login-container select:focus {
    outline: none;
    border-color: var(--primary-accent);
    box-shadow: 0 0 0 3px rgba(211,47,47,0.12); /* same focus ring */
}
/* ===== About / Contexto page ===== */
.about-wrap {
  max-width: 1000px;
  margin: 28px auto 48px;
  padding: 0 16px;
}

.about-hero {
  background: linear-gradient(180deg, #fff8f8, #ffffff);
  border: 1px solid #f2cccc;
  border-radius: 14px;
  padding: 28px 22px;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.about-hero h1 {
  margin: 0 0 6px 0;
  font-size: 2.2rem;
  color: var(--primary-accent);
}
.about-subtitle {
  margin: 0;
  font-size: 1.15rem;
  color: #555;
}

.about-card {
  background-color: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  padding: 22px 24px;
  margin-top: 18px;
  line-height: 1.7;
  color: var(--text-dark);
}
.about-card p { margin: 0 0 1rem 0; }

.about-highlights {
  margin: 8px 0 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px 14px;
}
.about-highlights li {
  position: relative;
  background: #fff8f8;
  border: 1px solid #f2cccc;
  border-radius: 999px;
  padding: 10px 14px 10px 36px;
  font-size: 0.98rem;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
}
.about-highlights li::before {
  content: "✓";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-weight: 700;
  color: var(--primary-accent);
}
.about-highlights li:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

@media (max-width: 700px) {
  .about-hero h1 { font-size: 1.9rem; }
  .about-card { padding: 18px; }
}
/* Only grey actual deck cards */
.deck-card-div.activated-False {
  filter: grayscale(100%);
  opacity: 0.5;
}

.deck-card-div.activated-False:hover {
  transform: none;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.deck-card-div.activated-True {
  filter: none;
  opacity: 1;
  pointer-events: auto;
}

/* ====== Languages & Interests Profile Form ====== */
.form-section {
    margin-bottom: 24px;
}
.form-section h3 {
    font-size: 1.2rem;
    margin-bottom: 12px;
    color: var(--text-dark);
}
.chip {
    display: inline-block;
    background-color: #fff8f8;
    color: var(--primary-accent);
    border: 1px solid #f2cccc;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: 0.95rem;
    margin: 4px;
}
.deck-card-div .card-hover-info-True {
    position: absolute;
    top: -6px;                  /* flush with top */
    left: 0;                 /* anchor to left edge */
    right: 0;                /* anchor to right edge */
    width: 100%;             /* take full card width */
    background: var(--tier-color, #fff8f8);
    color: #fff;
    border-radius: 6px 6px 0 0;
    padding: 6px 10px;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.2s ease;
    white-space: normal;
    word-wrap: break-word;
    z-index: 10;
    text-align: center;
}

.deck-card-div:hover .card-hover-info-True {
    visibility: visible;
    opacity: 1;
}
.card-hover-info-True .tier-label {
  font-weight: bold;
  text-transform: uppercase;
  margin-right: 4px;
}

.card-hover-info-True small {
  display: block;
  font-size: 0.8rem;
  margin-top: 2px;
  opacity: 0.9;
}
.card-hover-info-False{
    display: none;
}
/* === Reading Body Readability === */
.reading-body {
    font-size: 25px;
    line-height: 1.8;
}

.reading-line-bar {
  position: relative;
  display: block;
  height: 8px;                 /* very thin */
  background-color: transparent;
  margin-top: 4px;             /* small gap below text line */
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.reading-line-bar:hover {
  background-color: rgba(255, 0, 0, 0.08); /* faint red */
}

.sentence-tooltip-bar {
  display: block;
  height: 22px;                /* increased thickness */
  margin-top: 5px;             /* small gap below text */
  width: 100%;
  border-radius: 6px;
  background-color: transparent;
  transition: background-color 0.2s ease;
  cursor: pointer;
}

.sentence-tooltip-bar.hovered {
  background-color: rgba(255, 0, 0, 0.18); /* subtle but visible red */
}


/* === Translation Mode Button (Dark Green Style) === */
.btn-translation-mode {
  background-color: #1b5e20; /* dark green */
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.1s ease;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}

.btn-translation-mode:hover {
  background-color: #2e7d32;
  transform: translateY(-5px);
}

.btn-translation-mode:active {
  background-color: #388e3c;
  transform: translateY(0);
}

.reading-top-actions {
  display: flex;
  gap: 12px; /* adds space between the two buttons */
  align-items: center;
}
/* Loudspeaker icon for sentence TTS */
.sentence-audio-icon {
  margin-left: 8px;
  color: #2e7d32;
  cursor: pointer;
  font-size: 1.1rem;
  transition: color 0.2s ease;
}
.sentence-audio-icon:hover {
  color: #43a047;
}

/* Hide by default */
.speed-tooltip {
  display: none;
  position: absolute;
  top: 55px;
  right: 0;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  z-index: 9999;
  flex-direction: column;
  min-width: 60px;
}

.feedback-box {
    background-color: #f8f9fa;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 12px 16px;
    margin: 8px auto;
    width: 80%;
    max-width: 600px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: all 0.3s ease;
}

.feedback-box p {
    margin: 0;
    font-size: 16px;
    color: #333;
}

.feedback-box.success {
    border-left: 5px solid #22c55e;
    background-color: #f0fdf4;
}

.feedback-box.warning {
    border-left: 5px solid #eab308;
    background-color: #fefce8;
}

.feedback-box.error {
    border-left: 5px solid #ef4444;
    background-color: #fef2f2;
}

.feedback-box p,
.feedback-box div {
  line-height: 1.4;
}

.feedback-box .overall-score {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 6px;
}

/* Show tooltip when hovering the speaking rate note */
#speaking-rate-note:hover + .speed-tooltip,
.speed-tooltip:hover {
  display: flex;
}

.speed-option {
  background: none;
  border: none;
  font-size: 0.8rem;
  padding: 4px 8px;
  cursor: pointer;
  color: #333;
  text-align: center;
  transition: background 0.2s ease;
}

.speed-option:hover {
  background: #f2f2f2;
  color: #d32f2f;
}

/* === Translate Full Sentence Button === */
#sentence-translation {
  display: inline-block;
  background-color: #fff4f4;
  color: #d32f2f;
  border: 1px solid #f0bcbc;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
  text-align: center;
}

#sentence-translation:hover {
  background-color: #d32f2f;
  color: #fff;
  transform: translateY(-1px);
}

#sentence-translation:active {
  transform: translateY(0);
  background-color: #b71c1c;
}

/* === Recorder Container === */
#recorder-container {
  display: flex;
  gap: 12px;
  justify-content: center;
  align-items: center;
  background-color: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  padding: 12px 16px;
  margin-top: 16px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

#recorder-container p {
  margin: 0;
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: #666;                 /* subtle gray, matches your helper text tone */
  font-weight: 400;
  text-align: center;
  opacity: 0.85;               /* makes it less visually heavy */
}

#recorder-container:hover {
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

/* Recorder buttons */
#record-btn,
#cancel-speak-btn,
#stop-btn, #hint-btn {
  background-color: #fff4f4;
  border: 1px solid #f0bcbc;
  color: #d32f2f;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  padding: 8px 14px;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, transform 0.1s ease;
}

#record-btn:hover:not(:disabled),
#cancel-speak-btn:hover:not(:disabled),
#stop-btn:hover:not(:disabled), 
#hint-btn:hover:not(:disabled)  {
  background-color: #d32f2f;
  color: #fff;
  transform: translateY(-1px);
}

#record-btn:active,
#cancel-speak-btn:active,
#stop-btn:active,
#hint-btn:active {
  transform: translateY(0);
  background-color: #b71c1c;
}

#record-btn:disabled,
#cancel-speak-btn:disabled,
#stop-btn:disabled,
#hint-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.user-response-bubble {
    display: inline-block;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 14px;
    font-size: 16px;
    color: #333;
    line-height: 1.4;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    max-width: 80%;
    position: relative;
    margin-right: auto;
}

.user-response-bubble::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 18px;
    border-width: 6px;
    border-style: solid;
    border-color: #f3f4f6 transparent transparent transparent;
}

#recorder-note {
  font-size: 5rem;      /* slightly larger */
  font-weight: 500;        /* mild boldness */
  color: #555;             /* still soft, but stronger contrast */
  font-style: italic;
  margin-bottom: 10px;
  opacity: 0.9;
  text-align: center;
  letter-spacing: 0.02em;
}
/* === Reading Audio Player Styling === */
.reading-article audio {
  width: 100%;
  margin: 1.5rem 0;
  outline: none;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  border: 1px solid #ddd;
}

/* Remove default blue accent (Safari/Chrome) and use your accent color */
audio::-webkit-media-controls-panel {
  background-color: #fff;
  border-radius: 8px;
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider,
audio::-webkit-media-controls-mute-button,
audio::-webkit-media-controls-current-time-display,
audio::-webkit-media-controls-time-remaining-display {
  filter: hue-rotate(330deg) saturate(1.5);
}

/* Optional hover glow for interactivity */
.reading-article audio:hover {
  box-shadow: 0 3px 12px rgba(0,0,0,0.15);
}
/* === Highlighted word during playback === */
.play-word.highlight {
  background-color: rgba(255, 235, 59, 0.6); /* soft yellow glow */
  border-radius: 4px;
  transition: background-color 0.15s ease;
}

/* Optional subtle fade-out when dehighlighted */
.play-word {
  transition: background-color 0.25s ease;
}