/*********************************************************************************************************************/
/*                                                                                                                   */
/*                                                  LEVEL SELECTION                                                  */
/*                                                                                                                   */
/*********************************************************************************************************************/

.level_selection        { margin-top: 2rem; text-align: center;                       }
.levelset_select        { max-width: 100%; padding: 0.4rem; background: var(--paper)  ;
                          border: 0; border-bottom: 1px solid var(--grid)             ;
                          font-size: 0.8rem; cursor: pointer;                         }
.level_buttons          { display: flex; justify-content: center; flex-wrap: wrap     ;
                          gap: 0.6rem; margin-top: 0.8rem;                            }
.level_button           { position: relative; min-width: 2.3rem; min-height: 2.3rem   ;
                          padding: 0.3rem; color: var(--darkink); font-size: 0.9rem;  }
.level_button.selected  { color: var(--yellow); border: 1px solid var(--yellow)       ;
                          border-radius: 46% 54% 49% 51%; transform: rotate(-5deg);   }
.level_check            { position: absolute; top: 0; right: -0; pointer-events: none ;
                          color: var(--green); font-size: 0.75rem; line-height: 1;    }

/*********************************************************************************************************************/
/*                                                                                                                   */
/*                                                      SETTINGS                                                     */
/*                                                                                                                   */
/*********************************************************************************************************************/

.settings_open            { position: absolute; top: 1.1rem; right: 1rem; padding: 0.3rem 0.7rem      ;
                            font-size: 0.95rem; border: 1px solid var(--grid)                         ;
                            border-radius: 5px 2px 6px 3px; transform: rotate(2deg);                  }
.settings_open:hover      { border-color: var(--yellow);                                              }
.settings_menu            { width: min(18rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem)     ;
                            padding: 1.4rem; color: var(--ink); background: var(--paper)              ;
                            border: 1px solid #A5B2A488; border-radius: 4px 8px 3px 6px               ;
                            box-shadow: 6px 8px 0 #0E121666; overflow: auto;                          }
.settings_menu::backdrop  { background: #080B10BB;                                                    }
.settings_header          { display: flex; align-items: center; justify-content: space-between        ;
                            gap: 1rem; margin-bottom: 1.4rem;                                         }
.settings_header h2       { margin: 0; color: var(--yellow); font-size: 1.5rem; font-weight: normal;  }
.settings_header button   { padding: 0.3rem; color: var(--darkink); font-size: 0.85rem;               }
.settings_header button:hover
                          { color: var(--yellow);                                                     }
.settings_row             { display: flex; align-items: center; justify-content: space-between        ;
                            gap: 1rem; margin-bottom: 1.5rem;                                         }
.language_select          { padding: 0.4rem 0.6rem; background: var(--paper); color: var(--ink)       ;
                            border: 1px solid var(--grid); border-radius: 5px 2px 6px 3px             ;
                            cursor: pointer;                                                          }
.colorblind_toggle        { width: 1.1rem; height: 1.1rem; margin: 0                                  ;
                            accent-color: var(--yellow); cursor: pointer;                             }
.progress_reset           { width: 100%; padding: 0.5rem 0.8rem; color: var(--darkink)                ;
                            border: 1px solid var(--grid); border-radius: 5px 2px 6px 3px;            }
.progress_reset:hover     { color: var(--red); border-color: var(--red);                              }