@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root {
  /* 
  * Shade Variables
  */
  --neutral-000: #FFFFFF;
  --neutral-050: #F8F5F9;
  --neutral-100: #F1ECF3;
  --neutral-150: #EAE2EC;
  --neutral-200: #E3D9E6;
  --neutral-300: #D4C5DA;
  --neutral-400: #C6B2CD;
  --neutral-500: #B89FC1;
  --neutral-600: #96819E;
  --neutral-700: #74637A;
  --neutral-800: #524657;
  --neutral-850: #413745;
  --neutral-900: #302833;
  --neutral-950: #1F1922;
  --neutral-1000:#0E0A10;

  --brand-000: var(--neutral-000);
  --brand-050: #FCF5FF;
  --brand-100: #FAECFF;
  --brand-150: #F7E2FF;
  --brand-200: #F4D8FF;
  --brand-300: #EFC5FF;
  --brand-400: #E9B1FF;
  --brand-500: #E49EFF;
  --brand-600: #BB7ED2;
  --brand-700: #925FA5;
  --brand-800: #683F79;
  --brand-850: #542F62;
  --brand-900: #3F204C;
  --brand-950: #2B1035;
  --brand-1000:#16001F;

  --orange-000: var(--neutral-000);
  --orange-050: #FFF9EC;
  --orange-100: #FFF3D8;
  --orange-150: #FFEDC5;
  --orange-200: #FFE7B1;
  --orange-300: #FFDA8B;
  --orange-400: #FFCE64;
  --orange-500: #FFC23D;
  --orange-600: #D29F31;
  --orange-700: #A57D25;
  --orange-800: #785A18;
  --orange-850: #624912;
  --orange-900: #4B380C;
  --orange-950: #352606;
  --orange-1000:#1E1500;
  
  /* 
  * Color Variables
  */
  --neutral-default: var(--neutral-100);
  --neutral-secondary: var(--neutral-950);
  --neutral-tertiary: var(--neutral-900);
  --neutral-invert-default: var(--neutral-050);
  --neutral-invert-secondary: var(--neutral-100);
  --neutral-invert-tertiary: var(--neutral-150);

  --brand-primary: var(--brand-500);
  --brand-primary-hover: var(--brand-400);
  --brand-secondary: var(--neutral-050);
  --brand-secondary-hover: var(--brand-900);
  --brand-tertiary: var(--neutral-000); 
  --brand-tertiary-hover: var(--neutral-050);

  --accent-default: var(--orange-500);
  --disabled-default: var(--neutral-800);

  --text-default: var(--neutral-050);
  --text-secondary: var(--neutral-500);
  --text-tertiary: var(--neutral-700);
  --text-neutral: var(--brand-050);
  
  --text-brand-default: var(--brand-400);
  --text-brand-secondary: var(--brand-300);
  --text-brand-tertiary: var(--brand-400);
  --text-on-brand-primary: var(--brand-900);
  --text-on-brand-secondary: var(--brand-400);
  --text-on-brand-tertiary: var(--brand-400);
  --text-on-disabled: var(--neutral-900);
  --text-on-accent: var(--neutral-1000);
  
  --border-default: var(--neutral-850);
  --icon-default: var(--neutral-000);

  /* 
  * Spacing Variables
  */
  --spacing-000: 0px;
  --spacing-050: 2px;
  --spacing-100: 3px;
  --spacing-150: 6px;
  --spacing-200: 8px;
  --spacing-300: 12px;
  --spacing-400: 16px;
  --spacing-500: 24px;
  --spacing-600: 32px;
  --spacing-700: 40px;
  --spacing-800: 48px;
  --spacing-850: 56px;
  --spacing-900: 64px;
  --spacing-950: 96px;
  --spacing-1000: 160px;

  /* 
  * Radius Variables
  */
  --radius-100: 4px;
  --radius-200: 8px;
  --radius-300: 12px;
  --radius-400: 16px;
  --radius-600: 24px;
  --radius-800: 32px;
  --radius-1000: 9999px;

  /* 
  * Icon Variables
  */
  --icon-small: 24px;
  --icon-medium: 32px;
  --icon-large: 40px;
  /* 
  * @media breakpoints
  */
  --bp-xs: 0px;
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-xxl: 1536px;
  
  /* 
  * Font Variables:
  */
  --fs-300: 0.625rem;
  --fs-400: 0.812rem;
  --fs-500: 1.000rem;
  --fs-600: 1.250rem;
  --fs-700: 1.562rem;
  --fs-800: 1.938rem;
  --fs-850: 2.438rem;
  --fs-900: 3.062rem;
  --fs-950: 3.812rem;

  --fw-050: 50;
  --fw-100: 100;
  --fw-200: 200;
  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-850: 850;
  --fw-900: 900;
  --fw-950: 950;
  --fw-1000: 1000;

  --default-font-family: "Inter", sans-serif; /* ? Siehe @import */
  --default-font-size: var(--fs-500);

  --default-p: var(--fs-500)/ var(--fs-700) var(--default-font-family);
  --default-h1: 600 var(--fs-900)/var(--fs-600) var(--default-font-family);
  --default-h2: 600 var(--fs-800)/var(--fs-600) var(--default-font-family);  
}
/* 
* Globals
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scroll-behavior: smooth;
}
body {
  background: var(--neutral-1000) !important;
  font-family: var(--default-font-family);
}
.container { /* ? i.e Wrapper */
  width: auto;
  max-width: var(--bp-xl);
  height: auto;
  min-height: fit-content;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
