@import url('https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

:root {
  /* neutrals */
  --gray-0: #ffffff;
  /*--gray-50: #f9fafb;*/
  --gray-100: #FFFFFFCC;
  /*--gray-200:;*/
  --gray-300: #FFFFFFB2;
  --gray-400: #FFFFFF66;
  --gray-500: #FFFFFF4D;
  --gray-600: #FFFFFF33;
  --gray-700: #FFFFFF0D;
  --gray-800: #FFFFFF1A;
  --gray-900: #121214;

  /* brand */
  /*--primary-50:  #eff6ff;
  --primary-100: #dbeafe;*/
  --primary-200: #FFFFFF33;
  --primary-300: #343865;
  --primary-400: #98a1ff;
  /*--primary-500: #3b82f6;*/
  --primary-600: #717DFC;
  --primary-700: #1A1F52;
  --primary-800: #01063F;
  --primary-900: #01063F;

  --color2: #45F7D9;
  --color3: #EB70FE;
  --color4: #4499FB;

  /*--accent:      #f59e0b;*/
  --success: #91FE5E;
  --success-100: #A8F43E1A;
  --success-200: #A8F43E1F;
  /*--danger:      #FF9191;*/
  --danger: #FD6464;
  --danger-100: #FD64641A;
  --danger-200: #FD64641F;
  --danger-300: #F37E73;
  --warning: #FAAD56;
  --warning-200: #FAAD564D;



}

:root {
  --body-color: var(--gray-0);

  --color-bg: var(--gray-900);
  --color-bg-800: var(--gray-800);
  --color-bg-700: var(--gray-700);
  --color-bg-200: var(--gray-200);

  --color-bg-alt-200: var(--primary-200);
  --color-bg-alt-600: var(--primary-600);
  --color-bg-alt: var(--primary-900);
  --color-text: var(--gray-0);
  /*--color-text-muted:   var(--gray-600);
  --color-border:       var(--gray-200);*/

  --color-primary: var(--primary-600);
  /*--color-primary-hover:var(--primary-700);*/
  --color-danger: var(--danger);
  --color-success: var(--success);
  --color-warning: var(--warning);
  --color-warning-light: var(--warning-200);

  --radius: 16px;
  --title-line-color: var(--gray-600);
}

.fs-10 {
  font-size: 10px
}

.fs-11 {
  font-size: 11px
}

.fs-12 {
  font-size: 12px
}

.fs-13 {
  font-size: 13px
}

.fs-14 {
  font-size: 14px
}

.fs-16 {
  font-size: 16px
}

.fs-18 {
  font-size: 18px
}

.fs-20 {
  font-size: 20px
}

.fs-22 {
  font-size: 22px
}

.fs-24 {
  font-size: 24px
}

.fs-26 {
  font-size: 26px
}

.fs-28 {
  font-size: 28px
}

.fs-30 {
  font-size: 30px
}

.fs-32 {
  font-size: 32px
}

.fs-36 {
  font-size: 36px
}


.text-gray-100 {
  color: var(--gray-100)
}

.text-gray-200 {
  color: var(--gray-200)
}

.text-gray-300 {
  color: var(--gray-300)
}

.text-gray-400 {
  color: var(--gray-400)
}

.text-gray-500 {
  color: var(--gray-500)
}

.text-gray-600 {
  color: var(--gray-600)
}

.text-gray-700 {
  color: var(--gray-700)
}

.text-gray-800 {
  color: var(--gray-800)
}

.text-gray-900 {
  color: var(--gray-900)
}

/*.text-gray-800 {color: #FFFFFF1A}*/

.text-primary {
  color: var(--color-primary) !important
}

.text-success {
  color: var(--color-success) !important
}

.text-danger {
  color: var(--color-danger) !important
}

.text-warning {
  color: var(--color-warning) !important
}

.text-color2 {
  color: var(--color2) !important
}

.text-color3 {
  color: var(--color3) !important
}

.text-color4 {
  color: var(--color4) !important
}

.bg-gray-100 {
  background-color: var(--gray-100) !important
}

.bg-gray-200 {
  background-color: var(--gray-200) !important
}

.bg-gray-300 {
  background-color: var(--gray-300) !important
}

.bg-gray-400 {
  background-color: var(--gray-400) !important
}

.bg-gray-500 {
  background-color: var(--gray-500) !important
}

.bg-gray-600 {
  background-color: var(--gray-600) !important
}

.bg-gray-700 {
  background-color: var(--gray-700) !important
}

.bg-gray-800 {
  background-color: var(--gray-800) !important
}

.bg-primary {
  background-color: var(--primary-600) !important
}

.bg-warning {
  background-color: var(--color-warning)
}

.bg-success {
  background-color: var(--color-success)
}

.bg-success-200 {
  background-color: var(--success-200)
}

.bg-danger {
  background-color: var(--color-danger)
}

.bg-danger-200 {
  background-color: var(--danger-200)
}

.border-gray-800 {
  border-color: var(--gray-800) !important
}

.border-success {
  border-color: var(--color-success) !important
}

.border-danger {
  border-color: var(--color-danger) !important
}

.border-warning {
  border-color: var(--color-warning) !important
}

.text-justify {
  text-align: justify !important;
}



@media (max-width: 768px) {

  .modal,
  .modal-dialog {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
    /* new */
    max-width: 500px;
    margin: 0 auto;
  }

  .modal-content {
    height: 100%;
    border-radius: 0;
  }

  .modal-body {
    overflow-y: auto;
  }
}

.modal-title-absolute {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /*pointer-events: none; optional: prevents interfering with close button */
}

/* RESET BOOSTRAP STUFF */
.modal-content {
  background-color: var(--color-bg);
  color: var(--color-text);
  border-radius: var(--radius);
}

.modal-footer {
  border-top: none;
  margin-top: 1rem;
}

.modal-dialog {
  margin: 0;
}

body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: "Nunito", sans-serif;
  max-width: 430px;
  margin-left: auto;
  margin-right: auto;
}

