/* COLORS */
:root {
  --select-color: var(--bulma-primary); /* Color for selected elements */
  --info-color: var(--bulma-info); /* Color for informational elements */
  --link-color: var(--bulma-link); /* Color for links */
  --success-color: var(--bulma-success); /* Color for success elements */
  --danger-color: var(--bulma-danger); /* Color for danger elements */
  --grey-color: var(--bulma-grey); /* Color for grey elements */
  --gold-color: #FFD700; /* Color for gold elements */
  --silver-color: #C0C0C0; /* Color for silver elements */
  --bronze-color: #CD7F32; /* Color for bronze elements */
  --pers1-color: #8b06d3; /* Color for personality 1 elements */
  --pers2-color: #d30606; /* Color for personality 2 elements */
  --pers3-color: #06d306; /* Color for personality 3 elements */
  --pers4-color: #06d3d3; /* Color for personality 4 elements */
  --pers5-color: #d3d306; /* Color for personality 5 elements */
  --pers6-color: #d3068b; /* Color for personality 6 elements */

  /* Bulma colors */
  --bulma-primary-h: 180deg;
  /* --bulma-primary-h: 287deg;
  --bulma-primary-l: 64%; */

  /* Bulma fonts */
  /* --bulma-weight-normal: 400;
  --bulma-weight-medium: 450;
  --bulma-weight-semibold: 500; */
  --bulma-title-weight: 450;
  --bulma-weight-bold: 600;
  --bulma-weight-extrabold: 700;
  --bulma-block-spacing: 1rem;
}

/* Prevent body scroll when modal is open */
html.is-clipped {
  overflow: hidden !important;
}

/* Wise Supporter Card Styling */
.user-card.is-supporter {
  position: relative;
  overflow: hidden;
  border: 2px solid #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.15);
}

/* Corner Ribbon */
.supporter-ribbon {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  width: 75px;
  height: 75px;
  overflow: hidden;
}

.supporter-ribbon a {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  width: 105px;
  padding: 0.2rem 0;
  background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  color: #78350f;
  font-size: 0.5rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  top: 15px;
  right: -28px;
  transform: rotate(45deg);
  cursor: pointer;
  transition: background 0.2s ease;
}

.supporter-ribbon a:hover {
  background: linear-gradient(135deg, #fcd34d 0%, #fbbf24 100%);
}

/* Supporter card header subtle tint */
.user-card.is-supporter .card-header {
  background: linear-gradient(90deg, 
    rgba(251, 191, 36, 0.03) 0%, 
    rgba(251, 191, 36, 0.06) 50%, 
    rgba(251, 191, 36, 0.03) 100%);
}

  /* Community highlights */
  --gold-color: #FFD700;
  --silver-color: #C0C0C0;
  --bronze-color: #CD7F32;
  --wise-blue: #4F46E5;
  --wise-purple: #8B5CF6;
  --wise-green: #10B981;
  --wise-yellow: #FBBF24;
  --wise-red: #EF4444;
}

/* PRINT BORDERS OF ALL ELEMENTS IN RED FOR DEBUGGING */
/* * {
  border: 1px solid red;
} */

/* HIDE ADS FOR PREMIUM USERS */
body[data-is-premium="true"] .ad-container,
body[data-is-premium="true"] [class*="Ad-box"],
body[data-is-premium="true"] [id*="Ad-box"],
body[data-is-premium="true"] .adsbygoogle {
  display: none !important;
}

/* HIDE ELEMENTS DEPENDING ON LANG CHOSEN */
/* Hide elements with lang="es" when html lang="en" */
html[lang="en"] [lang="es"] {
  display: none;
}

/* Hide elements with lang="en" when html lang="es" */
html[lang="es"] [lang="en"] {
  display: none;
}

/* CONTAINERS SHOULD HAVE ROUNDED CORNERS */
/* .container {
  border-radius: 10px !important;
} */

/* Set containers with class .container and .transparent-bg to have a transparent background */
/* .container.transparent-bg {
  background-color: transparent !important;
} */

/* Ensure the bulma titles have a fixed weight */
.title {
  font-weight: var(--bulma-title-weight) !important;
}
.title span {
  font-weight: var(--bulma-title-weight) !important;
}

/* Ensure the card and box takes the full height of the column */
.equal-height-as-sibling {
  height: 100% !important;
}

/* ADD OUTLINE TO ALL ELEMENTS FOR DEBUGGING */
/* * {
  outline: 1px solid red;
} */

/* Footer should be at the bottom of the page */
/* But always after the body */
#dinamic-content {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--bulma-navbar-height));
}

/* Body content should be in the center of the dinamic content */
#body-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-bottom: 2vh;
}

#footer {
  padding-bottom: 4vh;
}

/* Elegant Footer */
.elegant-footer {
  background: var(--scheme-main-bis, #fafafa);
  padding: 2rem 1.5rem 1rem !important;
}

.elegant-footer .footer-main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,0.1));
}

.elegant-footer .footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.elegant-footer .footer-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.1rem;
  margin: 0;
}

.elegant-footer .footer-logo img {
  border-radius: 6px;
}