main {
  margin-bottom: 100px;
}
.table-wrapper {
  overflow-x: auto;
}

/* 
* FONT Variables
*/
.fs-300 { font-size: var(--fs-300); }
.fs-400 { font-size: var(--fs-400); }
.fs-500 { font-size: var(--fs-500); }
.fs-600 { font-size: var(--fs-600); }
.fs-700 { font-size: var(--fs-700); }
.fs-800 { font-size: var(--fs-800); }
.fs-850 { font-size: var(--fs-850); }
.fs-900 { font-size: var(--fs-900); }
.fs-950 { font-size: var(--fs-950); }

.fw-100  { font-weight: var(--fw-100); }
.fw-200  { font-weight: var(--fw-200); }
.fw-300  { font-weight: var(--fw-300); }
.fw-400  { font-weight: var(--fw-400); }
.fw-500  { font-weight: var(--fw-500); }
.fw-600  { font-weight: var(--fw-600); }
.fw-700  { font-weight: var(--fw-700); }
.fw-800  { font-weight: var(--fw-800); }
.fw-900  { font-weight: var(--fw-900); }
.fw-1000 { font-weight: var(--fw-1000); }

.text-default         { color: var(--text-default); }
.text-secondary       { color: var(--text-secondary); }
.text-tertiary        { color: var(--text-tertiary); }
.text-neutral         { color: var(--text-neutral); }

.text-brand-default   { color: var(--text-brand-default); }
.text-brand-secondary { color: var(--text-brand-secondary); }
.text-brand-tertiary  { color: var(--text-brand-tertiary); }

.text-on-brand        { color: var(--text-on-brand-primary); }
.text-on-accent       { color: var(--text-on-accent); }
.text-on-disabled     { color: var(--text-on-disabled); }

a {
  text-decoration: none;
  color: var(--text-default);
  font: var(--default-p);
}
p {
  font: var(--default-p);
  color: var(--text-default);
}
h1 {
  font: var(--default-h1);
  color: var(--text-neutral);
  line-height: 100%;
}
h2 {
  font: var(--default-h2);
  color: var(--text-tertiary);
  line-height: 100%;
}
h3 {
  font: var(--default-h2);
  color: var(--text-tertiary);
  line-height: 100%;
}
h3, h4, h5, h6 {
  line-height: 100%;
}
/*
* HELPER Hintergrund
*/
.bg-secondry          { background-color: var(--neutral-500); }
.bg-neutral           { background-color: var(--neutral-default); }
.bg-brand             { background-color: var(--brand-primary); }
.bg-accent            { background-color: var(--accent-default); }
.bg-disabled          { background-color: var(--disabled-default); }
.bg-white             { background-color: var(--neutral-000); }
.bg-dark              { background-color: var(--brand-1000) ;}
/*
* HELPER Padding & Margin & gap & dispaly && alignment
*/
.pd-000 { padding: var(--spacing-000); }
.pd-050 { padding: var(--spacing-050); }
.pd-100 { padding: var(--spacing-100); }
.pd-150 { padding: var(--spacing-150); }
.pd-200 { padding: var(--spacing-200); }
.pd-300 { padding: var(--spacing-300); }
.pd-400 { padding: var(--spacing-400); }
.pd-500 { padding: var(--spacing-500); }
.pd-600 { padding: var(--spacing-600); }
.pd-700 { padding: var(--spacing-700); }
.pd-800 { padding: var(--spacing-800); }
.pd-850 { padding: var(--spacing-850); }
.pd-900 { padding: var(--spacing-900); }
.pd-950 { padding: var(--spacing-950); }
.pd-1000 { padding: var(--spacing-1000); }