.bg-body {
  background-color: var(--color-bg) !important;
}

.bg-light {
  background-color: var(--primary-400) !important;
}

header {
  background-color: var(--primary-700);
  /*background: #02063F;
  background: linear-gradient(90deg, rgba(2, 6, 63, 1) 0%, rgba(26, 31, 82, 1) 100%);*/
  background: #1A1F52;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
  color: var(--gray-0);
}

.contained {
  padding: 1em 16px;
  max-width: 430px;
  margin: 0 auto;
}

.section-title {
  margin: 30px 0 14px 0;
}

.section-title h2 {
  margin: 0;
}

.card {
  background-color: var(--color-bg-800);
  border-radius: var(--radius);
  color: var(--color-text);
}

.cards-stack>.card+.card,
.cards-stack a+a .card,
.cards-stack>turbo-frame+turbo-frame .card {
  margin-top: 0.5rem;
  /* space between cards */
}

.card.mt {
  margin-top: 1rem;
}

.card.bg-success {
  background-color: var(--success-200) !important;
}

a .card:hover,
a .card:active {
  background-color: var(--primary-700) !important;
}

a .card.bg-success:hover {
  background-color: var(--success-100) !important;
}

.card.bg-danger {
  background-color: var(--danger-200) !important;
}

a .card.bg-danger:hover {
  background-color: var(--danger-100) !important;
}

.card.warning {
  border-color: var(--warning) !important;
  background-color: var(--warning-200) !important;
}

.card-card {
  background-color: var(--color-bg-700);
  border-radius: var(--radius);
}

a {
  color: var(--color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--primary-400);
}