.elegant-footer .footer-tagline {
  font-size: 0.8rem;
  color: var(--text-light, #7a7a7a);
  margin: 0;
}

.elegant-footer .footer-links {
  display: flex;
  gap: 1.5rem;
}

.elegant-footer .footer-links a {
  font-size: 0.9rem;
  color: var(--text-color, #4a4a4a);
  transition: color 0.2s;
}

.elegant-footer .footer-links a:hover {
  color: var(--link-color, #485fc7);
}

.elegant-footer .footer-social {
  display: flex;
  gap: 0.75rem;
}

.elegant-footer .footer-social-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: 0.375rem;
  background: var(--scheme-main-ter, #f5f5f5);
  color: var(--text-light, #7a7a7a);
  font-size: 0.875rem;
  font-weight: 500;
  transition: background 0.2s, color 0.2s, transform 0.15s;
}

.elegant-footer .footer-social-btn:hover {
  background: var(--scheme-main-bis, #e8e8e8);
  color: var(--text, #363636);
  transform: translateY(-1px);
}

.elegant-footer .footer-social-btn-support {
  background: #ff5f5f15;
  color: #e85555;
}

.elegant-footer .footer-social-btn-support:hover {
  background: #ff5f5f25;
  color: #d64545;
}

[data-theme="dark"] .elegant-footer .footer-social-btn {
  background: var(--scheme-main-ter, #2a2a2a);
  color: var(--text-light, #a0a0a0);
}

[data-theme="dark"] .elegant-footer .footer-social-btn:hover {
  background: var(--scheme-main-bis, #3a3a3a);
  color: var(--text, #f5f5f5);
}

[data-theme="dark"] .elegant-footer .footer-social-btn-support {
  background: #ff5f5f20;
  color: #ff7070;
}

[data-theme="dark"] .elegant-footer .footer-social-btn-support:hover {
  background: #ff5f5f35;
  color: #ff8585;
}

.elegant-footer .footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1rem;
}

.elegant-footer .footer-copyright,
.elegant-footer .footer-legal {
  font-size: 0.75rem;
  color: var(--text-light, #7a7a7a);
  margin: 0;
}

.elegant-footer .footer-legal a {
  color: var(--text-light, #7a7a7a);
}

.elegant-footer .footer-legal a:hover {
  color: var(--link-color, #485fc7);
}

.elegant-footer .footer-separator {
  margin: 0 0.25rem;
}

[data-theme="dark"] .elegant-footer {
  background: var(--scheme-main-bis, #1a1a1a);
}

[data-theme="dark"] .elegant-footer .footer-main {
  border-bottom-color: rgba(255,255,255,0.1);
}

/* Minimal transparent footer for focused views */
.footer-minimal {
  background: transparent;
  padding: 1.5rem 1rem;
  margin-top: auto;
}

.footer-minimal a:hover {
  text-decoration: underline;
}

/* All containers that are not children of a .hero should have a white background */
/* .container {
  background-color: white;
} */

/* All containers that are children of a .hero should have a transparent background */
/* .hero .container {
  background-color: transparent;
} */

/* BODY BACKGROUND: COVER WHOLE PARENT ELEMENT REPEATING ITSELF */
#body-background {
  display: none;
  background-image: url('/images/lowpolymemphispattern.svg');
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  width: 250%;
  height: 250%;
  background-size: contain; /* Fits the SVG in the available space */
  background-repeat: repeat;
}

/* Quiz title font size */
.quiz-title {
  font-size: 17px !important;
}

/* Quiz option font size */
.quiz-option {
  font-size: 17px !important;
}

/* Quiz explanation font size */
.quiz-explanation-text {
  font-size: 16px !important;
}

/* Test name font size */
.test-name {
  font-size: 20px !important;
}

/* Test description font size */
.test-desc {
  font-size: 17px !important;
}

/* User desc font size */
.user-desc {
  font-size: 17px !important;
}

/* Test tables text font size */
.test-tables-text {
  font-size: 17px !important;
}
/* Test tables header font size */
.test-tables-header {
  font-size: 19px !important;
}

/* MOBILE ADJUSTMENTS */
@media screen and (max-width: 768px) {
  #test-container {
    margin-left: 0px !important; /* Remove left margin for test container on mobile */
    margin-right: 0px !important; /* Remove right margin for test container on mobile */
  }

  .rightbar {
    display: none !important; /* Hide rightbar on mobile */
  }

  #hero-title-subtitle {
    display: none !important; /* Hide hero title and subtitle on mobile */
  }

  .quiz-omit-button {
    display: none !important; /* Hide omit button on mobile */
  }

  /* Try/Result view - edge-to-edge on mobile */
  .try-section, .result-hero {
    padding: 0.5rem 0 !important;
    overflow-x: hidden !important;
  }

  .try-section > .container,
  .result-hero .hero-body > .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Ensure quiz title text isn't clipped */
  #try-quiz-box .quiz-title {
    padding-left: 2px;
  }

  .result-hero .column {
    padding: 0 !important;
  }

  /* Try header row on mobile */
  .try-header-row {
    padding: 0 0.25rem;
  }

  #try-quiz-box {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }

  /* Quiz title needs padding to prevent number cutoff */
  #try-quiz-box .quiz-title-div,
  #try-quiz-box .quiz-title-div-try {
    padding-left: 0 !important;
  }

  #try-quiz-box .quiz {
    padding-left: 0 !important;
  }
  .livebattle-hero .hero-body {
    padding: 0.5rem 0.75rem !important;
    overflow-x: hidden !important;
  }

  .livebattle-hero {
    overflow-x: hidden !important;
  }

  .livebattle-hero .column {
    padding: 0 !important;
  }

  .livebattle-hero .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #live-battle-box {
    border-radius: 8px !important;
  }

  #battle-id-box {
    border-radius: 8px !important;
  }

  .try-header {
    padding: 0.75rem 0;
  }

  #try-quiz-container .quiz .box,
  #quiz-els .quiz .box {
    border-radius: 0 !important;
    margin-left: -0.75rem !important;
    margin-right: -0.75rem !important;
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  /* Quiz title spacing on mobile - removed, now part of question text */
  .quiz-title-div,
  .quiz-title-div-try {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Result view - edge-to-edge notifications */
  .result-hero .notification {
    border-radius: 8px !important;
    padding: 0.75rem !important;
    margin-bottom: 0.75rem !important;
  }

  .result-hero .notification .columns {
    display: block !important;
  }

  .result-hero .notification .column {
    text-align: center !important;
    padding: 0.25rem 0 !important;
  }

  .result-hero .notification .title.is-4 {
    font-size: 1.1rem !important;
    margin-bottom: 0.25rem !important;
  }

  .result-hero .notification .title.is-5 {
    font-size: 1rem !important;
    margin-bottom: 0.15rem !important;
  }

  .result-hero .notification .subtitle {
    font-size: 0.85rem !important;
    margin-bottom: 0 !important;
  }

  .result-hero .box {
    border-radius: 8px !important;
  }

  /* Compact stats on mobile */
  .result-stats-compact {
    padding: 0.25rem 0 !important;
    gap: 0.5rem !important;
  }

  .result-stats-compact .tags {
    justify-content: center;
  }

  .result-stats-compact .tag {
    font-size: 0.75rem !important;
  }

  .result-actions {
    justify-content: center;
    width: 100%;
  }

  /* Hide test, user, and quiz stats on mobile */
  .user-stats {
    display: none !important;
  }
  .test-stats {
    display: none !important;
  }
  .personality-stats {
    display: none !important;
  }
  .quiz-stats {
    display: none !important;
  }

  /* Reduce quiz title font size on mobile */
  .quiz-title {
    font-size: 14px !important;
    line-height: 1.2 !important;
    word-break: break-word !important;
  }

  .quiz-title-div {
    margin-right: 0px !important;
  }

  .quiz-title-div-try {
    margin-right: 0px !important;
    margin-bottom: 0.4rem !important;
  }

  /* Reduce quiz option font size on mobile */
  .quiz-option {
    font-size: 14px !important;
    line-height: 1.4 !important;
    word-break: break-word !important;
    hyphens: auto !important;
  }

  /* Reduce option box padding on mobile for long text */
  .quiz-options .box {
    padding: 0.6rem 0.75rem !important;
  }

  /* Reduce quiz explanation font size on mobile */
  .quiz-explanation-text {
    font-size: 13px !important; 
  }

  /* Reduce test name font size on mobile */
  .test-name {
    font-size: 17px !important; 
  }

  /* Reduce test description font size on mobile */
  .test-desc {
    font-size: 15px !important; 
  }

  /* Reduce user desc font size on mobile */
  .user-desc {
    font-size: 15px !important; 
  }

  /* Reduce test tables text font size on mobile */
  .test-tables-text {
    font-size: 15px !important; 
  }

  /* Reduce test tables header font size on mobile */
  .test-tables-header {
    font-size: 15px !important; 
  }
}

/* DESKTOP ADJUSTMENTS FOR CARD HEADERS */
@media screen and (min-width: 769px) {
  /* .card-header elements should have solid grey borders */
  /* In light mode */
  [data-theme="light"] .card-header {
    border: 2px solid #cccccc !important; /* Border color for omitted elements */
  }
  /* In dark mode */
  [data-theme="dark"] .card-header {
    border: 2px solid #333333 !important; /* Border color for omitted elements */
  }
}

/* HIDE NAVBAR SEARCH INPUT WHEN SMALL WIDTH */
@media screen and (max-width: 1350px) {
  #search-input-navbar-container {
    display: none !important;
  }
}

/* Navbar brand buttons - consistent style regardless of page */
.navbar-brand .buttons .button {
  border-radius: 9999px !important;
  font-weight: 500 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
  border: none !important;
}

.navbar-brand .buttons .button:hover {
  transform: translateY(-1px) !important;
}

.navbar-brand .buttons .button.is-primary.is-light {
  background-color: #ebfffc !important;
  color: #00947e !important;
  border: none !important;
}

.navbar-brand .buttons .button.is-primary.is-light:hover {
  background-color: #d4f9f2 !important;
  box-shadow: 0 2px 8px rgba(0, 209, 178, 0.25) !important;
}

.navbar-brand .buttons .button.is-link {
  background-color: #485fc7 !important;
  color: white !important;
  border: none !important;
}

.navbar-brand .buttons .button.is-link:hover {
  background-color: #3e51b5 !important;
  box-shadow: 0 2px 8px rgba(72, 95, 199, 0.4) !important;
}

/* Navbar end buttons - consistent style regardless of AJAX navigation */
.navbar-end .buttons .button {
  font-weight: 500 !important;
  border-radius: var(--bulma-radius-small) !important;
}
.navbar-end .logged-in-user-link,
.navbar-end .logout-button {
  font-weight: 500 !important;
  border-radius: var(--bulma-radius-small) !important;
}

/* Fix navbar search bar vertical alignment */
#search-input-navbar-container {
  display: flex;
  align-items: center;
}
#search-input-navbar-container .field.has-addons {
  margin-bottom: 0;
  display: flex;
  align-items: center;
}
#search-input-navbar-container .control {
  display: flex;
  align-items: center;
}
#search-input-navbar-container .control .input {
  height: 2.25em;
}
#search-input-navbar-container .control .button {
  height: 2.25em;
}