.mg-000 { margin: var(--spacing-000); }
.mg-050 { margin: var(--spacing-050); }
.mg-100 { margin: var(--spacing-100); }
.mg-150 { margin: var(--spacing-150); }
.mg-200 { margin: var(--spacing-200); }
.mg-300 { margin: var(--spacing-300); }
.mg-400 { margin: var(--spacing-400); }
.mg-500 { margin: var(--spacing-500); }
.mg-600 { margin: var(--spacing-600); }
.mg-700 { margin: var(--spacing-700); }
.mg-800 { margin: var(--spacing-800); }
.mg-850 { margin: var(--spacing-850); }
.mg-900 { margin: var(--spacing-900); }
.mg-950 { margin: var(--spacing-950); }
.mg-1000 { margin: var(--spacing-1000); }

.gap-100 { gap: var(--spacing-100); }
.gap-200 { gap: var(--spacing-200); }
.gap-300 { gap: var(--spacing-300); }
.gap-400 { gap: var(--spacing-400); }
.gap-500 { gap: var(--spacing-500); }

.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.center      { justify-content: center; align-items: center; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.space-between { justify-content: space-between; }
.space-evenly { justify-content: space-evenly; }
.space-around { justify-content: space-around; }
.flex-start { align-items: flex-start; }
.flex-end { align-items: flex-end; }


/*
* HELPER Radius & Border
*/

.rd-100  { border-radius: var(--radius-100); }
.rd-200  { border-radius: var(--radius-200); }
.rd-300  { border-radius: var(--radius-300); }
.rd-400  { border-radius: var(--radius-400); }
.rd-600  { border-radius: var(--radius-600); }
.rd-800  { border-radius: var(--radius-800); }
.rd-full { border-radius: var(--radius-1000); }

.br          { border: 1px solid var(--border-default); }
.br-top      { border-top: 1px solid var(--border-default); }
.br-right    { border-right: 1px solid var(--border-default); }
.br-bottom   { border-bottom: 1px solid var(--border-default); }
.br-left     { border-left: 1px solid var(--border-default); }

/*
* HELPER BUTTONS
*/
.btn-group {
  display: flex;
  justify-content: center;
}
.btn,
button {
  padding: 0.75rem 1.5rem;
  border: none;
  font-size: 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.brand {
  background-color: var(--brand-primary);
  color: var(--text-on-brand-primary);
}
.brand:hover {
  background-color: var(--brand-primary-hover);
  color: var(--text-on-brand-primary);
}
.primary {
  background-color: var(--neutral-950);
  color: var(--neutral-500);
  svg {
    fill: var(--neutral-500);
  }
}
.primary:hover {
  background-color: var(--neutral-950);
  svg {
    fill: var(--neutral-300);
  }
}
.secondary {
  background-color: var(--brand-secondary-hover);
  color: var(--text-on-brand-secondary);
}
.secondary:hover {
  background-color: var(--brand-secondary);
  color: var(--text-on-brand-secondary);
}

.tertiary {
  background-color: var(--brand-tertiary);
  color: var(--text-on-brand-tertiary);
}
.tertiary:hover {
  background-color: var(--brand-tertiary-hover);
  color: var(--text-on-brand-tertiary);
}

.accent {
  background-color: var(--accent-default);
  color: var(--text-on-accent);
}
.accent:hover {
  background-color: var(--orange-600);
  color: var(--text-on-accent);
}

.disabled {
  background-color: var(--disabled-default);
  color: var(--text-on-disabled);
}
.disabled:hover {
  background-color: var(--neutral-900);
  color: var(--text-on-disabled);
}

/* ! NAV */
.nav-bar {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 80px;
  background-color: #eee;
  border-radius: 20px 20px 0 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 1em;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.nav-bar a {
  text-align: center;
  color: #333;
  text-decoration: none;
  font-size: 0.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: all 0.3s ease;
}

.nav-bar a i {
  font-size: 1.5em;
  height: 48px;
  width: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  transition: 0.3s ease-in-out;
}

.nav-bar a.active i {
  background: linear-gradient(135deg, #23f, #6589ff);
  color: white;
  transform: translateY(-25px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.nav-bar a span {
  margin-top: 5px;
  color: #333;
}

.nav-bar a.active span {
  font-weight: bold;
  color: #23f;
}
/* ! nav end */
/* ! PINs Setter */
.pin-setter-grid {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}
.pin-wrapper {
  position: relative;
  grid-area: unset; 
}
.pins {
  display: grid;
  grid-template-columns: repeat(7, 50px);
  grid-template-rows: repeat(4, 60px);
  grid-template-areas:
  "P7 . P8 . P9 . P10"
  ". P4 . P5 . P6 ."
  ". . P2 . P3 . ."
  ". . . P1 . . .";
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.pin {
  width: 100%;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
  transform-origin: center center;
  display: block;
}
.pin.hit {
  transform: rotate(90deg);
  opacity: 0.6;
}
/* Positionierung der Pins */
.P1 { grid-area: P1; }
.P2 { grid-area: P2; }
.P3 { grid-area: P3; }
.P4 { grid-area: P4; }
.P5 { grid-area: P5; }
.P6 { grid-area: P6; }
.P7 { grid-area: P7; }
.P8 { grid-area: P8; }
.P9 { grid-area: P9; }
.P10 { grid-area: P10; }
/* ! Scoreboard */

/* ! game display*/
.activeNumber {
  background-color: var(--brand-500);
}
.gameContainer {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
}
.frame {
  width: fit-content;
  flex: 0 0 auto;  
}
.frameNumber {
  border-radius: 8px 8px 0px 0px;
  width: 100%;
  display: flex;
  justify-content: center;
}
.throw-box {
  display: flex;
  gap: 2px;
  height: 40px;
  background-color: var(--brand-850);
}
.score-box {
  display: flex;
  justify-content: center;
  background-color: var(--brand-850);

}
.th1, .th2, .th3 {
  min-width: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.th1, .th2 {
  background-color: var(--brand-700);
}

/* ! Card grid */
/* .card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  grid-template-rows: 1fr;
  grid-column-gap: 8px;
  grid-row-gap: 8px; 
}
.card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 8px;
  padding: var(--spacing-300);
  color: var(--text-brand-default);
  background-color: var(--disabled-default);
}
.card img {
  width: 100px;
  height: 100px;
} */
/* ! profile nav */
.profile-navbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 0px;
  grid-row-gap: 0px; 
  padding: 2px;
  height: 50px;
}
.profile-navItem {
  position: relative;
  color: #aaa;
  font-weight: 500;
  font-size: 16px;
  text-align: center;
  height: 48px;
}
.profile-navItem a {
  text-decoration: none;
  text-transform: uppercase;
  font-weight: var(--fw-300);
  color: inherit;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.profile-navItem.active {
  color: #76ff03 !important;
}
.profile-navItem.active::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: #76ff03;
}
/* ! profile page nav selector default */
.section-content {
  display: none;
}
.section-content.active {
  display: block;
}
/* ! ACHievement card */
.achievement-card {
  position: relative;
  background-image: var(--card-bg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: transparent;
  width: 200px;
  aspect-ratio: 1 / 1;
  display: flex;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.achievement-card .content {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-sizing: border-box;
}
.achievement-card .content-inner {
  max-width: 120px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: center;
  height: 100%;
  color: white;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.6);
}
.achievement-card h3 {
  margin: 0;
  font-size: 1rem;
  font-weight: bold;
}
.achievement-card span {
  font-size: 0.85rem;
}

/* ! PROGRESSBAR */
.progress-container {
  width: 100%;
  max-width: 300px;
  height: 10px;
  background-color: #eee;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
  margin: 10px 0;
}
.progress-bar {
  height: 100%;
  background-color: #4caf50;
  width: 0;
  transition: width 0.5s ease-in-out;
}
.progress-bar.with-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 0.8rem;
}


/* ! ball  */
.ball-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.ball-card {
  background-color: #302833;
  border-radius: 12px;
  padding: 1rem;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.ball-image {
  width: 100%;
  height: auto;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  object-fit: cover;
}
.ball-color {
  width: 100%;
  height: 10px;
  border-radius: 4px;
  margin-bottom: 0.5rem;
}
/* ! settings einstellungen */
.settings-container {
  max-width: 600px;
  margin: 2rem auto;
  padding: 1.5rem;
  font-family: sans-serif;
}
.settings-container h1 {
  text-align: center;
  margin-bottom: 2rem;
  color: inherit;
}
.settings-form {
  background: var(--neutral-000);
  padding: 1.5rem;
  border-radius: 10px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.settings-form h2 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
  color: var(--text-on-brand-primary);
}
.settings-form p {
  color: var(--text-on-brand-primary);
}
.settings-form label {
  display: block;
  margin-top: 1rem;
  font-weight: var(--fw-500);
}
.settings-form input {
  width: 100%;
  padding: 0.6rem;
  margin-top: 0.25rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1rem;
}
.input-group {
  margin-bottom: var(--spacing-400);
}
/* ! settings ende */
/* ! login */
main.login-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
.login-form {
  background-color: var(--brand-850); /* brand */
  padding: 2rem;
  border-radius: 10px;
}
.login-form form {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}
.login-form h1 {
  color: var(--text-brand-default);
  margin-bottom: 0.5rem;
}
.login-form img {
  width: 200px;
  height: auto;
  margin-bottom: 1rem;
}
.login-form div {
  display: flex;
  align-items: center;
  background-color: var(--text-brand-default);
  border-radius: 8px;
  padding: 0.4rem 0.6rem;
  gap: 0.5rem;
  width: 100%;
  max-width: 300px;
}
.login-form label {
  display: flex;
  align-items: center;
  font-size: 1.2rem;
  color: #925FA5;
  cursor: pointer;
}
.login-form input[type="text"],
.login-form input[type="password"] {
  border: none;
  outline: none;
  padding: 0.6rem;
  border-radius: 6px;
  flex: 1;
  font-size: 1rem;
  background-color: var(--text-brand-default);
}
/* ! login end */
/* ! tabellen style */
.styled-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-500);
  background-color: var(--neutral-850);
  color: var(--text-default);
  border: 1px solid var(--neutral-800);
  border-radius: var(--radius-200);
  overflow: hidden;
}

.styled-table thead {
  background-color: var(--brand-800);
  color: var(--text-on-brand-primary);
  font-weight: var(--fw-700);
  text-align: left;
}

.styled-table thead th {
  padding: var(--spacing-300);
  border-bottom: 1px solid var(--neutral-800);
}

.styled-table tbody tr {
  transition: background 0.2s ease;
}

.styled-table tbody tr:hover {
  background-color: var(--neutral-800);
}

.styled-table td {
  padding: var(--spacing-300);
  border-bottom: 1px solid var(--neutral-800);
  color: var(--text-default);
  vertical-align: middle;
}

.styled-table tbody tr:last-child td {
  border-bottom: none;
}

.styled-table .status-badge {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-100);
  font-size: var(--fs-400);
  font-weight: var(--fw-600);
  text-align: center;
  display: inline-block;
}

.status-active {
  background-color: var(--brand-500);
  color: var(--text-on-brand-primary);
}
.status-inactive {
  background-color: var(--orange-700);
  color: var(--text-on-brand-primary);
}

/* ! DASHBOARD HERO */
.dash-hero {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}
.dashboard {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
}

.dashboard .card {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  background-color: var(--neutral-950);
  padding: var(--spacing-400) var(--spacing-500);
  border-radius: var(--spacing-400);
  svg {
    width: 5rem;
    height: 5rem;
    fill: var(--neutral-900);
  }
}