h1 {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

h2 {
  font-size: 18px;
  font-weight: 700;
}

.text-muted {
  color: var(--gray-100) !important;
  ;
}

.content {
  color: var(--gray-100);
}

.content strong {
  color: var(--color-text);
}

.content p {
  margin: 0.5rem 0;
}

.form-control {
  padding: 16px;
}

.btn {
  border-radius: var(--radius);
  padding: 0.5rem 1rem;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

.btn-big {
  font-size: 20px;
  padding: 0.75rem 1.5rem
}

.btn-primary {
  background-color: var(--color-primary);
  color: var(--color-text);
}

.btn-primary:hover {
  background-color: var(--primary-700);
}

.btn-secondary {
  background-color: var(--gray-800);
  color: var(--color-text);
}

.btn-secondary:hover {
  background-color: var(--gray-700);
}

.btn-white {
  background-color: white;
}

.btn-white:hover {
  background-color: var(--gray-100);
  color: #01063F;
}

/*.progress {
  height: 8px;
  --bs-progress-height: 8px;
  --bs-progress-bg: ;
  --bs-progress-bar-color: );
  --bs-progress-bar-bg: var(--primary-600);
}*/
.progress {
  height: 8px;
  /* slimmer bar (default = 1rem)   */
  background: var(--gray-500);
  /* soft gray track                */
  border-radius: 4px;
  /* pill shape                     */
  overflow: hidden;
  /* keeps inner bar rounded        */
}

/* inner bar ------------------------------------------------ */
.progress-bar {
  background: var(--primary-600);
  /* blue→indigo */
  color: #fff;
  line-height: 8px;
  /* match .progress height         */
  transition: width .35s ease;
  /* smooth change on JS update     */
}

.progress.progress-sm {
  height: 4px;
}

.progress-bar.progress-bar-sm {
  line-height: 4px;
}

.progress-warning .progress-bar {
  background: var(--color-warning) !important;
}

.lined-title {
  position: relative;
  /* anchor for the pseudo‐element   */
  display: flex;
  /* keep text and line on one row   */
  align-items: center;
  /* vertical centring               */
}

.lined-title::after {
  content: "";
  flex-grow: 1;
  /* ← expands to fill the container */
  height: 1px;
  background: var(--title-line-color);
  margin-inline-start: 1rem;
  /* gap between text and line       */
}

.circled-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  font-size: 1.1rem;
  line-height: 1;
  color: white;
  border-radius: 50%;
  background-color: var(--color-bg-alt-200);
  text-decoration: none;
  cursor: pointer;

  /* Force clickable area even for <a> with no href */
  pointer-events: auto;
}

button.circled-icon {
  border: none !important;
}

.circled-icon:hover {
  background-color: var(--color-bg-alt-600);
}

.squared-icon {
  width: 2.7rem;
  height: 2.7rem;
  font-size: 1.4rem;

  line-height: 2.7rem;
  text-align: center;
  vertical-align: middle;
  display: inline-block;
  vertical-align: middle;

  color: white;
  border-radius: 8px;
  background-color: var(--color-bg-alt-200);
}

.squared-icon.success {
  background-color: var(--color-success);
  color: #242D19;
}

.squared-icon.danger {
  background-color: var(--color-danger);
  color: #2E1C1E;
}

.badge {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 32px;
}

.badge-primary {
  background-color: var(--color-primary);
  color: var(--color-text);
}

.badge-primary-light {
  background-color: var(--primary-600);
  color: var(--color-text);
}

.badge-secondary {
  background-color: var(--primary-300);
  color: var(--color-text);
}

.badge-light-success {
  border: 2px var(--success) solid;
  color: var(--success);
  border-radius: 8px;
}

.badge-light-danger {
  border: 2px var(--danger) solid;
  color: var(--danger);
  border-radius: 8px;
}

.badge-light-warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning);
  padding: 6px 18px;
}

.badge-light {
  background-color: var(--gray-600);
  color: var(--color-200);
  font-weight: 400;
}


#user-menu .web {
  transform: translate(-30px, 59px);
}

.user-menu-link {
  background-color: var(--color-bg-800);
  margin: 14px 0;
  padding: 14px;
  display: block;
  border-radius: 14px;
  font-weight: 700;
  font-size: 16px;
}

a.user-menu-link {
  color: var(--color-text);
}

a.user-menu-link.danger {
  color: var(--color-danger);
}

.drawer-overlay {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  z-index: 109;
  background-color: rgba(0, 0, 0, 0.5);
  animation: animation-drawer-fade-in .3s ease-in-out 1;
}

.drawer {
  display: flex !important;
  overflow: auto;
  z-index: 110;
  position: fixed;
  top: 0;
  bottom: 0;
  background-color: var(--color-bg-800);
  transition: transform .3s ease-in-out !important;
}

.donut-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: bold;
  color: var(--gray-300);
}

/* used in user profile */
.legend {
  font-size: 12px;
  color: var(--gray-300);
}

.content img {
  max-width: 100%;
  width: auto;
  max-height: 360px;
  border-radius: 14px;
  border: 1px solid white;
  margin-top: 0.8em;
}

.noscrollbar {
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer and Edge */
}