/* Scale down Google sign-in buttons in navbar */
#googleSignInButtonContainer-small,
#googleSignInButtonContainer {
  display: flex;
  align-items: center;
  transform: scale(0.75);
  transform-origin: center;
}

/* HIDE BUY ME A COFFEE WHEN SMALL WIDTH */
@media screen and (max-width: 1200px) {
  #buy-me-a-coffee {
    display: none !important;
  }
}

/* Hide / unhide elements */
.is-hidden {
  display: none !important;
}

/* Make an element visible */
.is-hovered {
  background-color: #5d5d5d;
  color: white;
}

/* Make an element clickable */
.ajax-link {
  cursor: pointer;
}
.is-clickable {
  cursor: pointer;
}
.is-unselected {
  filter: grayscale(100%);
  scale: 0.95;
}

/* Configure footer link colors depending on html doc data-theme attribute */
[data-theme="dark"] footer a {
  color: white;
}
[data-theme="light"] footer a {
  color: black;
}

/* Configure link colors user view boxes depending on html doc data-theme attribute */


/* COOKIES BANNER */
#cookie-banner {
  z-index: 10000;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* TEMPORARY ACCOUNT BANNER */
#temporary-account-banner {
  z-index: 10000;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #f0f0f0;
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
  text-align: center;
}

/* TEXTAREA COUNTER */
.textarea {
  position: relative;
  max-height: 500px;
}

.textarea-counter {
  z-index: 100;
  position: absolute;
  right: 8px;
  bottom: 8px;
  font-size: 11px;
  font-weight: 500;
  color: var(--bulma-grey);
  background-color: rgba(255, 255, 255, 0.9);
  padding: 2px 8px;
  border-radius: 10px;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  pointer-events: none;
  backdrop-filter: blur(4px);
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.textarea:focus + .textarea-counter,
.textarea:hover + .textarea-counter {
  opacity: 1;
}

.textarea-counter.warning {
  color: var(--bulma-warning-dark);
  background-color: rgba(255, 224, 138, 0.9);
}

.textarea-counter.danger {
  color: var(--bulma-danger);
  background-color: rgba(255, 200, 200, 0.9);
}

/* BORDER MODIFIERS */
.neutral {
  border: 3px solid #a8bbbf !important; /* Border color for neutral elements */
}

.neutral-thin {
  border: 2px solid #a8bbbf !important; /* Border color for neutral elements */
}

.selected {
  border: 3px solid var(--select-color) !important; /* Border color for selected elements */
}

.correct {
  border: 3px solid var(--success-color) !important; /* Border color for correct elements */
}

.incorrect {
  border: 3px solid var(--danger-color) !important; /* Border color for incorrect elements */
}

.omitted {
  border: 3px solid var(--grey-color) !important; /* Border color for omitted elements */
}

.omitted-thin {
  border: 2px solid var(--grey-color) !important; /* Border color for omitted elements */
}

.marked {
  border: 3px solid var(--link-color) !important; /* Border color for marked elements */
}

.marked-thin {
  border: 2px solid var(--link-color) !important; /* Border color for marked elements */
}

.dotted {
  border: 3px dotted var(--bulma-grey) !important; /* Dotted border for elements */
}

.dotted-thin {
  border: 1px dashed var(--bulma-grey) !important; /* Dotted border for elements */
}

.golden {
  border: 3px dashed var(--gold-color) !important; /* Border color for golden elements */
}

.silver {
  border: 3px dashed var(--silver-color) !important; /* Border color for silver elements */
}

.bronze {
  border: 3px dashed var(--bronze-color) !important; /* Border color for bronze elements */
}

.fourth-fifth {
  border: 3px dashed var(--grey-color) !important; /* Border color for fourth-fifth elements */
}

/* BORDER PERSONALITY MODIFIERS */
.pers1-border {
  border: 3px solid var(--pers1-color) !important; /* Border color for personality 1 elements */
}
.pers2-border {
  border: 3px solid var(--pers2-color) !important; /* Border color for personality 2 elements */
}
.pers3-border {
  border: 3px solid var(--pers3-color) !important; /* Border color for personality 3 elements */
}
.pers4-border {
  border: 3px solid var(--pers4-color) !important; /* Border color for personality 4 elements */
}
.pers5-border {
  border: 3px solid var(--pers5-color) !important; /* Border color for personality 5 elements */
}
.pers6-border {
  border: 3px solid var(--pers6-color) !important; /* Border color for personality 6 elements */
}

/* HERO HEADERS BACKGROUNDS */
.hero.home {
  position: relative;
}


/* .hero.is-admin {
  position: relative;
  background: rgba(178, 0, 0, 0.5);
} */

/* .hero.others {
  position: relative;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5));
} */

/* Image that should fill the background of parent element */
.hero-background-img {
  z-index: -1;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Cover with lower part of image */
  object-fit: cover;
  object-position: 100% 100%;
}


/* PLACE ELEMENT AT TOP RIGHT CORNER OF PARENT */
.upper-right-pos {
  position: absolute !important;
  top: 10px !important;
  right: 10px !important;
}

/* PLACE ELEMENT AT BOTTOM CENTER OF PARENT */
.bottom-center-pos {
  position: absolute !important;
  bottom: 10px !important;
  left: 50% !important;
  transform: translateX(-50%);
}

/* MODAL HIGH Z-INDEX */
.modal {
  z-index: 1000 !important;
}

/* NON CLOSABLE MODAL BACKGROUND */
.modal .non-closable-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust opacity as needed */
  z-index: calc(var(--modal-zindex) - 10); /* Ensure the non-closable background is behind the modal content */
}

/* NEW TEST TABS FLEX (Legacy) */
.new-test-tabs-flex {
  display: flex;
  overflow-x: auto;
  justify-content: space-around;
  margin: auto;
}

.new-test-tabs-flex-item {
  min-width: 300px;
  padding: 10px;
}

/* CREATION TYPE TABS - Minimalist Pill Design */
.creation-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  padding: 0.5rem;
  background: var(--scheme-main-ter, #f5f5f5);
  border-radius: 3rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.creation-tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 2rem;
  background: transparent;
  color: var(--text-color, #4a4a4a);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  white-space: nowrap;
}

.creation-tab:hover {
  background: var(--scheme-main-bis, #fafafa);
  color: var(--link-color, #485fc7);
}

.creation-tab.is-active {
  background: var(--link-color, #485fc7);
  color: #fff;
  box-shadow: 0 2px 8px rgba(72, 95, 199, 0.35);
}

.creation-tab.is-active:hover {
  background: var(--link-color-dark, #3850b7);
  color: #fff;
}

.creation-tab:not(.is-active) {
  opacity: 0.75;
}

.creation-tab:not(.is-active):hover {
  opacity: 1;
}

.creation-tab-icon {
  font-size: 1rem;
  opacity: 0.9;
}

.creation-tab.is-active .creation-tab-icon {
  opacity: 1;
}

.creation-tab-label {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.creation-tab-help {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  margin-left: 0.1rem;
}

.creation-tab-help:hover {
  opacity: 1;
}

.creation-tab.is-active .creation-tab-help {
  opacity: 0.7;
}

/* Dark mode support */
[data-theme="dark"] .creation-tabs {
  background: var(--scheme-main-ter, #2a2a2a);
}

[data-theme="dark"] .creation-tab:hover {
  background: var(--scheme-main-bis, #3a3a3a);
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
  .creation-tabs {
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: 2rem;
  }
  
  .creation-tab {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    gap: 0.4rem;
  }
  
  .creation-tab-icon {
    font-size: 0.9rem;
  }
  
  .creation-tab-help {
    display: none;
  }
}

/* ==================== MODAL TRY TEST HEADER ==================== */
.modal-try-test-header {
  text-align: center;
  padding: 0.5rem 0;
}

.modal-try-test-header .test-header-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #363636;
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
  word-break: break-word;
}

.modal-try-test-header .test-header-meta {
  font-size: 0.8rem;
  color: #7a7a7a;
  margin: 0;
}

[data-theme="dark"] .modal-try-test-header .test-header-title {
  color: #f5f5f5;
}

[data-theme="dark"] .modal-try-test-header .test-header-meta {
  color: #a0a0a0;
}

/* ==================== MODAL TRY TABS ==================== */
.modal-try-tabs {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  padding: 0.5rem;
  background: var(--scheme-main-ter, #f5f5f5);
  border-radius: 3rem;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

.modal-try-tab {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: 2rem;
  background: transparent;
  color: var(--text-color, #4a4a4a);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  white-space: nowrap;
}

.modal-try-tab:hover {
  background: var(--scheme-main-bis, #fafafa);
  color: var(--link-color, #485fc7);
}

/* Practice tab active state - primary color */
.modal-try-tab#tab-toggle-try.is-active {
  background: var(--primary-color, #00d1b2);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 209, 178, 0.35);
}

.modal-try-tab#tab-toggle-try.is-active:hover {
  background: var(--primary-color-dark, #00c4a7);
  color: #fff;
}

/* Live Battle tab active state - link/blue color with special flair */
.modal-try-tab#tab-toggle-livebattle.is-active {
  background: linear-gradient(135deg, var(--link-color, #485fc7) 0%, #6366f1 100%);
  color: #fff;
  box-shadow: 0 2px 12px rgba(72, 95, 199, 0.45);
  animation: livebattle-pulse 2s ease-in-out infinite;
}

.modal-try-tab#tab-toggle-livebattle.is-active:hover {
  background: linear-gradient(135deg, var(--link-color-dark, #3850b7) 0%, #4f46e5 100%);
  color: #fff;
}

@keyframes livebattle-pulse {
  0%, 100% {
    box-shadow: 0 2px 12px rgba(72, 95, 199, 0.45);
  }
  50% {
    box-shadow: 0 4px 20px rgba(72, 95, 199, 0.65);
  }
}

/* Live Battle tab non-active state - subtle highlight */
.modal-try-tab#tab-toggle-livebattle:not(.is-active) {
  background: rgba(72, 95, 199, 0.08);
  border: 1px dashed rgba(72, 95, 199, 0.3);
}

.modal-try-tab#tab-toggle-livebattle:not(.is-active):hover {
  background: rgba(72, 95, 199, 0.15);
  border-color: rgba(72, 95, 199, 0.5);
}

.modal-try-tab:not(.is-active) {
  opacity: 0.85;
}

.modal-try-tab:not(.is-active):hover {
  opacity: 1;
}

.modal-try-tab-icon {
  font-size: 1rem;
  opacity: 0.9;
}

.modal-try-tab.is-active .modal-try-tab-icon {
  opacity: 1;
}

.modal-try-tab-label {
  font-weight: 600;
  letter-spacing: -0.01em;
}

.modal-try-tab-help {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  opacity: 0.5;
  transition: opacity 0.2s ease;
  margin-left: 0.1rem;
}

.modal-try-tab-help:hover {
  opacity: 1;
}

.modal-try-tab.is-active .modal-try-tab-help {
  opacity: 0.7;
}

/* Dark mode support for modal-try tabs */
[data-theme="dark"] .modal-try-tabs {
  background: var(--scheme-main-ter, #2a2a2a);
}

[data-theme="dark"] .modal-try-tab:hover {
  background: var(--scheme-main-bis, #3a3a3a);
}

[data-theme="dark"] .modal-try-tab#tab-toggle-livebattle:not(.is-active) {
  background: rgba(72, 95, 199, 0.15);
  border-color: rgba(72, 95, 199, 0.4);
}

/* Mobile adjustments for modal-try tabs */
@media screen and (max-width: 768px) {
  .modal-try-tabs {
    gap: 0.5rem;
    padding: 0.4rem;
    border-radius: 2rem;
  }
  
  .modal-try-tab {
    padding: 0.55rem 1rem;
    font-size: 0.85rem;
    gap: 0.4rem;
  }
  
  .modal-try-tab-icon {
    font-size: 0.9rem;
  }
  
  .modal-try-tab-help {
    display: none;
  }
}


/* LIMIT CONTROL PANEL HEIGHT */
/* #control-panel {
  max-height: 60vh !important;
} */

/* LEFTBAR AND TOPBAR STYLES */
.leftbar {
  transform: scale(1.2);
  transition: all 0.3s ease;
  position: fixed;
  left: 0;
  top: 70px;
  width: 240px;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 3px;
  margin-left: 3px;
  z-index: 1000;
}

.bottombar {
  transform: scale(1.2);
  transition: all 0.3s ease;
  position: fixed;
  z-index: 1000;
  padding: 1px;
  bottom: -25px;
  left: -10px;
  right: -10px;
}

/* Control panel collapse functionality */
#control-panel.collapsed {
  left: -220px !important;
}

#control-panel.collapsed .control-panel-collapse-btn {
  right: -35px;
}

#control-panel.collapsed .control-panel-collapse-btn i {
  transform: rotate(180deg);
}

.control-panel-collapse-btn {
  position: absolute;
  top: 10px;
  right: -12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: white;
  border: 1px solid #dbdbdb;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1001;
  transition: all 0.3s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.control-panel-collapse-btn:hover {
  background: #f5f5f5;
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.control-panel-collapse-btn i {
  font-size: 0.75rem;
  color: #7a7a7a;
  transition: transform 0.3s ease;
}

[data-theme="dark"] .control-panel-collapse-btn {
  background: #363636;
  border-color: #4a4a4a;
}

[data-theme="dark"] .control-panel-collapse-btn:hover {
  background: #4a4a4a;
}

[data-theme="dark"] .control-panel-collapse-btn i {
  color: #b5b5b5;
}

/* Control panel responsive behavior at 1200px */
@media screen and (min-width: 1201px) {
  #control-panel {
    /* Force leftbar styles on large screens */
    left: 0;
    top: 70px;
    width: 240px;
    bottom: auto;
    right: auto;
    z-index: 1000;
  }
  #control-panel.collapsed {
    left: -220px;
  }
  #bottombar-menu {
    display: none !important;
  }
  #leftbar-menu {
    display: block !important;
  }
  .control-panel-collapse-btn {
    display: flex;
  }
}

@media screen and (max-width: 1200px) {
  #control-panel {
    /* Force bottombar styles on small screens */
    left: -10px;
    right: -10px;
    bottom: -25px;
    top: auto;
    width: auto;
    z-index: 1000;
  }
  #control-panel.collapsed {
    left: -10px !important;
  }
  #leftbar-menu {
    display: none !important;
  }
  #bottombar-menu {
    display: block !important;
  }
  .control-panel-collapse-btn {
    display: none !important;
  }
}

/* At most 10 elements per row and equally sized and centered */
.quiz-links {
  width: 100%;
  overflow-y: auto;
}

.leftbar #control-panel-content .quiz-links {
  max-height: 150px; /* Override specifically when inside .leftbar */
}

.bottombar #control-panel-content .quiz-links { 
  max-height: 100px; /* Override specifically when inside .bottombar */
}

#control-panel-toggle {
  position: absolute;
  z-index: 1000;
  top: -15px;
  left: 50% - 5px;
}

/* TEST CONTAINER */
#test-container {
  margin-left: 250px;
  /* margin-right: 225px; */
  margin-right: 20px;
  max-width: 1344px;
}