.noscrollbar::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari, Edge (Chromium) */
}

select {
  background-color: var(--color-bg-800);
  color: var(--color-text);
  border: none;
  border-radius: 10px;
  padding: 6px 12px 6px 12px;
  font-size: 14px;
}

.card-league,
.card-quiz-session {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.league-card-text-muted {
  color: rgba(255, 255, 255, 0.7);
}

.card-league .progress {
  height: 15px;
  border-radius: 20px;
}

.card-league .progress-bar {
  height: 15px;
  border-radius: 20px;
}

.league-bronze .progress-bar {
  background-color: #BFBFBF;
}

.league-silver .progress-bar {
  background-color: #BFBFBF;
}

.league-gold .progress-bar {
  background-color: #FDDE60;
}

.league-platinium .progress-bar {
  background-color: #BBC4E4;
}

.league-diamond .progress-bar {
  background-color: #5DC8FC;
}

.league-master .progress-bar {
  background-color: #FA72ED;
}

.league-legend .progress-bar {
  background-color: #D72AF3;
}

.card-league.league-bronze {
  background-image: url(/assets/media/background-cards/bg-card-1-bronze.png);
}

.card-league.league-silver,
.card-league.league-placement {
  background-image: url(/assets/media/background-cards/bg-card-2-silver.png);
}

.card-league.league-gold {
  background-image: url(/assets/media/background-cards/bg-card-3_gold.png);
}

.card-league.league-platinum {
  background-image: url(/assets/media/background-cards/bg-card-4-platinium.png);
}

.card-league.league-diamond {
  background-image: url(/assets/media/background-cards/bg-card-5-diamond.png);
}

.card-league.league-master {
  background-image: url(/assets/media/background-cards/bg-card-6-master.png);
}

.card-league.league-legend {
  background-image: url(/assets/media/background-cards/bg-card-7-legend.png);
}

.league-icon {
  width: 98px;
  height: 98px;
  background-size: cover;
  /* scales 288 → 98 cleanly */
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.league-icon.league-icon-sm {
  width: 32px;
  height: 32px;
}

.league-icon.league-placement {
  background-image: url(/assets/media/league-badges/badge-0-placement.png);
}

.league-icon.league-bronze {
  background-image: url(/assets/media/league-badges/badge-1-bronze.png);
}

.league-icon.league-silver {
  background-image: url(/assets/media/league-badges/badge-2-silver.png);
}

.league-icon.league-gold {
  background-image: url(/assets/media/league-badges/badge-3-gold.png);
}

.league-icon.league-platinium {
  background-image: url(/assets/media/league-badges/badge-4-platinium.png);
}

.league-icon.league-diamond {
  background-image: url(/assets/media/league-badges/badge-5-diamond.png);
}

.league-icon.league-master {
  background-image: url(/assets/media/league-badges/badge-6-master.png);
}

.league-icon.league-legend {
  background-image: url(/assets/media/league-badges/badge-7-legend.png);
}

.badge-league-bronze {
  background-color: #65514f;
}

.badge-league-silver {
  background-color: #808080;
}

.badge-league-gold {
  background-color: #FFD700;
}

.badge-league-platinum {
  background-color: #E5E4E2;
}

.badge-league-diamond {
  background-color: #007FFF;
}

.badge-league-master {
  background-color: #8B0000;
}

.badge-league-legend {
  background-color: #800080;
}

.league-level-text {
  font-size: 32px;
  font-weight: 700;
  color: white;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  /* improves readability */
  pointer-events: none;
}

.league-icon-sm .league-level-text {
  font-size: 11px;
}

.card-quiz-session {
  background-image: url(/assets/media/background-cards/bg-card-history.png);
}

.card-quiz-session.session-won {
  background-image: url(/assets/media/background-cards/bg-card-history-won.png);
}

.row-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* max 2 per row */
  gap: 8px;
}

.row-cards .card {
  flex: 1;
  /* each card takes equal width */
}

.card .thumbnail {
  width: 172px;
  height: 48px;
  background-color: #2A2A2B;
  /* Replace with image or color */
  position: absolute;
  top: -14px;
  /* Half of thumbnail height (20px / 2) */
  left: 50%;
  transform: translateX(-50%);
  border: 1px solid #FFFFFF1A;
  border-radius: 50px;
}