/* MODAL CONTEXT */
#modal-context {
  font-family: 'Georgia';
  color: #333;
  text-align: justify;
}

#modal-context p {
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 8px;
}

#modal-context h3 {
  color: var(--info-color);
  font-size: 24px;
  margin-bottom: 15px;
}

.open-edit-test-modal-button {
  cursor: pointer;
}

.open-edit-test-modal-button:hover > .icon {
  transform: scale(1.2) rotate(360deg);
  transition: transform 0.3s;
}

.pagination-button {
  cursor: pointer;
}

.pagination-button:hover > .icon {
  transform: scale(1.2) rotate(360deg);
  transition: transform 0.3s;
}

/* FLEX CONTAINERS AND ITEMS */
/* At most 10 per row and centered */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.centered-flex-container {
  display: flex;
  margin-top: 1rem;
  margin-bottom: 1rem;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  gap: 1rem;
}

.flex-container-no-wrap {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.box {
  margin-right: 3px !important;
  margin-left: 3px !important;
}

.notification {
  margin-right: 3px !important;
  margin-left: 3px !important;
}

.message {
  margin-right: 3px !important;
  margin-left: 3px !important;
}

.flex-box {
  transform: scale(0.75);
  transition: opacity 0.5s ease, transform 0.5s ease;
  position: relative;
  flex: 1 1 500px;
  margin-top: 10px;
  margin-bottom: 20px;
  margin-right: 6px;
  margin-left: 6px;
  padding: 2px;
}

.flex-card {
  transform: scale(0.75);
  transition: opacity 0.5s ease, transform 0.5s ease;
  position: relative;
  flex: 1 1 500px;
  margin-top: 10px;
  margin-bottom: 10px;
  margin-right: 4px;
  margin-left: 4px;
  padding: 5px;
}

.visible {
  opacity: 1 !important;
  transform: scale(1) !important;
}

.flex-item-quiz-link {
  cursor: pointer;
  position: relative;
  flex: 1 0 35px;
  margin: 2px;
  padding: 2px;
  text-align: center;
  border-radius: 20px;
  border: 1.5px solid var(--grey-color);
}

.flex-item-quiz-link:hover {
  background-color: #5d5d5d;
  color: white;
}

.flex-opt {
  position: relative;
  flex: 1 1 500px;
  margin: 8px;
  padding: 8px;
  border-radius: 20px;
  border-radius: 8px;
  border: 1.5px solid var(--grey-color);
  box-sizing: border-box !important;
}

.flex-opt-clickable {
  cursor: pointer;
  position: relative;
  flex: 1 1 500px;
  margin: 8px;
  padding: 8px;
  border-radius: 20px;
  border-radius: 8px;
  border: 1.5px solid var(--grey-color);
  transition: all 0.2s ease-in-out;
  box-sizing: border-box !important;
}

.flex-opt-clickable:hover {
  transform: translateY(-3px); /* Subtle lift on hover */
}

.see-all-button {
  position: absolute !important;
  top: 10px !important; 
  right: 10px !important;
}

.add-quiz-container{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

/* RESULT TABLES */
#tab-content-latestTab {
  max-height: 350px;
  overflow-y: auto;
}
#tab-content-bestTab {
  max-height: 350px;
  overflow-y: auto;
}
#tab-content-myTab {
  max-height: 350px;
  overflow-y: auto;
}
.sortable {
  cursor: pointer; /* Indicate clickability */
}

.percentages-bar {
  display: flex;
  width: 100%;
  height: 30px;
}
.percentages-bar div {
  height: 100%;
  text-align: center;
  line-height: 30px;
  color: white;
}
.percentages-bar div:nth-child(1) { background-color: var(--pers1-color); }
.percentages-bar div:nth-child(2) { background-color: var(--pers2-color); }
.percentages-bar div:nth-child(3) { background-color: var(--pers3-color); }
.percentages-bar div:nth-child(4) { background-color: var(--pers4-color); }
.percentages-bar div:nth-child(5) { background-color: var(--pers5-color); }
.percentages-bar div:nth-child(6) { background-color: var(--pers6-color); }

/* IMAGE CONTAINER */
.image-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.gcs-image {
  max-width: 100%;
  max-height: 300px;
}

/* QUIZ CONTAINER */
.quiz {
  position: relative;
  margin: 10px auto;
  padding: 2px;
}

.quiz-title-div {
  margin-bottom: 10px;
  flex: 1; /* Take remaining space */
  min-width: 0; /* Allow text to wrap */
}

.quiz-title-div-try {
  margin-bottom: 10px;
}

/* Flex container for quiz title and stats */
.quiz-title-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.quiz-title {
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25 !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  display: block;
}

.quiz-number {
  font-weight: 700;
  color: #7a7a7a;
  margin-right: 0.35rem;
}

.quiz-number::after {
  content: ".";
}

.quiz-question-text {
  display: inline;
}

.quiz-omit-button {
  display: none;
  position: absolute !important;
  top: 2px !important;
  right: 10px !important;
}

.quiz-image {
  position: relative;
  align-items: flex-start;
  display: flex;
}

.quiz-check-container {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

.quiz-check-button {
  border-radius: 8px !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}

.quiz-check-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.quiz-check-button:active {
  transform: translateY(0) !important;
}

.quiz-check-button .icon {
  transition: transform 0.2s ease !important;
}

.quiz-check-button:hover .icon {
  transform: scale(1.1) !important;
}

.quiz-send-answer-button {
  border-radius: 8px !important;
  padding: 0.5rem 1.25rem !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: all 0.2s ease !important;
}

.quiz-send-answer-button:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.quiz-edit-button {
  position: absolute !important;
  top: -20px !important;
  right: 60px !important;
}

.quiz-delete-button {
  position: absolute !important;
  top: -20px !important;
  right: 10px !important;
}

.delete-image-button {
  position: absolute !important;
  top: 2px !important;
  right: 2px !important;
}

/* ON HOVER ANIMATIONS */
.ajax-link:hover {
  color: var(--link-color); /* Change text color on hover */
}

.is-clickable:hover {
  color: var(--link-color); /* Change text color on hover */
}

.difficulty-icon:hover {
  transform: scale(1.2);
  transition: transform 0.3s;
}

.hide-answers-icon:hover {
  transform: scale(1.2);
  transition: transform 0.3s;
}

.visibility-icon:hover {
  transform: scale(1.2);
  transition: transform 0.3s;
}

.button:hover {
  transform: scale(1.02);
  transition: transform 0.3s;
}

.card-footer-item {
  cursor: pointer;
}

.card-footer-item:hover > .icon {
  transform: scale(1.5) rotate(360deg);
  transition: transform 0.3s;
}

.dropdown-item {
  cursor: pointer;
}

.dropdown-item:hover > .icon {
  transform: scale(1.3) rotate(360deg);
  transition: transform 0.3s;
}

.dropdown-item:hover > .tag {
  transform: scale(1.1) rotate(360deg);
  transition: transform 0.3s;
}

.navbar-link:hover > .icon {
  transform: scale(1.2) rotate(360deg);
  transition: transform 0.3s;
}

.navbar-item:hover > .icon {
  transform: scale(1.2) rotate(360deg);
  transition: transform 0.3s;
}

a:hover > .icon {
  transform: scale(1.2) rotate(360deg);
  transition: transform 0.3s;
}
span.button:hover > .icon {
  transform: scale(1.2) rotate(360deg);
  transition: transform 0.3s;
}

div.button:hover > .icon {
  transform: scale(1.2) rotate(360deg);
  transition: transform 0.3s;
}

button.button:hover > .icon {
  transform: scale(1.2) rotate(360deg);
  transition: transform 0.3s;
}

/* MODAL IMAGES */
.modal-image {
  max-width: 100%;
  max-height: 100%;
  margin: auto;
  display: block;
}

.preview-image {
  cursor: pointer;
}

/* PDF VIEWER */
.pdf-pages {
  display: flex;
  flex-direction: row;
  align-items: left;
  padding: 10px;
  overflow-x: auto;
}

.pdf-page {
  position: relative;
  flex: 0 0 140px;
  margin: 10px;
  padding-bottom: 0px;
  border: dashed 2px #ccc;
}

.select-page {
  cursor: pointer;
  position: absolute;
  z-index: 100;
  top: 15px;
  right: 15px;
  transform: scale(3);
  background-color: #4285F4;  /* Example color - choose your own */
  border-radius: 50%;         /* Make it a circle */
  box-shadow: 0 0 0 0 rgba(66, 133, 244, 0.7); /* Initial subtle glow */
}

/* CANVAS AND CHARTS */
.card-header-title {
  min-height: 100px;
}

.user-stats {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.test-stats {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.personality-stats {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.quiz-stats {
  flex-shrink: 0; /* Don't shrink the stats */
  display: flex;
  flex-direction: row;
  align-items: center;
}

.option-stats {
  position: absolute;
  bottom: -13px;
  right: -5px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.canvas-container {
  position: relative;
  margin-left: 3px;
  margin-right: 3px;
  margin-top: 0px;
  margin-bottom: 0px;
  width: 60px;
  height: 60px;
}

.doughnut {
  width: 100%;
  height: 100%;
}

.doughnut:hover {
  transform: scale(1.2);
  transition: transform 0.3s;
  z-index: 100;
}

.icon-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.75) ;
}

/* ERROR STYLES */
.error-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 80vh;
}

.error-number {
  font-size: 120px;
  font-weight: bold;
  color: #FF5454; /* Customize error color */
}

.error-message {
  font-size: 24px;
  margin-bottom: 20px;
}

.error-stack pre {
  overflow-x: auto;
  overflow-y: auto;
  white-space: pre-wrap;
  font-size: 14px;
}

/* CUSTOM SCROLLBAR */
::-webkit-scrollbar {
  width: 20px;
}

::-webkit-scrollbar-track {
  background-color: transparent;
}

::-webkit-scrollbar-thumb {
  background-color: #d6dee1;
  border-radius: 20px;
  border: 6px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #a8bbbf;
}

/* HOME PAGE */
/* Custom animations */
@keyframes pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255, 0.7); }
    70% { transform: scale(1.03); box-shadow: 0 0 20px 30px rgba(255,255,255, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255,255,255, 0); }
}
.pulse-animate {
    animation: pulse 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

@keyframes pulse-alt {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0, 0.2); }
    70% { transform: scale(1.03); box-shadow: 0 0 15px 25px rgba(0,0,0, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0,0,0, 0); }
}
.pulse-animate-alt {
    animation: pulse-alt 1.8s infinite cubic-bezier(0.4, 0, 0.6, 1);
}

/* Background Blob Animation */
@keyframes blob {
  0%, 100% {
    border-radius: 60% 40% 30% 70% / 50% 50% 50% 50%;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  25% {
    border-radius: 30% 70% 60% 40% / 60% 40% 60% 40%;
    transform: translate(20px, -30px) rotate(90deg) scale(1.1);
  }
  50% {
    border-radius: 50% 50% 50% 50% / 60% 40% 30% 70%;
    transform: translate(-20px, 30px) rotate(180deg) scale(1.05);
  }
  75% {
    border-radius: 70% 30% 40% 60% / 70% 30% 70% 30%;
    transform: translate(30px, -20px) rotate(270deg) scale(1.1);
  }
}
.animate-blob {
  animation: blob 18s infinite cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Adjusted timing for smoother, less distracting blobs */
}
/* Custom animation delay classes (if not part of your Tailwind config) */
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }
.animation-delay-6000 { animation-delay: 6s; }


/* Text shadow for hero title */
.hero-text-shadow {
    text-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); /* Stronger shadow */
}

/* General card hover effect */
.card-hover-effect {
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    /* background: rgba(139, 92, 246, 0.1); */
}
.card-hover-effect:hover {
    transform: translateY(-0.75rem) scale(1.02); /* More pronounced lift and slight scale */
    box-shadow: 0 15px 30px rgba(0,0,0,0.2); /* Stronger shadow on hover */
}

/* Specific styles for highlight cards - kept these in case they're used elsewhere */
.highlight-card {
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-left-width: 5px;
    border-left-style: solid;
    border-color: transparent; /* Default transparent border */
}
/* Specific border colors for medals, using Tailwind's extended colors */
.highlight-card.border-gold { border-color: theme('colors.gold'); }
.highlight-card.border-grey-lighter { border-color: theme('colors.grey-lighter'); } /* Ensure 'grey-lighter' is defined in your Tailwind theme */
.highlight-card.border-bronze { border-color: theme('colors.bronze'); }
.highlight-card.border-gray-300 { border-color: theme('colors.gray.300'); } /* Ghost color */

.highlight-card-rank {
    position: absolute;
    top: 10px;
    left: 10px;
    font-weight: bold;
}
.highlight-card-rank .fa-medal { font-size: 2.5em; } /* Larger medals */
.highlight-card-rank .fa-award { font-size: 2em; color: theme('colors.gray.400'); }

.highlight-card-title {
    font-weight: 800; /* Extra bolder title */
    margin-top: 30px; /* Space for rank */
    margin-bottom: 0.75rem; /* Slightly more space */
    flex-grow: 1;
    word-break: break-word;
}
.highlight-card-stat {
    font-weight: bold;
    margin-top: auto;
}

/* Audience box styles */
.audience-box ul li { margin-bottom: 1rem; font-size: 1.1rem; line-height: 1.6;} /* Adjusted font-size for better fit with hidden text */
.audience-box ul li .icon { vertical-align: middle; margin-right: 0.75rem;}

/* Additional Enhancements */
.gradient-text {
    z-index: 10;
    background: linear-gradient(to right, var(--wise-yellow), var(--wise-purple));
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* COMMUNITY HIGHLIGHTS */
/* Base card style */
.ranked-card {
    position: relative; /* For absolute positioning of elements inside */
    padding-bottom: 50px; /* Space for the stats at the bottom */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    height: 100%; /* For equal height in grid/flex */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes stats to bottom if card is taller */
}

.ranked-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 10px 20px rgba(0,0,0,0.15);
}

/* Border styles for ranked cards */
.card-border-golden {
    border: 2px solid var(--gold-color);
    box-shadow: 0 0 12px 2px var(--gold-color);
}
.card-border-golden:hover {
    box-shadow: 0 0 20px 5px var(--gold-color);
}

.card-border-silver {
    border: 2px solid var(--silver-color);
    box-shadow: 0 0 10px 1px var(--silver-color);
}
.card-border-silver:hover {
    box-shadow: 0 0 15px 3px var(--silver-color);
}

.card-border-bronze {
    border: 2px solid var(--bronze-color);
    box-shadow: 0 0 8px 1px var(--bronze-color);
}
.card-border-bronze:hover {
    box-shadow: 0 0 12px 2px var(--bronze-color);
}

.card-border-fourth-fifth {
    border: 2px solid #e5e7eb; /* Tailwind gray-200 */
}

/* Stats at the bottom of ranked cards */
.card-stats-bottom {
    position: absolute;
    bottom: 1rem;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    text-align: center;
}

/* Active Tab Style */
.active-tab-button {
    border-color: var(--wise-purple) !important; /* Or your primary theme color */
    color: var(--wise-purple) !important;
    background-color: rgba(139, 92, 246, 0.1); /* Light purple bg */
}
.active-tab-button i {
    color: var(--wise-purple) !important;
}

/* Styling for the 4th/5th place text if not using an icon */
.rank-text-4th-5th {
    font-weight: bold;
    color: #9ca3af; /* Tailwind gray-400 */
}

/* Gradient text (optional, if you want to use it for titles) */
.gradient-text-purple {
    background: linear-gradient(to right, var(--wise-blue), var(--wise-purple));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* Quiz Explanation */
.quiz-explanation {
    padding: 16px; /* p-4 */
    border-radius: 12px; /* rounded-xl */
    background-color: #eff6ff; /* bg-sky-50 */
    color: #0c4a6e; /* text-sky-700 */
    border: 1px solid #bfdbfe; /* border-sky-200 */
    font-size: 0.875rem; /* text-sm */
    margin-top: 16px; /* mt-4 */
    width: 100%; /* w-full */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow-sm */
}

[data-theme="dark"] .quiz-explanation {
    background-color: #1e3a8a; /* dark:bg-sky-800 */
    color: #bfdbfe; /* dark:text-sky-200 */
    border-color: #1d4ed8; /* dark:border-sky-700 */
}

.quiz-explanation i {
    margin-right: 6px;
    color: #0ea5e9; /* text-sky-500 */
}
[data-theme="dark"] .quiz-explanation i {
    color: #38bdf8; /* dark:text-sky-400 */
}

/* Container for each FAQ */
.faq-item {
  margin-bottom: 1.5rem;
}

/* Question block styling */
.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  padding: 0.75rem 1rem;
  background-color: #f9f9f9;
  border-radius: 0.5rem;
  transition: background-color 0.2s ease;
}

.faq-question:hover {
  background-color: #f0f0f0;
}

/* Title inside the question */
.faq-question .title {
  margin: 0;
  flex-grow: 1;
}

/* Answer content */
.faq-answer {
  padding: 0.75rem 1rem 0.5rem 1rem;
  background-color: #fafafa;
  border-left: 4px solid #ccc;
  border-radius: 0 0 0.5rem 0.5rem;
  animation: fadeIn 0.3s ease;
}

/* Toggle button for expanding/collapsing */
.faq-show-answer {
  background: none;
  border: none;
  outline: none;
  margin-left: 1rem;
  transition: transform 0.3s ease;
  color: #555;
}

.faq-show-answer.rotate {
  transform: rotate(180deg);
}

/* Fade animation for answer */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Notification animations and initial state */
.notification {
  display: none; /* Completely hidden by default - no space taken */
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.notification.notification-show {
  display: block; /* Show when needed */
  opacity: 1;
  transform: translateY(0);
}

@keyframes notificationFadeIn {
  from { 
    opacity: 0; 
    transform: translateY(-10px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

/* ==================== LIVE BATTLE STYLES ==================== */

/* Battle ID Box */
#battle-id-box {
  background: var(--bulma-scheme-main-bis);
  border: 2px dashed var(--bulma-link);
  border-radius: 12px;
}

#live-battle-id {
  color: var(--bulma-link);
  user-select: all;
}

#copy-battle-id-button {
  transition: all 0.2s ease;
}

#copy-battle-id-button:hover {
  transform: scale(1.1);
}

/* Live Battle Tab Styling */
#tab-toggle-livebattle a {
  transition: all 0.3s ease;
}

#tab-toggle-livebattle.is-active a {
  border-color: var(--bulma-link) !important;
}

/* Live Battle Lobby */
#live-battle-box {
  border-radius: 12px;
  position: relative;
}

/* Live Battle Controls (top-right) */
.livebattle-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 10;
}

/* Live Battle Hero */
.livebattle-hero {
  padding-top: 0 !important;
}

.livebattle-hero .hero-body {
  padding: 1rem 1.5rem;
  align-items: flex-start;
}

/* Try Test Section */
.try-section {
  padding: 1rem 1.5rem !important;
}

/* Override body-content centering for try section */
#body-content:has(.try-section) {
  justify-content: flex-start;
}

/* Try/Result Header - Minimalistic */
.try-header-link {
  text-decoration: none;
  display: block;
  flex: 1;
  min-width: 0;
}

/* Header row with inline controls */
.try-header-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.try-header-row .try-inline-controls {
  display: flex;
  gap: 0.35rem;
  flex-shrink: 0;
}

.try-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0;
  cursor: pointer;
  transition: opacity 0.2s ease;
}

.try-header:hover {
  opacity: 0.8;
}

.try-header-info {
  flex: 1;
  min-width: 0;
}

.try-header-title {
  font-size: 1rem;
  font-weight: 600;
  color: #363636;
  margin: 0 0 0.15rem 0;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.try-header-meta {
  font-size: 0.8rem;
  color: #7a7a7a;
  margin: 0;
}

.try-header-arrow {
  color: #b5b5b5;
  font-size: 0.85rem;
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.try-header:hover .try-header-arrow {
  transform: translateX(3px);
  color: #7a7a7a;
}

/* Dark theme support */
[data-theme="dark"] .try-header-title {
  color: #f5f5f5;
}

[data-theme="dark"] .try-header-meta {
  color: #a0a0a0;
}

[data-theme="dark"] .try-header-arrow {
  color: #6a6a6a;
}

[data-theme="dark"] .try-header:hover .try-header-arrow {
  color: #a0a0a0;
}

/* Compact Result Stats */
.result-stats-compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  flex-wrap: wrap;
}

.result-stats-compact .tags {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.result-stats-compact .tag {
  margin: 0;
}

.result-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

.result-actions .button {
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  padding: 0;
}

/* Result Actions Bar */
.result-actions-bar {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 1rem 0;
}

.result-actions-bar .button {
  border-radius: 2rem;
}

/* Elegant Submit Button */
.try-submit-elegant {
  border-radius: 50px;
  padding-left: 2rem;
  padding-right: 2rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(72, 199, 142, 0.3);
}

.try-submit-elegant:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(72, 199, 142, 0.4);
}

.try-submit-elegant:active {
  transform: translateY(0);
}

/* Try Quiz Box */
#try-quiz-box {
  border-radius: 12px;
}

/* Try Quiz Container (non-sequential) */
#try-quiz-container .quiz {
  margin-bottom: 1.5rem;
}

/* Try Navigation */
.try-navigation .button {
  border-radius: 8px;
}

/* Try Finish Button - Clean and elegant */
.try-finish-btn {
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.try-finish-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(72, 199, 142, 0.3);
}

/* Inline Controls for Sequential Mode - now in header */
.try-inline-controls .button.is-small {
  padding-left: 0.6rem;
  padding-right: 0.6rem;
}

/* Live Battle Timer Bar - Minimalistic Design */
#livebattle-timer-bar {
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.timer-bar {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

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

.timer-bar-track {
  height: 6px;
  background: var(--background-color-alt);
  border-radius: 3px;
  overflow: hidden;
}

.timer-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.1s linear;
  width: 100%;
}

.timer-bar.countdown .timer-bar-fill {
  background: linear-gradient(90deg, #667eea, #764ba2);
}

.timer-bar.answering .timer-bar-fill {
  background: linear-gradient(90deg, #48c78e, #3ec487);
}

.timer-bar.answering.urgent .timer-bar-fill {
  background: linear-gradient(90deg, #f14668, #ff3860);
  animation: pulse-bar 0.5s ease-in-out infinite;
}

@keyframes pulse-bar {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.timer-bar-label {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.75rem;
  color: var(--text-color-light);
}

.timer-bar-icon {
  font-size: 0.7rem;
  opacity: 0.7;
}

.timer-bar.countdown .timer-bar-icon {
  color: #764ba2;
}

.timer-bar.answering .timer-bar-icon {
  color: #48c78e;
}

.timer-bar.answering.urgent .timer-bar-icon {
  color: #f14668;
}

.timer-bar-value {
  font-weight: 600;
  font-size: 0.8rem;
  color: var(--text-color);
  min-width: 1.5ch;
  text-align: right;
}

.timer-bar-unit {
  font-size: 0.7rem;
  opacity: 0.7;
}

/* Livebattle Submit Button - Big and Prominent */
.livebattle-submit {
  background: transparent;
  border: 3px solid #ccc;
  color: #999;
  font-size: 1.5rem;
  padding: 0;
  cursor: pointer;
  border-radius: 50%;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.livebattle-submit:not(:disabled) {
  background: transparent;
  border: 3px solid #48c78e;
  color: #48c78e;
  box-shadow: 0 2px 12px rgba(72, 199, 142, 0.3);
}

.livebattle-submit:not(:disabled):hover {
  background: #48c78e;
  color: white;
  transform: scale(1.1);
  box-shadow: 0 4px 16px rgba(72, 199, 142, 0.5);
}

.livebattle-submit:not(:disabled):active {
  transform: scale(0.95);
}

.livebattle-submit:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Player Info Tags */
.player-info {
  transition: all 0.2s ease;
}

.player-info:hover {
  transform: scale(1.03);
}

/* ===== CHANGELOG MODAL ===== */
.changelog-modal {
  background: white;
  border-radius: 16px;
  max-width: 600px;
  width: 90%;
  padding: 2rem;
  position: relative;
  text-align: center;
}

[data-theme="dark"] .changelog-modal {
  background: #1a1a2e;
}

.changelog-close {
  position: absolute;
  top: 12px;
  right: 12px;
}

.changelog-header {
  margin-bottom: 1.5rem;
}

.changelog-date {
  display: inline-block;
  background: #f0f0f0;
  color: #666;
  font-size: 0.8rem;
  font-weight: 500;
  padding: 0.3rem 0.9rem;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}

[data-theme="dark"] .changelog-date {
  background: rgba(255,255,255,0.1);
  color: #aaa;
}

.changelog-title {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0;
  color: #333;
}

[data-theme="dark"] .changelog-title {
  color: #eee;
}

.changelog-updates {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  text-align: left;
}

.changelog-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f8f9fa;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  color: #444;
}

[data-theme="dark"] .changelog-item {
  background: rgba(255,255,255,0.05);
  color: #ccc;
}

.changelog-item i {
  color: #667eea;
  width: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.changelog-item div {
  flex: 1;
}

.changelog-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, #ddd, transparent);
  margin: 1rem 0;
}

[data-theme="dark"] .changelog-divider {
  background: linear-gradient(90deg, transparent, #444, transparent);
}

.changelog-support {
  margin-bottom: 1rem;
}

.changelog-support-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #e74c3c;
  margin-bottom: 0.25rem;
}

.changelog-support-title i {
  margin-right: 0.4rem;
}

.changelog-support-desc {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 0.75rem;
}

[data-theme="dark"] .changelog-support-desc {
  color: #aaa;
}

.changelog-perks {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1rem;
  text-align: left;
}

.changelog-perk {
  font-size: 0.8rem;
  color: #555;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding-left: 0.5rem;
}

[data-theme="dark"] .changelog-perk {
  color: #bbb;
}

.changelog-perk i {
  color: #f39c12;
  font-size: 0.75rem;
  width: 16px;
}

.changelog-member-btn {
  display: inline-block;
  background: linear-gradient(135deg, #f39c12, #e74c3c);
  color: white !important;
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.7rem 1.75rem;
  border-radius: 25px;
  text-decoration: none;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.changelog-member-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(243, 156, 18, 0.4);
}

.changelog-note {
  font-size: 0.7rem;
  color: #999;
  margin-top: 0.6rem;
}

.changelog-disclaimer {
  font-size: 0.65rem;
  color: #888;
  margin-top: 0.75rem;
  line-height: 1.4;
  padding: 0 0.5rem;
}

.changelog-disclaimer a {
  color: #667eea;
  text-decoration: underline;
}

[data-theme="dark"] .changelog-disclaimer {
  color: #777;
}

.changelog-bugs {
  font-size: 0.75rem;
  color: #ff4500;
  margin-top: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.changelog-bugs a {
  color: #ff4500;
  text-decoration: underline;
}

.changelog-bugs a:hover {
  color: #ff6a33;
}

.changelog-dismiss {
  background: #667eea;
  border: none;
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.6rem 1.5rem;
  border-radius: 20px;
  margin-top: 0.5rem;
  transition: background 0.2s ease, transform 0.2s ease;
}

.changelog-dismiss:hover {
  background: #5a6fd6;
  transform: translateY(-1px);
}

/* Navbar changelog button */
.navbar-changelog-btn.button {
  font-size: 0.75rem !important;
}

.navbar-changelog-btn.button .icon i {
  color: #f39c12;
}

/* Mobile adjustments for changelog modal */
@media screen and (max-width: 768px) {
  .changelog-modal {
    max-width: calc(100vw - 2rem);
    padding: 1.25rem;
  }
  
  .changelog-item {
    font-size: 0.8rem;
  }
  
  .changelog-perk {
    font-size: 0.75rem;
  }
}